AngularJS路由示例– ngRoute，$routeProvider
今天，我们将研究使用ngRoute模块和$routeProvider的AngularJS路由示例。
之前，我们研究了AngularJS模块和AngularJS控制器。
AngularJS中的路由
AngularJS中的路由是核心功能之一。
在此AngularJS路由示例中，我们将构建一个具有多个视图的小型单页应用程序，以向您展示AngularJS中的路由工作方式。
ngRoute
AngularJS ngRoute模块为angular应用程序提供路由，深层链接服务和指令。
我们必须从AngularJS官方下载包含ngRoute模块的angular-route.js脚本，才能使用路由功能。
您也可以在应用程序中使用CDN来包含此文件。
在本教程中，我们将使用Google CDN。
https：//ajax.googleapis.com/ajax/libs/angularjs/1.2.28 //angular-route.min.js
如果将此文件捆绑到应用程序中，则可以使用以下代码将其添加到页面中。
<script src="angular-route.js">
如果要从Google CDN包含它，请使用以下代码。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
然后将ngRoute模块添加为AngularJS应用程序中的依赖模块，如下所示。
angular.module('appName', ['ngRoute']);
ngView
ngView指令用于显示指定路由中HTML模板或者视图。
每次当前路由更改时，包含的视图都会根据$route服务的配置随之更改。
$routeProvider
$routeProvider用于配置路由。
我们使用ngRoute config()配置$routeProvider。config()采用一个以$routeProvider为参数的函数，并且路由配置位于函数内部。
$routeProvider有一个简单的API，可以接受when()或者otherwise()方法。
AngularJS路由语法
以下语法用于在AngularJS中配置路由。
var app = angular.module("appName", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/view1', {
templateUrl: 'view1.html',
controller: 'FirstController'
})
.when('/view2', {
templateUrl: 'view2.html',
controller: 'SecondController'
})
.otherwise({
redirectTo: '/view1'
});
});
" when()"方法将路径和路线作为参数。
path是#符号后的URL的一部分。
route包含两个属性-" templateUrl"和" controller"。
templateUrl属性定义了AngularJS应该使用ngView指令加载并显示在div中HTML模板。
controller属性定义与HTML模板一起使用的控制器。
加载应用程序后，路径将与#符号后面的URL部分匹配。
如果没有路由路径与给定的URL相匹配，浏览器将被重定向到else()函数中指定的路径。
AngularJS路由示例
现在，让我们看一个简单的示例，以了解AngularJS漫游。
首先，我们将定义一个模块，一些路由，创建控制器并创建多个视图。
最后，我们将创建应用程序的shell页面以容纳多个视图。
创建一个名为" mainApp"的模块，并加载" ngRoute"作为从属模块。
使用
$routeProvider配置路由。在示例中，我们使用两个路径，即/home和/viewStudents。
在这个例子中，我们只使用一个控制器，
StudentController。" StudentController"由一系列学生和一条消息初始化。
我们将在首页中显示该消息，并在viewStudents页面中显示学生列表。将此文件另存为
main.js
main.js
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'StudentController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.html',
controller: 'StudentController'
})
.otherwise({
redirectTo: '/home'
});
});
mainApp.controller('StudentController', function($scope) {
$scope.students = [
{name: 'Mark Waugh', city:'New York'},
{name: 'Steve Jonathan', city:'London'},
{name: 'John Marcus', city:'Paris'}
];
$scope.message = "Click on the hyper link to view the students list.";
});
例如，如果URL像https：//www.theitroad.local/index.html#/home，则#后面的URL部分匹配/home，它将加载home.html页面，如果匹配/viewStudents，然后将viewStudents.html加载到shell页面。
如果没有匹配项，则它将进入其他条件，并将页面重定向到home.html。
现在我们可以创建视图并将其另存为" home.html"和" viewStudents.html"文件。
home.html
<div class="container">
<h2> Welcome </h2>
<p>{{message}}</p>
<a href="#/viewStudents"> View Students List</a>
</div>
这是我们应用程序的默认页面。
在此视图中，我们仅打印出已在StudentController中初始化的消息。
您还可以看到指向" viewStudents"页面的链接。
viewStudents.html
<div class="container">
<h2> View Students </h2>
Search:
<br
<input type="text" ng-model="name"
<br
<ul>
<li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li>
</ul>
<a href="#/home"> Back</a>
</div>
在上面的视图中，您可以看到带有搜索选项的学生列表。
最后，按照以下步骤完成AngularJS路由示例应用程序。
ng-app自动引导我们的应用程序mainAppngView指令是视图的占位符-home.html和viewStudents.html
包括" angular.min.js"和" angular-route.min.js"
包括我们在前面的步骤中创建的
main.js。将文件另存为
index.html
index.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>AngularJS Routing</title> </head> <body> <div ng-app="mainApp"> <ng-view></ng-view> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script> <script type="text/javascript" src="main.js"></script> </body> </html>
这就是我们的AngularJS路由示例。
我们的应用程序可以运行了。
运行你的应用程序
将所有文件保存在同一目录中。
从浏览器打开
index.html
