AngularJS路由示例 – ngRoute，$routeProvider

2 年 ago

雅, 悟

3 minutes

今天我们将使用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">

如果你想要从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()`函数中指定的路径。