學習使用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(); } }]);以上就是本文的全部內容，希望對大家的學習有所幫助。