Angular--ui-router的使用
先引用Angular而後引用ui-routerjavascript
路由清單：咱們依賴的ui.router中提供了一個服務$state，此時能夠用config來配置這個服務。用$stateProvider的state方法來設置路由清單。也就是說，定義一個個「狀態」。html
小tip：服務除了factory、service以外，還有一個provider。provider通常工程師不會本身定義的，你只須要知道全部的內置服務都是provider函數寫的。provider函數寫出的服務，能夠在依賴注入前，用config函數配置。java
config表示配置，能夠配置任何內置服務，此時$state就是插件給咱們的服務。通常的，服務對應的Provider就是服務名字後面直接加Provider（下文中黃色背景代碼段）：app
<script type="text/javascript">ide
var myapp = angular.module("myapp",["ui.router"]);函數
//配置路由表，實際上在配置$state服務。ui
myapp.config(function($stateProvider) {url
$stateProviderspa
.state({插件
name: 'news',
url: '/news',
template: '<h3>新聞頻道</h3>'
})
.state({
name: 'music',
url: '/music',
template: '<h3>音樂頻道</h3>'
})
.state({
name: 'movie',
url: '/movie',
template: '<h3>電影頻道</h3>'
});
});
</script>
配置路由使用$stateProvider的state方法，又是一個裝飾者模式。
.state().state().state()裝飾了三回，連續打點。
配置的時候有三個配置：名字name、路由url、模板template。
此時頁面上不要忘記放置一個
<ui-view></ui-view>
的E級別指令。此時動態的內容（template裏面的內容）都將呈如今ui-view裏面。
完整代碼：
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>路由演示</title>
</head>
<body>
<ui-view></ui-view>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-ui-router.js"></script>
<script type="text/javascript">
var app = angular.module("app",["ui.router"]);
//對$state服務進行一個配置，此時能夠書寫路由清單
app.config(function($stateProvider){
$stateProvider
.state({
name: 'news',
url: '/news',
template: '<h3>新聞頻道</h3>'
})
.state({
name: 'music',
url: '/music',
template: '<h3>音樂頻道</h3>'
})
.state({
name: 'movie',
url: '/movie',
template: '<h3>電影頻道</h3>'
});
});
</script>
</body>
</html>
- 1. Cookie的使用(使用C#)
- 2. jQuery的使用——timepicker的使用
- 3. 方法的使用，數組的使用
- 4. mosby mvp 庫的使用的使用
- 5. matplotlib的使用——pie（餅圖）的使用
- 6. SVN 的使用(二) Eclipse 中的使用
- 7. C# 集合的使用List的使用
- 8. Afinal的使用（一）：FinalActivity的使用
- 9. b Spring AOP 的使用--API的使用
- 10. linux的使用之vmware的使用
- 更多相關文章...
- • TortoiseSVN 使用教程 - SVN 教程
- • Docker 容器使用 - Docker教程
- • Composer 安裝與使用
- • 使用Rxjava計算圓周率
-
每一个你不满意的现在，都有一个你没有努力的曾经。