如何解决angularjs的Uncaught Error: [$injector:modulerr]

How to solve angularjs Uncaught Error: [$injector:modulerr]?

本文关键字：Error injector modulerr Uncaught 何解决 解决 angularjs      更新时间：2023-09-26

我正在使用AngularJS的ng-view和ng-template指令开发一个单页web应用程序。但是当我运行它时，我的浏览器显示了这样的类型[1]:https://i.stack.imgur.com/TPuPo.png的错误。

这是我的脚本块与主模块和路由配置。

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

我能做些什么来修复它?

这是您的工作代码。这里还有一个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>

只需更改以下行:

   myApp.config(['routeProvider',function ($routeProvider) {


    myApp.config(['$routeProvider',function ($routeProvider) {

我想这就是你错过的

这样定义config:——myApp。config(function ($routeProvider) {$routeProvider

而不是:——myApp。配置(['routeProvider'，function ($routeProvider) {routeProvider美元。

相关文章：