Question

我正在使用AngularJS的ng-view和ng-template指令开发单页Web应用程序。但是当我运行它时，我的浏览器会显示此类型[1]：http://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>

我该怎么做才能解决它？

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

Answer 2

只需更改以下行：

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

要

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

我认为这是你错过的。

Answer 3

将配置定义为： - myApp.config（function（$ routeProvider）{$ routeProvider

而不是： - myApp.config（['routeProvider'，function（$ routeProvider）{ $ routeProvider。

如何解决angularjs Uncaught Error：[$ injector：modulerr]？

3 个答案: