如何解决 angularjs 未捕获的错误：[$injector:modulerr]？答案

【问题标题】：How to solve angularjs Uncaught Error: [$injector:modulerr]?如何解决 angularjs 未捕获的错误：[$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，看来，你注入了一些没有添加的东西
但是我添加了它..

标签： javascript angularjs view

【解决方案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.

【讨论】：