一、概述
- AngularJS 路由允许通过不同的 URL 访问不同的内容
- 用于实现多视图的单页 Web 应用（SPA，Single Page Application）
- 在 SPA 中，页面不会整体刷新，只切换部分内容（由
ng-view控制）
URL 形式
| 版本 | URL 形式 |
|---|---|
| Angular 1.6 之前 | http://xxxx.com/#/first |
| Angular 1.6+ | http://xxxx.com/#!/first |
#!号之后的内容不会被浏览器发送给服务端，由 AngularJS 在客户端解析并切换视图。
二、使用步骤
1. 引入路由模块 JS 文件
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>Code language: HTML, XML (xml)2. 将 ngRoute 作为依赖模块注入
angular.module('routingDemoApp', ['ngRoute'])Code language: JavaScript (javascript)3. 在 HTML 中使用 ng-view 指令
<div ng-view></div>Code language: HTML, XML (xml)
ng-view是一个占位容器，路由切换时该区域的内容会自动更新。
4. 配置 $routeProvider
.config(['$routeProvider', function($routeProvider) {
// 路由规则写在这里
}])Code language: PHP (php)三、基本实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由实例</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
</head>
<body ng-app="routingDemoApp">
<h2>AngularJS 路由应用</h2>
<ul>
<li><a href="#!/">首页</a></li>
<li><a href="#!/computers">电脑</a></li>
<li><a href="#!/printers">打印机</a></li>
<li><a href="#!/blabla">其他</a></li>
</ul>
<div ng-view></div>
<script>
angular.module('routingDemoApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', { template: '这是首页页面' })
.when('/computers', { template: '这是电脑分类页面' })
.when('/printers', { template: '这是打印机页面' })
.otherwise({ redirectTo: '/' });
}]);
</script>
</body>
</html>Code language: HTML, XML (xml)说明
| 方法 | 作用 |
|---|---|
when(path, object) | 定义一条路由规则 |
otherwise(object) | 匹配不到任何路由时的默认跳转 |
四、路由配置对象参数说明
$routeProvider.when(url, object) 的第二个参数是一个路由配置对象，常用属性如下：
| 参数 | 类型 | 说明 |
|---|---|---|
template | string | 直接在 ng-view 中插入 HTML 字符串 |
templateUrl | string | 从服务端加载 HTML 模板文件插入 ng-view |
controller | string / function | 为当前视图绑定一个控制器 |
controllerAs | string | 为控制器指定别名 |
redirectTo | string / function | 重定向到另一个路径 |
resolve | object | 指定控制器依赖的其他模块（延迟加载） |
template vs templateUrl
// 直接写 HTML
.when('/computers', { template: '这是电脑分类页面' })
// 加载外部模板文件
.when('/computers', { templateUrl: 'views/computers.html' })Code language: JavaScript (javascript)五、完整实例（templateUrl + controller）
主页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由 - 模板+控制器</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
<script>
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope) {
$scope.message = '欢迎来到首页';
})
.controller('AboutController', function ($scope) {
$scope.message = '这是关于页面';
})
.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'AboutController'
})
.otherwise({ redirectTo: '/home' });
});
</script>
</head>
<body ng-app="ngRouteExample">
<div>
<a href="#!/home">Home</a>
<a href="#!/about">About</a>
</div>
<div ng-view></div>
</body>
</html>Code language: HTML, XML (xml)home.html
<h1>首页</h1>
<p>{{ message }}</p>Code language: HTML, XML (xml)about.html
<h1>关于</h1>
<p>{{ message }}</p>Code language: HTML, XML (xml)访问
/#!/home时，使用HomeController+home.html；访问/#!/about时，使用AboutController+about.html。
Previous: AngularJS 包含 HTML 文件