摘要:[MAN鐵人賽]Day 07:AngularJS - Plugin:UI-Router
A -> AngularJS - Plugin:UI-Router
前言
在昨天介紹的Routing中，讓大家對換頁有基本的概念後就要來介紹這個AngularJS上必裝超強的plugin:UI-Router。
UI-Router
UI-Router是AngularJS的一個routing framework，主要是幫助你可以有架構將你的頁面分開成不同的子頁面呈現Nested view，不同於原本的$route service，UI-Router 是一個透過state的架構來切換頁面，這讓你有更大的彈性來切換你的頁面。
使用方式如下：
<!doctype html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
...
</head>
<body>
...
<script>
var myApp = angular.module('myApp', ['ui.router']);
</script>
</body>
</html>
範例
首先在結構上總共有五個頁面，頁面上大致說明如下
- index.html
範例首頁，載入所有css,js與設定ng-app的應用範圍，重點設定如下：
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/1.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"];
}
})
});
這邊透過設定每個state對應的url中的templateUrl與controller來分配連接版面與各版面操控的內容。
- route1.html
當url指到#/route1時顯示的頁面，裡面包含一個子狀態的設定顯示route1.list.html的內容，url指到#/route2時顯示的頁面，裡面包含一個子狀態的設定顯示route2.list.html的內容，原始碼如下：
<!-- partials/state1.html -->
<h1>Route 1</h1>
<hr/>
<a ui-sref=".list">Show List</a>
<div ui-view></div>
<!-- partials/state2.html -->
<h1>Route 2</h1>
<hr/>
<a ui-sref=".list">Show List</a>
<div ui-view></div>
這邊透過ui-sref的方式指定Show List的內容來自於各自檔名接上.list之後的html頁面內容。
-
route1.list.html與route2.list.html
List of State 1 Items
- {{ item }}
h3>List of State 2 Things
- {{ thing }}
這邊透過ngRepeat的方式分別讀出item與thing內的物件
結語
介紹到這邊，基本上大家已經可以建立一個簡單地SPA網頁，接下來就要再一一介紹AngularJS各項強大的火力給大家認識了！Day-8 over!
