當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
深究AngularJS——ui-router详解
生活随笔
收集整理的這篇文章主要介紹了
深究AngularJS——ui-router详解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.配置使用ui-router
1.1導入js文件
需要注意的是：必須導入angular.min.js這個文件，且angular.min.js必須導入在angular-ui-router.min.js前面。
<script type="text/javascript" src="JS/angular.min.js"></script> <script type="text/javascript" src="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>里的loginurl: '/', //訪問路徑 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="JS/angular.min.js"></script><script type="text/javascript" src="JS/angular-ui-router.min.js"></script> </head><body > <div ng-app="myApp"> <div ui-view></div> <!-- 視圖 --> </div> </body><script type="text/javascript">//定義模板，并注入ui-routervar app = angular.module('myApp', ['ui.router']); //對服務進行參數初始化，這里配stateProvider服務的視圖控制app.config(["$stateProvider", function ($stateProvider) { $stateProvider .state("home", {url: '/', 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里加上^:
此時，'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}',兩種形式傳參
<body > <div ng-app="myApp" ><a ui-sref="index({id:30})">show index</a> <a ui-sref="test({username:'peter'})">show test</a><div ui-view></div></div> </body><script type="text/javascript">var app = angular.module('myApp', ['ui.router']); app.config(["$stateProvider", function ($stateProvider) { $stateProvider .state("home", {url: '/', template:"<div>homePage</div>"}).state("index", {url: '/index/:id', template:"<div>indexcontent</div>",controller:function($stateParams){alert($stateParams.id)}}) .state("test", {url: '/test/:username', template:"<div>testContent</div>",controller:function($stateParams){alert($stateParams.username)}}) }]);</script>7.Resolve（預載入）
使用預載入功能，開發者可以預先載入一系列依賴或者數據，然后注入到控制器中。在ngRoute中resolve選項可以允許開發者在路由到達前載入數據保證（promises）。在使用這個選項時比使用angular-route有更大的自由度。
預載入選項需要一個對象，這個對象的key即要注入到控制器的依賴，這個對象的value為需要被載入的factory服務。
如果傳入的時字符串，angular-route會試圖匹配已經注冊的服務。如果傳入的是函數，該函數將會被注入，并且該函數返回的值便是控制器的依賴之一。如果該函數返回一個數據保證（promise），這個數據保證將在控制器被實例化前被預先載入并且數據會被注入到控制器中。
<body > <div ng-app="myApp" ><a ui-sref="index">show index</a> <div ui-view></div></div> </body><script type="text/javascript">var app = angular.module('myApp', ['ui.router']); app.config(["$stateProvider", function ($stateProvider) { $stateProvider .state("home", {url: '/', template:"<div>homePage</div>"}).state("index", {url: '/index/{id}', template:"<div>indexcontent</div>",resolve: {//這個函數的值會被直接返回，因為它不是數據保證user: function() {return {name: "peter",email: "audiogroup@qq.com"}},//這個函數為數據保證, 因此它將在控制器被實例化之前載入。detail: function($http) {return $http({method: 'JSONP',url: '/current_details'});},//前一個數據保證也可作為依賴注入到其他數據保證中！（這個非常實用）myId: function($http, detail) {$http({method: 'GET',url: 'http://facebook.com/api/current_user',params: {email: currentDetails.data.emails[0]}})}},controller:function(user,detail,myId$scope){alert(user.name)alert(user.email)console.log(detail)}}) }]);</script>總結
以上是生活随笔為你收集整理的深究AngularJS——ui-router详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 认识Filter
- 下一篇： Spring3.2新注解@Control