AngularJS路由是一种映射，一种对应关系。
是url与controller、template之间的对应关系。
还可以是url与路由名称、controller（控制器）和template（模板）之间的对应关系。
浏览器传统的导航模式（模型）
1.在地址栏输入url，浏览器就会导航到相应的页面。
2.在页面中单击链接，浏览器地址会发生改变，页面导航到另一个新页面。
3.单击浏览器的前进和后退按钮，浏览器就会向前或向后导航到相应的页面。
将页面换为组件，就可看做是AngularJS的导航模型了。
可使用AngularJS官方提供的ngRoute模块的$routeProvider服务配置路由，语法如下（举例说明）：
//创建模块，加载ngRoute模块
let app = angular.module("book-app",['ngRoute'])
.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider{
//配置路由，就是配置URL与模板、控制器之间的映射关系。
$routeProvider.when('/',{
controller:'ListController',
templateUrl:'list.html'
}).when('/add',{
controller:'AddController',
templateUrl:'add.html'
}).when('/view/:id',{
controller:'DetailController',
templateUrl:'detail.html'
}).when('/edit/:id',{
controller:'EditController',
templateUrl:'edit.html'
}).otherwise({redirectTo:'/'});
$locationProvider.html5Mode(true);//开启html5模式
})]);为路由配置中的控制器提供函数。可通过调用angular.Module的controller方法实现。语法如下（举例说明）：
app.controller("MainController",['$route','$location','ruoteParams',
function($route,$location,$routeParams){
this.$route=$route;
this.$location=$location;
this.$routeParams=$routeParams;
}
]).controller("ListController",['$scope',
function($scope){
$scope.bookList = books;
}
]).controller("AddController",['$scope',
function($scope){
$scope.add=function(){
books.push($scope.book);
$scope.book.id=books.length;
//返回系统首页
$location.path("/");
}
}
]).controller("DetailController",['$scope','$routeParams',
function($scope,$routeParams){
$scope.book=books[$routeParams.id-1];
}
]).controller("EditController",['$scope','$routeParams','$location',
function($scope,$routeParams,$location){
$scope.book=books[$routeParams.id-1];
$scope.rawBook = angular.copy($scope.book);
$scope.save=function(){
//如果有服务器端支持，此处应将修改提交到服务器
//返回系统首页
$location.path("/");
}
$scope.cancel=function(){
books[$routeParams.id-1] = $scope.rawBook ;
$location.path("/");
}
}
])这些控制器负责为视图模板提供数据。
关于路由配置中的模板（不举例了），关键点：
1.控制器和视图模板所呈现的界面将会显示在指定了ng-view指令的HTML元素中。
2.在模板中使用的超链接（<a>），要指定href或ng-href属性。
也可使用第三方开源框架ui-router，需要下载安装并导入。
ui-router的提供两个路由配置服务：
1.$urlRouterProvider服务：URL重定向路由引擎，用法和$routeProvider比较相似，都是when和oherwise，实际上ui-router并不使用此服务配置路由。
2.$stateProvide服务:基础语法：state(name,stateConfig)，举例说明：
let app = angular.module("book-app",['ui.router']).config(['$stateProvider','$urlRouterProvider',
function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/index');
$stateProvider.state('index',{
url:'/index',
controller:'ListController',
templateUrl:'list.html'
}
).state('add',{
url:'/add',
controller:'AddController',
templateUrl:'add.html'
}
).state('viewDetail',{
url:'/view/:id',
controller:'DetailController',
templateUrl:'detail.html'
}
).state('edit',{
url:'/edit/:id',
controller:'EditController',
templateUrl:'edit.html'
}
)
}
])控制器的函数中可以通过$state服务的go（"路由名称"）方法激活相应路由。
控制器和模板呈现的界面显示在指定了ui-view属性的元素中。
一条路由，多个视图，根据ui-view="",显示相应的视图，举例说明：
<body ng-app="router-app">
<h1>多视图</h1>
<span ui-sref="home({userId:20})">主页</span>
<span ui-sref="books">图书</span>
<span ui-sref="authors">作者</span>
<div ui-view=""></div>
<div>
<div ui-view="summary"></div>
<div ui-view="content"></div>
</div>
</body> 上述代码中每一个"ui-sref"都对应一条路由，每条路由都有三个视图，名称分别为："" 、"summary"、"content"
路由配置如下：
let app=angular.module("router-app",["ui.router"]).config(['$stateProvider','$urlRouterProvider',
function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/home/");
$stateProvider.state("home",{
url:"/home/:userId",
views:{
"":{
template:"<h3>多视图</h3>"
},
"summary":{
template:"首页部分的概要信息"
},
"content":{
templateProvider:['$stateParams',function($stateParams){
return '函数动态生成的模板，现在的时间是：<p><b>' +
new Date() + '</b></p>'+'userId参数是：'+
$stateParams.userId
}
]
}
}
}).state("books",{
url:"/books",
views:{
"":{
template:"<h3>多视图</h3>"
},
"summary":{
templateUrl:'summary.html',
controller:"summaryCtrl"
},
"content":{
templateUrl:'books.html',
controller:function($scope){
//数据处理
}
}
}
}).state("athors",{
views:{
"":{
},
"summary":{
},
"content":{
}
}
})
}
])