動態加載AngularJS應用程序

我期待將AngularJS Web應用程序集成到多個網站中。我希望能夠提供每個網站管理員用HTML代碼，如下列：動態加載AngularJS應用程序

<div id='angular-integration-app'></div><script src="widget.js"></script>

插入到網頁HTML代碼，網站應該加載AngularJS並插入一個AngularJS應用程序作爲標有「angular-integration-app」ID的元素的子元素。

This Plunker has an implementation，但是這個實現不起作用。它間歇性失敗，並帶有錯誤：

Uncaught ReferenceError: angular is not defined application.js:1 
Uncaught Error: [$injector:modulerr] angular.js:38

我注意到，它通常工作正常，它是第一次加載，但在按下瀏覽器的刷新按鈕時，它往往會失敗。當它不通過Plunker託管時尤其如此。

請提供有關創建動態AngularJS應用程序集成的最佳方法，該集成一直可用。

來源

2015-02-24 Aristarkh Artemiy

code in this Plunker看起來像解決了問題。我現在將AngularJS添加爲head元素的子元素（名爲「script」的變量），然後繼續修改DIV或加載AngularJS應用程序，直到「script.onload」。我將floribon的帖子中的一些想法也納入了這個Plunker。

script.onload = function() { 
    // code here 
};

來源

2015-02-25 19:32:52

這種不一致的行爲是因爲有時頁面被緩存並且代碼被同步執行，有時它不會。

要解決這個問題，您需要等待角度準備就緒，然後聲明您的模塊，然後使用模塊引導文檔。如果引導是在「之後」（異步，超出角度上下文）執行的，則不能在HTML中使用ng-app。我所做的更改，以顯示你應該如何：

var element = document.querySelector('#angular-integration-app'); 
angular.element(element).ready(function() { 

    var app = angular.module('myapp', []); 

    app.directive('customForm', function() { 
    return { 
     restrict: 'A', 
     template: 'hello world' 
    }; 
    }); 

    angular.bootstrap(element, ['myapp']); 
});

http://plnkr.co/edit/7KbD1Okwx0MwhDIJXIGE?p=preview

或者，如果你不想角弄亂你的目標HTML（如果他是用另一種會發生什麼版本的angularjs自己？），你可以創建一個iFrame來隔離你的角度，風格和代碼。

來源

2015-02-24 19:54:20 floribon

您好，非常感謝您的回覆。您提供的代碼在Plunker中工作，但是當我將每個文件複製到我的機器並使用本地HTTP服務器運行它時，我會得到與以前相同的行爲：當第一次打開瀏覽器選項卡時，將打印「YAHOW」到控制檯和「hello world」出現在頁面上。按下瀏覽器刷新按鈕時，控制檯中會顯示一條錯誤消息，提示「Uncaught ReferenceError：angular is not defined。」我懷疑仍然存在未解決的頁面緩存或同步問題。 – 2015-02-25 15:22:00

哦，這是一個不同的錯誤。你在執行這段代碼之前加載了angular.js文件嗎？例如，你可以在'

'中加載文件，並在''中加入這個代碼。否則，一個簡單的方法來解決它，如果你正在使用jQuery是使用'$（document）.ready（...）'而不是'angular.element（element）.ready（...）'。或者，如果您不使用jQuery，只需嘗試'（function（）{...}）（）' – floribon 2015-02-25 19:06:21

動態加載AngularJS應用程序

回答

相關問題