Question

我无法解决这个问题，帮帮我吧！我尝试了很多东西，但没有得到正确的解决方案。我尝试调试，但我真的不知道如何调试angularjs应用程序。是加载问题还是我不知道的？

＆＃13;

var mainApp = angular.module("mainApp", ['ngRoute']);

mainApp.config("$routeProvider", function($routeProvider){
    $routeProvider.
                when("/services",{
                   templateUrl: "services.html", 
                   controller: "servicesController" 
                }).
                when("/aboutMe",{
                   templateUrl: "aboutMe.html", 
                   controller: "aboutMeController" 
                }).
                when("/products",{
                   templateUrl: "products.html", 
                   controller: "productsController" 
                }).
                otherwise({
                    redirectTo: "/products"
                });
});

mainApp.controller("productsController", ["$scope", function($scope){
    $scope.msg = "Product scope...";
}]);

mainApp.controller("aboutMeController", ["$scope", function($scope){
    $scope.msg = "About Me scope...";
}]);

mainApp.controller("servicesController", ["$scope", function($scope){
    $scope.msg = "Services scope...";
}]);

＆＃13;

<html>
   <head>
      <title>Angular JS Example</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
      
   </head>
   
   <body>
     <div ng-app='mainApp'>
      <h2>Select the page:</h2>
      <ul>
          <li><a href='#products.html'>Products</a></li>
          <li><a href='#services.html'>Services</a></li>
          <li><a href='#aboutMe.html'>About Me</a></li>
      </ul>
      <div ng-view></div>
         
      <script type = "text/ng-template" id = 'products.html'>
        <h1>Welocme to : {{msg}}</h1>   
      </script>

      <script type = "text/ng-template" id = 'services.html'>
        <h1>Welocme to : {{msg}}</h1>   
      </script>

      <script type = "text/ng-template" id = 'aboutMe.html'>
        <h1>Welocme to : {{msg}}</h1>   
      </script>
     </div>
     <script src = "js/mainApp.js"></script>
      <script src = "js/studentController.js"></script>
   </body>
   
</html>

＆＃13;

Answer 1

你忘记了括号：

mainApp.config(["$routeProvider", function($routeProvider){
$routeProvider.
            when("/services",{
               templateUrl: "services.html", 
               controller: "servicesController" 
            }).
            when("/aboutMe",{
               templateUrl: "aboutMe.html", 
               controller: "aboutMeController" 
            }).
            when("/products",{
               templateUrl: "products.html", 
               controller: "productsController" 
            }).
            otherwise({
                redirectTo: "/products"
            });
}]);

我也发现链接有问题。这是正确的方法：

 <ul>
      <li><a href='#/products'>Products</a></li>
      <li><a href='#/services'>Services</a></li>
      <li><a href='#/aboutMe'>About Me</a></li>
  </ul>

https://plnkr.co/edit/tlVxSy1U4pTzvobQJby6?p=preview

Answer 2

我认为您忘记在html正文中添加控制器的脚本：

<script src = "js/servicesController.js"></script>
<script src = "js/aboutMeController.js"></script>
<script src = "js/productsController.js"></script>

得到此错误：angular.js：38未捕获错误：[$ injector：modulerr]

2 个答案: