How to use UI router in Angularjs _angularjs

Learning to use angular, ui-route is one of the difficulties, the simple use of no problem, but involves multi-level nesting, feel dazed, check a lot of information, stepped on a lot of pits, so far can not say to the Ui-route have a comprehensive understanding Here is just a few of the holes to be filled to record the memo:

The use of 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"
})

What is the use of the abstract attribute, official note: Abstract:true that this state can not be explicitly activated, only the quilt state recessive activation. Can not be explicit activation is not directly through the "/shop" access to this State route, that is not a dead end? That's what you need. Wait, let's take a look at the following sentence: Can quilt state recessive activation, seemingly still can live up, how to let him live? Let's look at the following code:

 . State (' Shop.main ', {
    URL: "/:id",
    abstract:true,
     templateurl: "templates/shop/main2.html"
     , Controller: "Shopmaincontroller"  
  })

status : "Shop.main" is the son of the shop, according to the theory Shop.main can be activated, we only need to visit:/SHOP/1, so that we can activate the status of, and "Shop.main"

Let's not worry, I'll add the abstract attribute, play a bit of excitement, we then put the activation point to look at the following code:

  . 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>"
  })

I see the State "Shop.main.info" This status URL is "" So we have to activate this state only need to access "SHOP/1" All can be done as "Shop.main" a default child state.

At this point the nested relationship of the module is: list.html nested main.html,main.html nested info.html. We can activate this three-layer nesting with the URL "Shop/:id".

2 The use of parameters in the controller:

This is not a difficult problem, in the controller injected "$stateParams" URL parameters in this object can be taken:

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 caching

In the development process, the template cache seriously affect our debugging, and sometimes the code changes, the template has not changed. Very distressed, the other we only need to monitor the next statechangesuccess, and then clear the $templatecache on the line, here we use the Run method to add listening:

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

 var statechangesuccess = $ Rootscope $on (' $stateChangeSuccess ', statechangesuccess); 

 function Statechangesuccess ($rootScope) { 
  $templateCache. RemoveAll ();  
 } 
}]);

The above is the entire content of this article, I hope to help you learn.