Angular 路线与 $routeProvider

Question

我试图在开始构建我的应用程序之前了解路由，但它似乎不起作用。

我有一个用于测试的基本应用程序，我在其中创建了 3 个 html 匹配 3 个不同视图的文件，我希望根据路线更改显示的视图。

但我总是看到索引视图。

文件如下：

app.js :

'use strict';

angular.module('BalrogApp', ['ngRoute', 'ui.bootstrap', 'BalrogApp.controllers'])
.config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: '../index.html'
      })
      .when('/requests', {
        templateUrl: '../views/requestsList.html'
      })
      .when('/projects', {
        templateUrl: '../views/projectsList.html'
      })
      .otherwise({
        redirectTo: '/lol'
      });

  }]);

requestsController.js :

'use strict';

var requestsControllerModule = angular.module('BalrogApp.controllers', ['ngRoute', 'ui.bootstrap']);

requestsControllerModule.controller('requestsController', function($rootScope, $scope, $location, $routeParams) {

  this.studentName = "Request";
  this.studentMark = 75;

});

projectsController.js :

'use strict';

var projectsControllerModule = angular.module('BalrogApp.controllers', ['ngRoute', 'ui.bootstrap']);

projectsControllerModule.controller('projectsController', function($rootScope, $scope, $location, $routeParams) {

  this.studentName = "Project";
  this.studentMark = 75;

});

html 文件几乎相同，除了一些单词和与每个文件关联的控制器。

以下是 html wiews 之间变化的几行：

index.html :

index view
<div class="row-fluid" ng-controller="requestsController as rc">
  <div class="span2">{{rc.studentName}} </div>
</div>

requestsList.html :

Request view
<div class="row-fluid" ng-controller="requestsController as r">
  <div class="span2">{{r.studentName}} </div>
</div>

projectsList.html

Project view
<div class="row-fluid" ng-controller="projectsController as p">
  <div class="span2">{{p.studentName}} </div>
</div>

拜托，无论路线是什么，如果我将“/projects”或“/requests”添加到 url，我将停留在索引视图中。

知道我做错了什么吗？

Answer 1

确保您在 index.html 中设置了 ng-view 属性或元素。如果不存在，路由器将无法工作。
另一个好的做法是在路由器上设置视图控制器，如下所示：

$routeProvider
  .when('<route_name>', {
    templateUrl: '../<tempate>.html',
    controller: '<controller_name>',
    controllerAs: 'myController'
  })

Answer 2

1. 在你的基础文件上（通常是 index.html），确保你有一个 ng-view 指令用于加载所有部分观看次数

2. 您的所有 html 模板都与基本文件位于同一位置吗？如果是，您可以尝试将其设置为 "/index.html"，而不是将 templateUrl 设置为 "../index.html"。第一个检查基础文件所在目录之外的 html 文件，而第二个检查在同一目录中

Angular 路线与 $routeProvider

Angular route with $routeProvider

javascript

angularjs

angular-ui

angular-routing

route-provider