angular-ui-router

時間 2019-11-09

原文原文鏈接

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

1. 2.6
更多相關文章...

相關標籤/搜索

AngularJS

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。