1.配置使用ui-router
1.1导入js文件
需要注意的是：必须导入angular.min.js这个文件，且angular.min.js必须导入在angular-ui-router.min.js前面。
<script type="text/javascript" src="https://www.jb51.net/JS/angular.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/JS/angular-ui-router.min.js"></script>
1.2注入angular模块
var app = angular.module('myApp', ['ui.router']);
注入的名字“ui.router”，可在angular-ui-router.min.js里找到，如下图：
1.3定义视图
ui-view替代的是ngroute路由的ng-view。
<div ui-view></div>
1.4配置路由状态
app.config(["$stateProvider", function ($stateProvider){ $stateProvider .state("home", { //导航用的名字，如<a ui-sref="login">login</a>里的login url: 'https://www.jb51.net/', //访问路径 template:'<div>模板内容......</div>' }) }]);
2.简单示例
<html> <head> <title>ui-router</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- 导入JS --> <script type="text/javascript" src="https://www.jb51.net/JS/angular.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/JS/angular-ui-router.min.js"></script> </head> <body > <div ng-app="myApp"> <div ui-view></div> <!-- 视图 --> </div> </body> <script type="text/javascript"> //定义模板，并注入ui-router var app = angular.module('myApp', ['ui.router']); //对服务进行参数初始化，这里配stateProvider服务的视图控制 app.config(["$stateProvider", function ($stateProvider) { $stateProvider .state("home", { url: 'https://www.jb51.net/', template:'<div>模板内容......</div>' }) }]); </script> </html>
3.嵌套路由的实现
通过url参数的设置实现路由的嵌套（父路由与子路由通过”.“连接就形成了子路由）。嵌套路由可实现多层次的ui-view。
<body > <div ng-app="myApp" > <a ui-sref="parent">点我显示父view内容</a> <a ui-sref="parent.child">点我显示父view与子view内容</a> <div ui-view></div> <!-- 父View --> </div> </body> <script type="text/javascript"> var app = angular.module('myApp', ['ui.router']); app.config(["$stateProvider", function ($stateProvider) { $stateProvider .state("parent", {//父路由 url: '/parent', template:'<div>parent' +'<div ui-view><div>'// 子View +'</div>' }) .state("parent.child", {//子路由 url: '/child', template:'<div>child</div>' }) }]); </script>
上面的是相对路径方式：
‘parent'将匹配…./index.html#/parent； ‘parent.child'将匹配…./index.html#/parent/child。
若改成绝对路径方式，则需要在子url里加上^:
.state("parent.child", { url: '^/child', template:'<div>child</div>' })
此时，'parent'将匹配…./index.html#/parent； ‘parent.child'将匹配…./index.html#/child。
4. 通过views实现多视图
多个示图时，使用views属性。该属性里包含了哪些ui-view，则对应的template或templateUrl里的内容就会填充该ui-view。
同一个状态下有多个视图示例：
<body > <div ng-app="myApp" > <a ui-sref="index">点我显示index内容</a> <div ui-view="header"></div> <div ui-view="nav"></div> <div ui-view="body"></div> </div> </body> <script type="text/javascript"> var app = angular.module('myApp', ['ui.router']); app.config(["$stateProvider", function ($stateProvider) { $stateProvider .state("index", { url: '/index', views:{ 'header':{template:"<div>头部内容</div>"}, 'nav':{template:"<div>菜单内容</div>"}, 'body':{template:"<div>展示内容</div>"} } }) }]); </script>
5.ui-view的定位
@的作用 是用来绝对定位view，即说明该ui-view属于哪个模板。如：'header@index'表示名为header的view属于index模板。绝对和相对路径的效果一样，请看如下代码：
<body > <div ng-app="myApp" > <a ui-sref="index">show index</a> <a ui-sref="index.content1">content111111</a> <a ui-sref="index.content2">content222222</a> <div ui-view="index"><div> </div> </body> <script type="text/javascript"> var app = angular.module('myApp', ['ui.router']); app.config(["$stateProvider", function ($stateProvider) { $stateProvider .state("index", { url: '/index', views:{ 'index':{template:"<div><div ui-view='header'></div> <div ui-view='nav'></div> <div ui-view='body'></div> </div>"}, //这里必须要绝对定位 'header@index':{template:"<div>头部内容header</div>"}, 'nav@index':{template:"<div>菜单内容nav</div>"}, 'body@index':{template:"<div>展示内容contents</div>"} } }) //绝对定位 .state("index.content1", { url: '/content1', views:{ 'body@index':{template:"<div>content11111111111111111</div>"} //'body@index'表时名为body的view使用index模板 } }) //相对定位：该状态的里的名为body的ui-view为相对路径下的（即没有说明具体是哪个模板下的） .state("index.content2", { url: '/content2', views:{ 'body':{template:"<div>content2222222222222222222</div>"}// } }) }]); </script>
由上面代码可知，相对定位不能找到的ui-view需要用@来绝对定位。
6.URL路由传参（通过$stateParams服务获取参数）
有url: '/index/:id',和url: '/index/{id}',两种形式传参