angular-ui-router

最新推荐文章于 2024-04-29 17:16:43 发布

weixin_30764771

最新推荐文章于 2024-04-29 17:16:43 发布

阅读量44

点赞数

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/Jerry-MrNi/p/7883983.html

版权

引入<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>

View Code

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>

View Code

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>

View Code

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>

View Code

转载于:https://www.cnblogs.com/Jerry-MrNi/p/7883983.html

weixin_30764771

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular-ui-router

引入<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 ...
复制链接

扫一扫