异步加载AngularJS应用程序
Load AngularJS app async
我正在尝试异步加载AngularJS应用程序,但我担心这可能是不可能的。
我主要是通过CSS技巧来学习本指南的示例,但遗憾的是没有取得任何成功。
关闭的尝试是首先只加载jQuery,然后使用它通过ajax调用加载其他脚本:
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script>
jQuery.cachedScript = function( url, options ) {
options = $.extend( options || {}, {
dataType: "script",
cache: true,
url: url
});
return jQuery.ajax( options );
};
$.cachedScript( "https://code.angularjs.org/1.5.3/angular.min.js" )
.done(function() {
return $.cachedScript( "scripts/vendor.js")
})
.done(function() {
$.cachedScript( "scripts/app.js", { cache : false } );
});
</script>
通过这种方式,可以正确加载所有脚本。然而,我得到了这个错误:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=app&p1=Error%3A%20%…0c%20(https%3A%2F%2Fcode.angularjs.org%2F1.5.3%2Fangular.min.js%3A20%3A463)
然后我尝试了这个:
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://code.angularjs.org/1.5.3/angular.min.js"></script>
<script src="scripts/vendor.js"></script>
<script>
jQuery.cachedScript = function( url, options ) {
options = $.extend( options || {}, {
dataType: "script",
cache: true,
url: url
});
return jQuery.ajax( options );
};
$.cachedScript( "scripts/app.js", { cache : false } );
</script>
但也出现了同样的错误。
问题似乎是由angularjs在app.js
文件之前加载的事实引起的,然而这似乎很奇怪。
因此,问题是,不可能异步加载angularjs文件吗?
PS我也尝试过其他方法,但它们不起作用,因为必须加载文件的顺序是强制性的(depencencies…)
例如,我还尝试了html async
属性:
<script async src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script async src="https://code.angularjs.org/1.5.3/angular.min.js"></script>
<script async src="scripts/vendor.js"></script>
<script async src="scripts/app.js"></script>
但这会失败,因为这样脚本会以不可预测的顺序加载。
我还尝试手动注入链接(没有async属性)
(function() {
var urls = [
"scripts/app.js",
"scripts/vendor.js",
"https://code.angularjs.org/1.5.3/angular.min.js",
"https://code.jquery.com/jquery-2.2.2.min.js",
];
for (var i = 0; i < urls.length; i++) {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = false;
po.src = urls[i];
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
}
})();
但仍然没有成功,因为它们仍然以不可预测的顺序装载。
如果如您所说,您使用的是ng-app
指令,当angular解析DOM以找到ngApp
指令时,它会尝试自动引导应用程序,并且由于app.js
尚未加载,因此angular会抛出。
因此,您需要删除该属性,并在app.js
中添加以下行:
angular.bootstrap(document.getElementById('ngAppContainer'), ['app']);
相关文章:
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- angularjs+rails应用程序中未显示模板
- Angularjs-utils高亮过滤器在搜索时破坏应用程序
- 我想在AngularJS应用程序中创建一个输入数字框,用户不应该在该框上键入十进制数字.(一个整数输入框)
- Ionic和angularjs嵌套步骤应用程序
- 如何在AngularJS应用程序的主体上动态设置溢出
- AngularJs Cordova安卓应用程序中输入的4位密码PIN验证
- 在AngularJS中的另一个ng应用程序中使用来自一个ng程序的Cookie值
- 使用AngularJS制作一个类似电子表格的应用程序
- 使用angularjs和node.js时的Web应用程序文件夹结构
- 如何使用Node.js/MongoDB在AngularJS应用程序中获取特定于目标的数据
- 仅客户端AngularJS应用程序
- 如何使用onDeviceReady设置AngularJS应用程序并初始化Cordova的功能
- 如何在angularjs应用程序中解析Drupal JSON数据
- 具有不同模板的Web应用程序(AngularJS)
- MusicBrainz应用程序|AngularJS的JSON对象的动态GET
- 想要在登录页面和其他页面应用程序 angularjs 之间分开
- 使用后退按钮移动单页应用程序 AngularJS
- Facebook像素与单页应用程序(angularjs)
- 在单页应用程序angularJs中选择菜单时调用控制器