angularJs中ui-router的使用

　　學習使用angular中，ui-route是其中的一個難點，簡單使用沒什麼問題，但涉及到多級嵌套，就感受有茫然，查了不少資料，踩過不少坑，到目前爲止也不能說對ui-route有全面瞭解；這裏只是把填補的幾個坑記錄一下備忘：

1.abstract的使用：

 1 $stateProvider
 2     .state('shop',{
 3         resolve:{
 4             "shoplist":function($http){
 5                 return $http({
 6                     url:"/bookApp/data/shoplist.php",
 7                     method:"GET"
 8                 })
 9             }
10         },
11         abstract: true,
12         url:"/shop",
13         templateUrl:"templates/shop/list.html",
14         controller:"ShopListController"
15 })

使用abstract屬性有什麼用，官方說明：abstract: true 代表此狀態不能被顯性激活，只能被子狀態隱性激活。不能顯性激活即不能直接經過"/shop"訪問此狀態路由，那不就是一條死路嗎？那要你何用。等等，咱們再看看後面一句：能被子狀態隱性激活，貌似還能活起來，怎麼讓他活起來？咱們再看下面的代碼：

1     .state('shop.main',{
2         url:"/:id",
3         abstract: true,
4         templateUrl:"templates/shop/main2.html",
5         controller:"ShopMainController"    
6     })

狀態："shop.main"是shop的子狀態，按理論shop.main能夠激活shop，咱們只須要這樣去訪問：/shop/1,這樣咱們能夠激活shop狀態，和"shop.main"

咱們暫且不着急，我再再給加上abstract屬性，玩點刺激的，咱們再把激活點再日後一級看下面代碼：

    .state('shop.main.info',{
        url:"",
        templateUrl:"templates/shop/info.html",
        cache:'false',
        controller:"InfoController"
    })
    .state('shop.main.author',{
        url:"/author",
        template:"<div>authorauthorauthorauthorauthor</div>"
    })
    .state('shop.main.samebook',{
        url:"samebook",
        template:"<div>samebooksamebooksamebooksamebooksamebooksamebook</div>"
    })

我看狀態"shop.main.info"這個狀態 的url爲""因此咱們要激活這個狀態只須要這樣去訪問"shop/1"全部能夠作爲"shop.main"的一個默認子狀態。

此時模塊的嵌套關係爲：list.html嵌套main.html，main.html嵌套info.html。咱們能夠經過"shop/:id"的url激活這個三層嵌套。咱們看下最終的展現效果：

不錯，達到我預期的效果。

2控制器中參數的使用：

這個沒什麼難點，在控制器中注入"$stateParams" url參數在這個對象裏能夠拿獲得 ：

shop.controller("ShopMainController",['$scope','$stateParams','$rootScope',function($scope,$stateParams,$rootScope){
    $scope.persons = [1,2,3,4,5,6];
    $scope.good = {
        id:$stateParams.id
    }
    cfpLoadingBar.start();

}]);

3.怎麼防止模板緩存

在開發過程當中，模板緩存嚴重影響咱們調試，有時候代碼修改了，模板卻沒有任何變化。很苦惱，其餘咱們只須要監聽下stateChangeSuccess，而後再清除$templateCache就行,這裏咱們採用run方法添加監聽：

bookApp.run(['$rootScope','$templateCache', function ($rootScope, $templateCache) {  

  var stateChangeSuccess = $rootScope.$on('$stateChangeSuccess', stateChangeSuccess);  

  function stateChangeSuccess($rootScope) {  
   $templateCache.removeAll();    
 } 
}]);