Error: $injector:modulerr Module Error p0=task

Question

我有一个简单的 angular 代码，由于这个错误不会运行；我添加了服务器找到的 angular-router 文件，但它一直给我这个错误

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.5/$injector/modulerr?p0=task&p1=Error%3A%20…0Uc%20(http%3A%2F%2Flocalhost%3A3000%2Fangular%2Fangular.min.js%3A22%3A332)
    at angular.min.js:7
    at angular.min.js:43
    at p (angular.min.js:8)
    at g (angular.min.js:42)
    at gb (angular.min.js:46)
    at c (angular.min.js:22)
    at Uc (angular.min.js:22)
    at xe (angular.min.js:21)
    at angular.min.js:333
    at HTMLDocument.b (angular.min.js:38)

我的查看代码是

<html >
    <head>
        <title>
        </title>
    </head>
    <body ng-app="task" ng-init="first = 1;">
        <h1>Task List</h1>

        <div ng-controller="ctrl">
            <span>Values: {{first}}</span>
            <input type="text" ng-model="first" />
        </div>



        <script src="angular/angular.min.js"></script>
        <script src="bower_components/angular-route/angular-route.js"></script>
         <script src="angular/app.js"></script>
    </body>

</html>

我的app.js代码

var task = angular.module('myApp', ['ngRoute']);
task.controller('ctrl', function($scope){
    $scope.first = 1;
});

请帮忙。

Answer 1

认为您可能需要稍微重写 app.js 代码：

task.controller('ctrl', ['$scope', function($scope) {
  $scope.first = 1;
}]);

顺便说一下，为什么要先在控制器中初始化，而同时也在模板中进行初始化？有什么原因吗？

Answer 2

你也可以这样做

var task = angular.module('myApp', ['ngRoute']);
task.controller('ctrl', taskCtrl);

function taskCtrl($scope){
 // your logic here
}

同时将您的 ng-app 标签移动到单独的 div 并在其下方放置 JS 脚本标签

Answer 3

错误消息明确指出：

Failed to instantiate module task due to: Error: …0Uc (http://localhost:3000/angular/angular.min.js:22:332)

模块名称需要与 ng-app 指令中使用的名称相匹配：

<body ng-app="task" ng-init="first = 1;">

//var task = angular.module('myApp', ['ngRoute']);
var task = angular.module('task', ['ngRoute']);
task.controller('ctrl', function($scope){
    $scope.first = 1;
});

Error: $injector:modulerr Module Error p0=task

Error: $injector:modulerr Module Error p0=task

angularjs

angularjs-directive

angularjs-scope