Question

所以我在投入差不多2小时后才提出问题，找出问题的根本原因。

我的Index.html

<!doctype html>
<html>
<head>
  <title>Single Page Application</title>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <script src="myApp.js"></script>
</head>
<body ng-app="myApp">
    <ul>
      <li><a href="#/">Home</a></li>
      <li><a href="#/student">Student</a></li>
      <li><a href="#/courses">Courses</a></li>
    </ul>
    <div ng-view=""></div>
  </body>
</html>

我的myApp.js

    var app = angular.module('myApp', ['ngRoute']);

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

    $routeProvider.when('/', {
        templateUrl : 'home.html',
        controller : 'HomeCntrl'        
    });

    $routeProvider.when('/student', {
        templateUrl : 'student.html',
        controller : 'StudentCntrl'        
    });

    $routeProvider.when('/courses', {
        templateUrl : 'courses.html',
        controller : 'CoursesCntrl'        
    });
}]);

    app.controller('HomeCntrl', ['$scope', function($scope){
        alert("HomeCntrl");
        $scope.message = "Welcome to home page";    
    }]);

    app.controller('StudentCntrl', ['$scope', function($scope){
        alert("StudentCntrl");
        $scope.message = "Welcome to Student page";    
    }]);

    app.controller('CoursesCntrl', ['$scope', function($scope){
        alert("CoursesCntrl");
        $scope.message = "Welcome to Courses Page";    
    }]);

还有其他一些带代码的htmls

 <h1>Home</h1>
    {{message}}

 <h1>Student Page</h1>
   {{message}}

 <h1>Courses Page</h1>
   {{message}}

我使用括号来运行此应用。让它成为默认点击或点击任何链接，它总是只给提醒（＆＃34; HomeCntrl＆＃34;）。

注意 - 相同的代码在plunker中运行得非常好。

我做错了什么？

修改1-添加一次点击的屏幕截图 我点击了课程。但我得到的弹出窗口是HomeCntrl＆＃39;

编辑2 - 添加了我的plunker链接

Plunker Link

http://plnkr.co/edit/HehCAD4afiN4xD828YYT?p=preview

编辑3 - 添加控制台的屏幕截图

点击Student链接

Answer 1

您不需要在配置上进行注入，也不需要重复$ routeProvider。把它改成这个。

HTML：

<!doctype html>
<html>
<head>
  <title>Single Page Application</title>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <script src="myApp.js"></script>
</head>
<body ng-app="myApp" ng-controller="Universal as universal">
    <ul>
      <li><span ng-click="universal.goTo('/')">Home</span></li>
      <li><span ng-click="universal.goTo('/student')">Students</span></li>
      <li><span ng-click="universal.goTo('/courses')">Courses</span></li>
    </ul>
    <div ng-view=""></div>
  </body>
</html>

代码：

var app = angular.module('myApp', ['ngRoute']);

    app.config(function($routeProvider){

    $routeProvider.when('/', {
        templateUrl : 'home.html',
        controller : 'HomeCntrl'        
    })
   .when('/student', {
        templateUrl : 'student.html',
        controller : 'StudentCntrl'        
    })
    .when('/courses', {
        templateUrl : 'courses.html',
        controller : 'CoursesCntrl'        
    });
});

app.controller('Universal', ['$scope', '$location', function($scope, $location){
       // alert("HomeCntrl");
       var scope = this;
        scope.goTo = function(where){
          $location.path(where)
        }    
    }]);

    app.controller('HomeCntrl', ['$scope', function($scope){
       // alert("HomeCntrl");
        $scope.message = "Welcome to home page";    
    }]);

    app.controller('StudentCntrl', ['$scope', function($scope){
        alert("StudentCntrl");
        $scope.message = "Welcome to Student page";    
    }]);

    app.controller('CoursesCntrl', ['$scope', function($scope){
        alert("CoursesCntrl");
        $scope.message = "Welcome to Courses Page";    
    }]);

我在这里做的是添加一个可用于处理路由的通用控制器。确保注入$ location以便它可以导航。使用角度路由时，您希望避免使用href并使用angularjs本机路由。此代码适合您。这是我做的Plunkr示例。

Answer 2

您的最新屏幕截图显示了问题所在查看网址：

127.0.0.1:63688/index.html#!/#%2Fstudent

这意味着部分#/student或#/courses被盲目地附加到现有网址127.0.0.1:63688/index.html#!/。由于在index.html之后需要#/，因此您会看到'HomeCntrl'。

要显示'StudentCntrl'，您需要以下网址：

127.0.0.1:63688/index.html#/student

在像Plunker这样的网站上，默认情况下会加载索引文件，而且它不是URL的一部分。因此，如果从URL中删除index.html，该页面仍然有效：

127.0.0.1:63688/#/

加载学生网址会将其更改为

127.0.0.1:63688/#/student

然后加载StudentCntrl。

使用$ routerProvider配置未检测到控制器

2 个答案: