AngularJS ui-router
原文地址：http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angularjs-ui-router/html
ui-router是angularjs的一個客戶端的單頁應用路由解決方案，它提供了一種相似一個層次樹的狀態來方便的實現各個頁面間的跳轉。angularjs
Q:路由是怎麼顯示各個模板？ajax
當ui-routr狀態被激活時，它的模板會自動插入到父狀態對應的模板中包含ui-view屬性的元素內部。若是是頂層狀態，那麼它的父模板就是index.html。api
Q：激活路由狀態有三種方法：app
1.調用$state.go()方法；ide
2.點擊包含ui-sref指令的連接；ui
3.導航到與狀態相關聯的 url。this
使用ui-router的準備工做：google
（1）下載angular-ui-router.jsurl
（2）在index.html中下載angular-ui-router.js
（3）把ui.router依賴注入
例：<!doctype html>
<htmlng-app="myApp">
<head>
<scriptsrc="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<scriptsrc="js/angular-ui-router.js"></script>
<script>
var myApp =angular.module('myApp', ['ui.router']);
// For Component users, it should look like this:
// var myApp = angular.module('myApp', [require('angular-ui-router')]);
</script>
...
</head>
<body>
...
</body>
</html>
例1、嵌套的狀態和視圖
（1）首先完成上邊準備工做的設置
（2）而後添加一個ui-view指令到<body />
<!-- index.html -->
<body>
<divui-view></div>
<!-- We'll also add some navigation: -->
<aui-sref="state1">State 1</a>
<aui-sref="state2">State 2</a>
</body>
（3）可能你會注意到咱們還添加了ui-sref指令，另外爲了管理狀態轉換，若是對應的狀態有一個URL，這個指令還會自動生成<a>連接的href屬性，這些內容將會插入index.html的ui-view，注意：嵌套狀態和視圖的關鍵就是它們擁有本身的ui-view。
<!-- partials/state1.html -->
<h1>State 1</h1>
<hr/>
<aui-sref="state1.list">Show List</a>
<divui-view></div>
<!-- partials/state2.html -->
<h1>State 2</h1>
<hr/>
<aui-sref="state2.list">Show List</a>
<divui-view></div>
（4）接下來，咱們添加一些子模板。這些模板將會插入它們的父模板的ui-view。
<!-- partials/state1.list.html -->
<h3>List of State 1 Items</h3>
<ul>
<ling-repeat="item in items">{{ item }}</li>
</ul>
<!-- partials/state2.list.html -->
<h3>List of State 2 Things</h3>
<ul>
<ling-repeat="thing in things">{{ thing }}</li>
</ul>
（5）最後，咱們用$stateProvider來把全部的state連成一條線，像下面這樣設置你的狀態：
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url:"/state1",
templateUrl:"partials/state1.html"
})
.state('state1.list', {
url:"/list",
templateUrl:"partials/state1.list.html",
controller:function($scope) {
$scope.items= ["A", "List", "Of", "Items"];
}
})
.state('state2', {
url:"/state2",
templateUrl:"partials/state2.html"
})
.state('state2.list', {
url:"/list",
templateUrl:"partials/state2.list.html",
controller:function($scope) {
$scope.things= ["A", "Set", "Of", "Things"];
}
});
});
這些只是一些簡單的使用，具體的咱們能夠根據本身的須要改動。
例2、多個的命名視圖
這是ui-router的另外一個強大的功能，能夠在一個模板頁面中有多個ui-view。
（1）首先完成上邊準備工做的設置
（2）添加一個或多個ui-view到你的應用並命名好。
<!-- index.html -->
<body>
<divui-view="viewA"></div>
<divui-view="viewB"></div>
<!-- Also a way to navigate -->
<aui-sref="route1">Route 1</a>
<aui-sref="route2">Route 2</a>
</body>
（3）在config中設置你的狀態
myApp.config(function($stateProvider) {
$stateProvider
.state('index', {
url:"",
views: {
"viewA": { template:"index.viewA" },
"viewB": { template:"index.viewB" }
}
})
.state('route1', {
url:"/route1",
views: {
"viewA": { template:"route1.viewA" },
"viewB": { template:"route1.viewB" }
}
})
.state('route2', {
url:"/route2",
views: {
"viewA": { template:"route2.viewA" },
"viewB": { template:"route2.viewB" }
}
})
});
- 1. uiRouter
- 2. angularjs路由監聽，uirouter感知路由變化，解決uirouter路由監聽不生效的問題
- 3. angularJS懶加載實現
- 4. Getting Started with AngularJS 1.5 and ES6: part1
- 5. AngularJS 風格指南 (ES2015)
- 6. angularJS 筆記
- 7. angularjs和angular的區別
- 8. AngularJs
- 9. Getting Started with AngularJS 1.5 and ES6: part4
- 10. AngularJS---認識AngularJS
- 更多相關文章...
- • ionic 教程 - ionic 教程
- • ionic 創建 APP - ionic 教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。