AngularJS路由深度解析：ngRoute与$routeProvider实战指南

2 年 ago

雅, 悟

3 minutes

这是文章《AngularJS路由示例 – ngRoute，$routeProvider》的第1部分（共1部分）。

今天我们将使用 `ngRoute` 模块和 `$routeProvider` 来探讨 AngularJS 路由示例。在此之前，我们已经学习了 AngularJS 模块和 AngularJS 控制器。

AngularJS 中的路由

在 AngularJS 中进行路由是其核心功能之一。在这个 AngularJS 路由示例中，我们将构建一个带有多个视图的小型单页应用程序，以展示 AngularJS 中路由的工作原理。

ngRoute 路由约定

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

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

如果您想从 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 是 AngularJS 框架中的一个指令

`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()` 方法以路径和路由作为参数时，路径是 URL 中 `#` 符号后的一部分。路由包含两个属性：`templateUrl` 和 `controller`。`templateUrl` 属性定义了 AngularJS 应该加载并显示在具有 `ngView` 指令的 `div` 内部的 HTML 模板。`controller` 属性定义了应该与 HTML 模板一起使用的控制器。当应用程序加载时，路径与 URL 中 `#` 符号后的部分进行匹配。如果没有与给定 URL 匹配的路由路径，浏览器将被重定向到 `otherwise()` 函数中指定的路径。

AngularJS 路由示例

现在让我们通过一个简单的示例来理解 AngularJS 的路由。首先，我们将定义一个模块，一些路由，创建控制器并创建多个视图。最后，我们将创建应用程序的外壳页面，以容纳多个视图。

创建一个名为 `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.scdev.com/index.html#/home` 的格式，`#` 后面的 URL 部分匹配 `/home`，则加载 `home.html` 页面；如果匹配 `/viewStudents`，则加载 `viewStudents.html` 页面到主页页面中。如果没有匹配项，则会进入其他条件并将页面重定向到 `home.html`。现在我们可以创建并保存我们的视图文件为 `home.html` 和 `viewStudents.html`。

`home.html`：

<div class="container">
	<h2> 欢迎 </h2>
	<p>{{message}}</p>
	<a href="#/viewStudents"> 查看学生列表</a>
</div>

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

`viewStudents.html`：

<div class="container">
	<h2> 查看学生 </h2>
	搜索:
	<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"> 返回</a>
</div>

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

`ng-app` 自动引导我们的应用程序 `mainApp`。
`ngView` 指令是视图（`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 路由</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`。
尝试我们的在线演示。

AngularJS 路由示例的在线演示

#$routeProvider #AngularJS #JavaScript #ngRoute #前端开发