[AngularJS] Angularjs Series (2) routing of intermediate articles

Directory

• Principle
• Angular-route
• Ui-router
  • Event
  • Deep routing

Principle

Ng's route nature is to monitor the Hashchange event.

In the Angular-route

    $rootScope. $on (' $locationChangeStart ', prepareroute);    $rootScope. $on (' $locationChangeSuccess ', commitroute);

In the Ui-router

      Listener = Listener | | $rootScope. $on (' $locationChangeSuccess ', update);    Scope. $on (' $stateChangeSuccess ', function () {          Updateview (false);        }); ...

Angular-route

Hello World

<! DOCTYPE html>
The above is the simplest ngroute Hello world
Refer to the official API:
Https://docs.angularjs.org/api/ngRoute
1 more complete demos are shown here
    <div ng-controller= "Maincontroller" > Choose: <a href= "#Book/moby" >Moby</a> |        <a href= "#Book/moby/ch/1" >Moby:Ch1</a> |        <a href= "#Book/gatsby" >Gatsby</a> |        <a href= "#Book/gatsby/ch/4?key=value" >Gatsby:Ch4</a> | <a href= "#Book/scarlet" >scarlet letter</a><br/> <div ng-view></div> 
Ui-router
Hello World
<! DOCTYPE html>
The above shows the basic usage of Ui-router
Event
As with Ngroute, the Angular-route service initiates certain events in different state life cycle lifecycle. Listening to $scope objects captures these events and then takes a different response or action. The following events will be triggered on $rootscope, so these events can be heard on any $scope object.
Status Change Events
$scope. $on (' $stateChangeStart ', function (evt, tostate, Toparams, FromState, Fromparams), {//If you need to block the completion of an event Evt.preventdefault ();});
The events that can be triggered include:
Statechangestart
Triggered when the state change is started
$stateChangeSuccess
Triggered when the status change is successful
$stateChangeError
When a state change encounters an error, the error is usually that the target cannot be loaded, the pre-loaded data cannot be loaded, and so on.
View Loading Events
View Loading phase Ui-router also provides some events
$viewContentLoading
Triggered when the view is being loaded and before the DOM is rendered.
$scope. $on (' $viewContentLoading ', function (event, viewconfig) {//Get parameters for any view setting, and a special property: Viewconfig.targetview}); $ viewcontentloaded
Triggered when the view is loaded and the DOM has been rendered.
In the event, say 2 more sentences:
In the source code of 3151 lines, defines the route jump method.
    $state. Transitionto = function Transitionto (to, Toparams, options) {
In the method, Ui-router calls $rootscope. $broadcast and broadcasts the event.
While $broadcast, $emit and $on are not the focus of this section, here is a brief introduction:
$broadcast: Triggers an event to the current and child scopes.
$emit: Triggers an event to the current and parent scope
$on: Defining events in the current scope
Similarly, in Ngroute, some events have been defined
such as: $routeChangeStart, $routeChangeSuccess, $routeChangeError
Deep routing (nested routines) 
<!    DOCTYPE html>
Refer to:
Ui-router GitHub (Https://github.com/angular-ui/ui-router/wiki)
This address: http://www.cnblogs.com/neverc/p/5907693.html
[AngularJS] Angularjs Series (2) routing of intermediate articles