今天，我们将研究使用ngroute模块和$routeProvider的AngularJS路由示例。前面我们研究了AngularJS Modules和AngularJS Controllers。

AngularJS中路由

Routing是AngularJS中的核心功能之一。在这个AngularJS路由示例中，我们将构建一个具有多个视图的小型单页应用程序，向您展示AngularJS中路由是如何工作的。

ngroute

AngularJS ngroute模块为角度应用提供路由、深度链接服务和指令。我们需要从AngularJS官网下载包含ngroute.js脚本的angular-route.js脚本才能使用路由功能。您还可以在应用程序中使用CDN来包含此文件。在本教程中，我们将使用Google CDN。https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js`如果要将此文件捆绑到应用程序中，则可以使用以下代码将其添加到页面中。

1<script src="angular-route.js">

如果您想从Google CDN中包含它，那么使用下面的代码。

1<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>

然后，通过将其作为依赖模块添加到您的AngularJS应用程序中来加载ngroute模块，如下所示。

1angular.module('appName', ['ngRoute']);

NGView

NgView指令用于显示指定路径中的HTML模板或视图。每次当前路由更改时，包含的视图都会根据$ROUTE服务的配置进行更改。

$routeProvider

$routeProvider用于配置路由。我们使用ngroute配置()来配置$routeProvider。config()接受一个函数，该函数以$routeProvider为参数，路由配置位于该函数内部。$routeProvider有一个简单的API，可以接受When()方法，也可以接受Else()方法。

AngularJS路由语法

以下语法用于配置AngularJS中的路由。

 1var app = angular.module("appName", ['ngRoute']);
 2
 3app.config(function($routeProvider) {
 4    $routeProvider
 5    	.when('/view1', {
 6    		templateUrl: 'view1.html',
 7    		controller: 'FirstController'
 8    	})
 9    	.when('/view2', {
10    		templateUrl: 'view2.html',
11    		controller: 'SecondController'
12    	})
13    	.otherwise({
14    		redirectTo: '/view1'
15    	});
16});

When()方法以路径和** 路由** 为参数。** 路径** 是# 符号后URL的一部分。** 路由** 包含两个属性--templateUrl和Controler。** templateUrl** 属性通过ngView指令定义了AngularJS应该在div中加载和显示哪个Html模板。** CONTROLLER** 属性定义了哪些控制器应该与HTML模板一起使用。加载应用程序时，会将** 路径** 与符号之后的URL部分进行匹配。如果没有与给定URL匹配的路由路径，则浏览器将被重定向到否则()函数中指定的路径。

AngularJS路由示例

现在，让我们通过一个简单的例子来理解AngularJS舍入。首先，我们将定义一个模块、一些路线、创建控制器和创建多个视图。最后，我们将创建应用程序的外壳页面来保存多个视图。

1.创建名为mainApp的模块，并将ngRoute作为依赖模块加载。 2.使用$routeProvider配置路由。 3.示例中使用了两条路径：** /home和/viewStudents** 。 4.在本例中，我们只使用了一个控制器StudentController 5.StudentController由一个学生数组 和一个** 消息** 初始化。我们将在主页中显示消息，并在视图学生页面中显示学生列表。 6.将该文件保存为main.js

_Main.js*

 1var mainApp = angular.module("mainApp", ['ngRoute']);
 2
 3mainApp.config(function($routeProvider) {
 4    $routeProvider
 5    	.when('/home', {
 6    		templateUrl: 'home.html',
 7    		controller: 'StudentController'
 8    	})
 9    	.when('/viewStudents', {
10    		templateUrl: 'viewStudents.html',
11    		controller: 'StudentController'
12    	})
13    	.otherwise({
14    		redirectTo: '/home'
15    	});
16});
17
18mainApp.controller('StudentController', function($scope) {
19    $scope.students = [
20    	{name: 'Mark Waugh', city:'New York'},
21    	{name: 'Steve Jonathan', city:'London'},
22    	{name: 'John Marcus', city:'Paris'}
23    ];
24
25    $scope.message = "Click on the hyper link to view the students list.";
26});

例如，如果url类似于https://www.journaldev.com/index.html# /home， matches/home后的url部分，则会加载home.html页面，如果匹配到/viewStudents，则会将viewStudents.html加载到外壳页面中。如果没有匹配，则它将进入否则状态，页面将被重定向至home.html。现在我们可以创建我们的视图，并保存为home.html和viewStudents.html文件。home.html`

1<div class="container">
2    <h2> Welcome </h2>
3    <p>{{message}}</p>
4    <a href="#/viewStudents"> View Students List</a>
5</div>

这是我们的应用程序的默认页面。在这个视图中，我们只打印出消息，我们已经在StudentController 中初始化了它。您还可以看到指向viewStudents页面的链接。viewStudents.html

 1<div class="container">
 2    <h2> View Students </h2>
 3    Search:
 4    <br/>
 5    	<input type="text" ng-model="name" />
 6    <br/>
 7    <ul>
 8    	<li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li>
 9    </ul>
10
11    <a href="#/home"> Back</a>
12</div>

在上面的视图中，您可以看到带有搜索选项的学生列表。最后，按照以下步骤完成我们的AngularJS路由示例应用程序。

ng-app自动引导我们的应用程序 mainApp**
ngView指令是视图的占位符--home.html和viewStudents.html
包含angular.min.js和angular-route.min.js
包含前面步骤中创建的main.js。
将文件保存为index.html

index.html

 1<!DOCTYPE html>
 2<html>
 3    <head lang="en">
 4      <meta charset="utf-8">
 5      <title>AngularJS Routing</title>
 6
 7    </head>
 8    <body>
 9
10      <div ng-app="mainApp">
11    	<ng-view></ng-view>
12      </div>
13
14      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
15      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
16      <script type="text/javascript" src="main.js"></script>
17    </body>
18</html>

这就是我们的AngularJS Routing示例。我们的应用程序已准备好运行。

运行您的应用程序

将所有文件保存在同一目录中。
从浏览器打开index.html
尝试我们的在线演示。

AngularJS 路由示例 - ngRoute、$routeProvider