错误：$ injector：modulerr模块错误p0 =任务

i have a simple angular code with wont run due to this error; ive add the angular-router file the server found it but it keeps giving me this error

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

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)

my view code is

我的观点代码是

<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>

my app.js code

我的app.js代码

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

please help.

请帮忙。

3 个解决方案

#1

The error message clearly states:

错误消息明确指出：

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

由于以下原因无法实例化模块任务：错误：... 0Uc（http：// localhost：3000 / angular / angular.min.js:22:323）

The module name needs to match the name used in the ng-app directive:

模块名称需要与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;
});

#2

Think you might need to rewrite that app.js code slightly:

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

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

Why initialise first here in the controller when you're also doing it in the template, btw? Was there a reason?

为什么在模板中执行此操作时首先在控制器中初始化，顺便说一下？有原因吗？

#3

Also you can do like this

你也可以这样做

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

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

Also move your ng-app tag to separate div and below it put JS script tags

同时将你的ng-app标签移动到单独的div，并在它下面放置JS脚本标签

#1