AngularJS學習之 ui router
阿新 • • 發佈:2017-05-12
ron span 登陸 也有 con 列表 tro 默認 blog
1.安裝
bower install --save angular_ui-router
2.在項目主頁面 index.html中添加
<div ui-view=""></ui-view>/*login頁面,dashboard.html將會嵌入此處*/
3.在app.js頁面設置
.config(function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise(‘/login‘);/*其他找不到的時候默認跳轉的頁面*/
$stateProvider
.state(‘login‘,{
url:‘/login‘,
templateUrl:‘/views/login.html‘
})
.state(‘dashboard‘,{
url:‘/dashboard‘,
templateUrl:‘/views/dashboard.html‘/*這個是一個登陸後的主頁面*/
})
.state(‘dashboard.articlelist‘,{
url:‘/articlelist‘,
templateUrl:‘/views/articlelist.html‘/*這是dashboard裏面的一個嵌套頁面*/
})
.state(‘dashboard.addarticle‘,{
url:‘/addarticle‘,
templateUrl:‘/views/addarticle.html‘
})
});
4.在HTML中設置
這個是在dashboard下的嵌套頁面寫法:
<li ui-sref=".articlelist"><a href="" >Article列表</a></li>/*註意其中的dot,href什麽也不需要寫*/
<div>
<div ui-view=""/>
</div>/*articlelist和addarticle兩個頁面將會嵌套在dashboard這裏*/
這個是上面頁面裏有個button點擊之後跳轉到另外一個嵌套頁面,註意 ur-sref添加了父節點 dashboard. href也有內容
<button type="button"class="btn btn-success btn-xs pull-right" ui-sref="dashboard.addarticle" href="/addarticle">+新增</button>
AngularJS學習之 ui router