AngularJS學習之 ui router

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>