In learning to use angular, ui-route is one of the difficulties. There is no problem with simple use, but when it comes to multi-level nesting, I feel confused. I have looked up a lot of information and stepped on many pitfalls. So far, I can't say that I have a comprehensive understanding of ui-route; here I just record the few pits I filled in.
1.Using 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"})What is the use of using abstract attribute? Official description: abstract: true indicates that this state cannot be activated explicitly, and can only be activated implicitly by the sub-state. If you cannot explicitly activate, you cannot access this state route directly through "/shop". Isn't that a dead end? What's the point of doing that? Wait, let’s take a look at the next sentence: It can be hiddenly activated in the quilt state, and it seems that it can still be alive. How can it make it live? Let's look at the following code:
.state('shop.main',{ url:"/:id", abstract: true, templateUrl:"templates/shop/main2.html", controller:"ShopMainController" })State : "shop.main" is a substate of shop. According to the theory, shop.main can activate shop. We only need to access: /shop/1, so that we can activate shop state and "shop.main"
Let's not be in a hurry. I will add abstract attribute to play with some exciting things. Let's look at the following code at the next level:
.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>samebooksamebooksamebooksamebook</div>" })I see that the state "shop.main.info" has the url of the state """ so we only need to access "shop/1" in this way all the default substates that can be used as "shop.main".
At this time, the nesting relationship of the module is: list.html nested main.html, main.html nested info.html. We can activate this three-layer nesting through the url of "shop/:id".
2. Use of parameters in the controller:
There is no difficulty in this. Inject "$stateParams" url parameter into the controller and you can get it in this object:
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. How to prevent template cache
During the development process, template cache seriously affects our debugging. Sometimes the code is modified, but the template does not change at all. It's very distressing. We just need to listen to stateChangeSuccess and then clear $templateCache. Here we use the run method to add the listener:
bookApp.run(['$rootScope','$templateCache', function ($rootScope, $templateCache) { var stateChangeSuccess = $rootScope.$on('$stateChangeSuccess', stateChangeSuccess); function stateChangeSuccess($rootScope) { $templateCache.removeAll(); } }]);The above is all about this article, I hope it will be helpful to everyone's learning.