Angularjs中UI Router的使用方法_AngularJS

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

1.abstract的使用：

$stateProvider  .state('shop',{    resolve:{      "shoplist":function($http){        return $http({          url:"/bookApp/data/shoplist.php",          method:"GET"        })      }    },    abstract: true,    url:"/shop",    templateUrl:"templates/shop/list.html",    controller:"ShopListController"})

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

 .state('shop.main',{    url:"/:id",    abstract: true,     templateUrl:"templates/shop/main2.html",     controller:"ShopMainController"    })

狀態："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();   } }]);

以上就是本文的全部內容，希望對大家的學習有所協助。