使用$routeProvider的Angular路由

Angular route with $routeProvider

本文关键字：Angular 路由 routeProvider 使用      更新时间：2023-09-26

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

我有一个基本的测试应用程序，我创建了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视图之间的几行变化:

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>

但是不管路由是什么，如果我在url中添加了'/projects'或'/requests'，我就会停留在索引视图上。

你知道我做错了什么吗?

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

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

1。在你的基本文件(通常是index.html)，确保你有一个ng-view指令，将用于加载所有的部分视图

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

中的html文件。
相关文章：