Angular.js:未捕获错误,没有模块:myapp

Luc*_*aio 23 javascript angularjs

我正在尝试一个angular.js项目.这是我的index.html:

<!doctype html>
<html ng-app="myapp">
<head>
    <meta charset="utf-8">
    <base href="{% url 'app' %}" />

    <title>Project</title>
</head>
<body>
    <div ng-view>
        <p>Loading...</p>
    </div>

    <script>
        var url = function(path) { return '{{ STATIC_URL }}' + path };
    </script>
    <script src="{{ STATIC_URL }}js/jquery-1.10.1.js"></script>
    <script src="{{ STATIC_URL }}js/angular.js"></script>
    <script src="{{ STATIC_URL }}js/project/app.js"></script>
    <script src="{{ STATIC_URL }}js/project/controllers.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

例如url 'app',头部只打印子路径/ app.这是我的app.js:

'use strict';

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

app.config(['$routeProvider', function($router) {
    $router.when('/', {
        templateUrl: url('partials/foo.html'),
        controller: controllers.Foo
    });
}]);
Run Code Online (Sandbox Code Playgroud)

问题在于,每当我尝试运行它时,都会引发异常:Uncaught Error: No module: myapp这与angular-seed的工作方式几乎相同.我搜索了Google和StackOverflow,但没有一个答案(一个两个)帮助了我.

这是关于我的错误的一个小提琴(您应该打开浏览器的控制台来查看它).出了什么问题?

Ale*_*euk 40

您的脚本的顺序非常重要,请尝试将其放入您的脚本中 <head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
    var app = angular.module('myapp', []);

    app.controller('Ctrl', function($scope){
        $scope.variable = "Hello";
    });
</script>
<body ng-app="myapp">
    <div ng-controller="Ctrl">
        <p>{{variable}}</p>
    </div>    
</body>
Run Code Online (Sandbox Code Playgroud)

试试吧:

http://jsfiddle.net/vvfnN/2/


Luc*_*aio 10

补充了AlexCheuk的回答,我意识到我的app.js文件涉及一个闭包:

(function($) {
    'use strict';

    // all angular.js stuff
)(jQuery);
Run Code Online (Sandbox Code Playgroud)

删除它工作的封闭(不改变亚历克斯说的订单)!我不知道为什么,但那没关系.

  • @lsmagalhaes,删除jQuery的ready调用解决问题的原因是Angular将在DOMContentLoaded事件上引导,这恰好是jQuery调用其ready处理程序的事件.发生的事情是Angular会根据ng-app的值来引导和查找你的模块,但由于jQuery ready handler还没有运行,所以模块还没有被创建.这就是为什么你得到'Uncaught Error:No module:myapp`错误. (6认同)