引入<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
1.简单示例
1 <html> 2 <head> 3 <title>ui-router</title> 4 <meta http-equiv="pragma" content="no-cache"> 5 <meta http-equiv="cache-control" content="no-cache"> 6 <meta http-equiv="expires" content="0"> 7 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 8 <meta http-equiv="description" content="This is my page"> 9 <!-- 导入JS --> 10 <script type="text/javascript" src="JS/angular.min.js"></script> 11 <script type="text/javascript" src="JS/angular-ui-router.min.js"></script> 12 </head> 13 14 <body > 15 <div ng-app="myApp"> 16 <div ui-view></div> <!-- 视图 --> 17 </div> 18 </body> 19 20 21 <script type="text/javascript"> 22 //定义模板，并注入ui-router 23 var app = angular.module('myApp', ['ui.router']); 24 //对服务进行参数初始化，这里配stateProvider服务的视图控制 25 app.config(["$stateProvider", function ($stateProvider) { 26 $stateProvider 27 .state("home", { 28 url: '/', 29 template:'<div>模板内容......</div>' 30 }) 31 }]); 32 </script> 33 34 </html>
2.嵌套路由的实现
1 <body > 2 <div ng-app="myApp" > 3 <a ui-sref="parent">点我显示父view内容</a> 4 <a ui-sref="parent.child">点我显示父view与子view内容</a> 5 <div ui-view></div> <!-- 父View --> 6 </div> 7 </body> 8 9 10 <script type="text/javascript"> 11 var app = angular.module('myApp', ['ui.router']); 12 app.config(["$stateProvider", function ($stateProvider) { 13 $stateProvider 14 .state("parent", {//父路由 15 url: '/parent', 16 template:'<div>parent' 17 +'<div ui-view><div>'// 子View 18 +'</div>' 19 }) 20 .state("parent.child", {//子路由 21 url: '/child', 22 template:'<div>child</div>' 23 }) 24 }]); 25 26 </script>
3.通过views实现多视图
1 <body > 2 <div ng-app="myApp" > 3 <a ui-sref="index">点我显示index内容</a> 4 <div ui-view="header"></div> 5 <div ui-view="nav"></div> 6 <div ui-view="body"></div> 7 </div> 8 </body> 9 10 <script type="text/javascript"> 11 var app = angular.module('myApp', ['ui.router']); 12 app.config(["$stateProvider", function ($stateProvider) { 13 $stateProvider 14 .state("index", { 15 url: '/index', 16 views:{ 17 'header':{template:"<div>头部内容</div>"}, 18 'nav':{template:"<div>菜单内容</div>"}, 19 'body':{template:"<div>展示内容</div>"} 20 } 21 }) 22 23 }]); 24 25 </script>
4.ui-view的定位
1 <body > 2 <div ng-app="myApp" > 3 <a ui-sref="index">show index</a> 4 <a ui-sref="index.content1">content111111</a> 5 <a ui-sref="index.content2">content222222</a> 6 <div ui-view="index"><div> 7 </div> 8 </body> 9 10 <script type="text/javascript"> 11 var app = angular.module('myApp', ['ui.router']); 12 app.config(["$stateProvider", function ($stateProvider) { 13 $stateProvider 14 .state("index", { 15 url: '/index', 16 views:{ 17 'index':{template:"<div><div ui-view='header'></div> <div ui-view='nav'></div> <div ui-view='body'></div> </div>"}, 18 //这里必须要绝对定位 19 'header@index':{template:"<div>头部内容header</div>"}, 20 'nav@index':{template:"<div>菜单内容nav</div>"}, 21 'body@index':{template:"<div>展示内容contents</div>"} 22 } 23 }) 24 //绝对定位 25 .state("index.content1", { 26 url: '/content1', 27 views:{ 28 'body@index':{template:"<div>content11111111111111111</div>"} 29 //'body@index'表时名为body的view使用index模板 30 } 31 }) 32 //相对定位：该状态的里的名为body的ui-view为相对路径下的（即没有说明具体是哪个模板下的） 33 .state("index.content2", { 34 url: '/content2', 35 views:{ 36 'body':{template:"<div>content2222222222222222222</div>"}// 37 } 38 }) 39 40 }]); 41 42 </script>