如何解决 angularjs 未捕获的错误：[$injector:modulerr]？
Posted
技术标签:
【中文标题】如何解决 angularjs 未捕获的错误：[$injector:modulerr]？【英文标题】：How to solve angularjs Uncaught Error: [$injector:modulerr]? 【发布时间】：2016-09-29 20:25:36 【问题描述】：我正在使用 AngularJS 的 ng-view 和 ng-template 指令开发单页 Web 应用程序。但是当我运行它时，我的浏览器会显示这种类型 [1]：http://i.stack.imgur.com/TPuPo.png of error。
这是我的主模块和路由配置的脚本块。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS - Views</title>
<!--AngularJs Library-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
</head>
<body>
<h2 style="text-align: center;">Simple Application using AngularJS - Views</h2><hr><br>
<!--Start AngularJS App-->
<div ng-app="myApp">
<p><a href="#addStudent">Add Student</a></p>
<p><a href="#viewStudent">View Students</a></p>
<div ng-view></div>
<!--Script for Add Student-->
<script type="text/ng-template" id="addStudent.htm">
<h2>This is the view of Add Student</h2>
message
</script>
<!--Script for View Students-->
<script type="text/ng-template" id="viewStudent.htm">
<h2>This is the view of all students</h2>
message
</script>
</div>
<!--End AngularJS App-->
<!--App Necessary Scripts-->
<script>
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(['routeProvider',function ($routeProvider)
$routeProvider.
when('/addStudent',
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
).
when('/viewStudent',
templateUrl: 'viewStudent.htm',
controller: 'ViewStudentController'
).
otherwise(
redirectTo: '/addStudent'
);
]);
myApp.controller('AddStudentController', function ($scope)
$scope.message = "This page will be used to display add student form!!";
);
myApp.controller('ViewStudentController', function($scope)
$scope.message = "This page will be used to display all students!!";
);
</script>
</body>
</html>我能做些什么来解决它？
【问题讨论】：
你有没有在你的索引文件中添加angular-route，看来，你注入了一些没有添加的东西
但是我添加了它..
【参考方案1】：
这是您的工作代码。这里还有一个 CodePen 示例，我重新组织了代码以使其更舒适，请查看、研究并比较它以用于学习目的。 http://codepen.io/alex06/pen/rrzRbE?editors=1010
<html ng-app="mainApp">
<head>
<title>Angular JS Views</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div>
<p><a href = "#addStudent">Add Student</a></p>
<p><a href = "#viewStudents">View Students</a></p>
<div ng-view></div>
</div>
<script type = "text/ng-template" id = "addStudent.htm">
<h2> Add Student </h2>
message
</script>
<script type = "text/ng-template" id = "viewStudents.htm">
<h2> View Students </h2>
message
</script>
<script>
(function()
'use strict'
angular
.module('mainApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider)
$routeProvider
.when('/addStudent',
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
)
.when('/viewStudents',
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
)
.otherwise(
redirectTo: '/addStudent'
);
])
.controller('AddStudentController', function($scope)
$scope.message = "This page will be used to display add student form";
)
.controller('ViewStudentsController', function($scope)
$scope.message = "This page will be used to display all the students";
);
)();
</script>
</body>
</html>
【讨论】：
但是我加了... 请为您的 index.html 截图。 请看链接：这里附上我的index.html文件截图drive.google.com/drive/folders/… Khandaker 参考我之前的答案图片，您似乎没有在索引中引用模块（myApp）和控制器。请注意，您正在声明 (ng-app="myApp") 但该文件没有像控制器一样被引用。请参阅我附上的图片和我提供的说明。 亲爱的 Alex，我从这个链接得知：tutorialspoint.com/angularjs/angularjs_views.htm 请看。我已经根据本教程进行了编码。而且我无法理解您之前的答案图片，这是我的错误。我添加了 angularjs.min.js 然后 angular-route.min.js 最后我用主模块定义了一个脚本块并设置了路由配置。【参考方案2】：只需更改以下行：
myApp.config(['routeProvider',function ($routeProvider)
到
myApp.config(['$routeProvider',function ($routeProvider)
我认为这是你错过的。
【讨论】：
现在，我修好了，谢谢你 Sabbir 兄弟。【参考方案3】：定义配置如下：-- myApp.config(function ($routeProvider) $routeProvider
而不是：-- myApp.config(['routeProvider',function ($routeProvider) $routeProvider.
【讨论】：
以上是关于如何解决 angularjs 未捕获的错误：[$injector:modulerr]？的主要内容，如果未能解决你的问题，请参考以下文章
注入 $cookieStore Angularjs 时未捕获的错误
未捕获的类型错误：无法读取 AngularJS 和 D3 中未定义的属性“弧”
AngularJS 和 RequireJS - 未捕获的错误：没有模块：MyApp
“未捕获的类型错误：在 angularJS/NodeJS 中使用条带支付方法 Stripe.charges.create() 时无法读取未定义的属性‘创建’”