简体   繁体   English

如果未从头部加载角度错误

[英]Angular error if not loaded from head

When I try to load angular from the bottom of the body I always get the following error : 当我尝试从身体底部加载角度时,总是会出现以下错误:

Failed to instantiate module xxApp due to: [$injector:nomod] 由于以下原因,无法实例化模块xxApp:[$ injector:nomod]

It works (almost, see bellow) perfectly when angular is loaded from the head, but angular website suggests it's better to load it from the body to be sure the DOM is fully ready. 当从头部加载角铁时,它的工作原理非常完美(几乎见下面的波纹管),但是角铁网站建议最好从身体加载它,以确保DOM已完全准备就绪。

HTML 的HTML

<!DOCTYPE HTML>
<html ng-app="xxApp">
<head>
     <script src="js/jquery-1.11.1.min.js"></script>
     <!-- another bunch of js files that need to be here -->
</head>
<body ng-controller="bodyController">
     <!-- My body -->
     <script src="js/angular.min.js"></script>
     <!-- another bunch of js files that are angular dependant -->
</body>
</html>

JS JS

var xxApp = angular.module('xxApp', ['ngDb', 'ngAnimate', 'ui.bootstrap']);

xxApp.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('//');
    $interpolateProvider.endSymbol('//');
});
xxApp.config(function($locationProvider) {
    $locationProvider.html5Mode({enabled: true, requireBase: false});
});

xxApp.controller('bodyController', ['$scope', 'om', '$location', '$document', '$filter', '$q', function($scope, om, $location, $document, $filter, $q) {
$scope.messageBoxVisibility = false;
//...
});

The thing is, I suspect that loading angular from the head is responsible for a random bug I get, which causes a specific part of my DOM, always the same, not to be processed by angular. 问题是,我怀疑从头部加载角度会导致我得到一个随机错误,该错误会导致我的DOM的特定部分始终相同,而不会被角度处理。 This part is at the bottom of the body : 这部分位于主体的底部:

<div id="message-box" ng-show="messageBoxVisibility">
    <a ng-click="messageBoxVisibility = false"></a>
    <div>
        <b>//scopeVar//</b>
    </div>
</div>

scopeVar is set to false at the beginning of the controller so the message is not shown when page loads. 在控制器的开头将scopeVar设置为false,因此在页面加载时不显示该消息。 But sometimes, let say 1/10 of the time, the message is shown, //scopVar// is visible as is and the ngClick is ineffective. 但是有时,假设有1/10的时间显示了该消息,// scopVar //照原样可见,并且ngClick无效。

I'm using angular 1.4.7. 我正在使用角度1.4.7。

One more thing : when loading the page from a local server, I get 100% success, wether angular is loaded from the head or the body and I never see the message box. 还有一件事:从本地服务器加载页面时,我获得了100%的成功,无论是从头部还是从身体加载角度,我都看不到消息框。

I think that is impossible, for me the problem is that some of your files are not loaded correctly... for example, someone of them return a non-200 result. 我认为这是不可能的,对我来说,问题是您的某些文件未正确加载...例如,其中某些文件返回非200结果。

Try to open the dev-tools and ensure that all of javascript files return a 200 (http) status code. 尝试打开开发工具,并确保所有javascript文件都返回200(http)状态代码。

Just a note, You need to load AngularJS before all scripts that depend on AngularJS... 请注意,您需要在所有依赖AngularJS的脚本之前加载AngularJS。


  1. angularJs 1.1 angular components (3rd part libraries included) angularJs 1.1角度分量(包括第3部分库)

If you are using jQuery with AngularJS could be a good thing include jQuery before AngularJS 如果您将jQuery与AngularJS一起使用可能是一件好事,请在AngularJS之前加入jQuery

Well, problem solved. 好了,问题解决了。

The issue came from a minified lib that was loaded before angular. 该问题来自于在angular之前加载的缩小库。 I just has to move it after and boom. 之后,我只需要移动它即可。 I don't why it made angular all messed up, although I suspect it may come from an ajax request made the lib that always get 404. 我不知道为什么它使角度全乱了,尽管我怀疑它可能来自ajax请求,使得lib总是得到404。

I still don't understand why it didn't failed when loaded from the head because the order was the same though... 我仍然不明白为什么从头部加载时它没有失败,因为顺序是一样的...

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM