Angularui Router Overview "Turn"

With Angularjs to create a spa (single page application), routing is important to make the page navigation look like a normal web page. Angularui router is a ANGULARJS routing module developed by the Angularui team, which is more flexible than Angularjs's standard routing ngroute, Load multiple views and maintain view levels on a page based on state rather than URL, Nested states & Views and multiple & Named views. Ui-router is considered to be one of the most practical modules Angularui provides for developers.

Compared with Ngroute:

• $state $route
• $stateParams $routeParams
• $stateProvider $routeProvider
• <div ng-view></div>, <div ui-view></div>

(1) Set up routing
Use $stateprovider (not $routeprovider) in the. config () mode:

JS Code

1. $stateProvider. State (' state name ', {setup information});

However, the default otherwise needs to use $urlrouterprovider to set

JS Code

1. $urlRouterProvider. Otherwise ('/tab/home ');

For example:

JS Code

2. $stateProvider
4. . State ("emp", {
6. URL:"/emp"
8. , Templateurl:"list.html"
10. , controller:"Listctrl"
12. })
14. . State ("Emp.detail", {
16. URL:"/:empid"
18. , Templateurl:"emp.html"
20. , controller:"Empctrl"
22. });

How to set the Ngroute:

JS Code

1. $routeProvider. When (' url ', {setup info});

For example:

JS Code

1. $routeProvider
2. . When ("/emp", {
3. Templateurl:"list.html"
4. , controller:"Listctrl"
5. })
6. . When ("/emp/:empid") {
7. Templateurl:"emp.html"
8. , controller:"Empctrl"
9. };

(2) Hierarchical
The state can be nested, dividing the hierarchy by the points in the state name.
The format is: parent view. Child View
For example: Items.detail is a sub-view of items.

JS Code

2. $stateProvider
4. . State ("items", {
6. Abstract: true,
8. URL: "/items"
10. Templateurl: "items.html" //must include <ui-view/>
12. })
14. . State ("Items.detail", {
16. URL: " /detail", //URL is "/items/detail"
18. Templateurl: "items-detail.html"
20. })
22. . State ("Items.info", {
24. URL: " /info", //URL is "/items/info"
26. Templateurl: "items-info.html"
28. });

(3) Specify the view name
<div ui-view= "View1" ></div>
<div ui-view= "View2" ></div>

JS Code

2. . State ("Emp.detail"), {
4. URL:"/:empid"
6. , views:{
8. view1:{
10. Templateurl:"view1.html"
12. , controller:"View1ctrl"
14. }
16. , view2:{
18. Templateurl:"view1.html"
20. , controller:"View1ctrl"
22. }
24. }
26. }

Initial view

JS Code

1. . State ("Emp.detail"), {
2. URL:"/:empid"
3. , views:{
4. "":{  
5. Templateurl:"emp.html"
6. , controller:"Empctrl"
7. }
8. }
9. }

[Email protected]

JS Code

1. . State ("Emp.detail.picture"), {
2. URL:"/all"
3. , views:{
4. "@emp": {
5. Templateurl:"picture.html"
6. , controller:"Picturectrl"
7. }
8. }
9. }

(4) Setting
URL: The default relative path (the absolute path begins with ^)
Views: Each child view can contain its own template, controller, and preload data.
Abstract: Abstraction template cannot be activated
Template, Templateurl, templateprovider:html string, or function that returns an HTML string, the path to an HTML template, or a function that returns an HTML template path, a function that returns an HTML string
Controller, Controllerprovider: Specify any controllers that are already registered or a function that acts as a controller
Resolve: Pre-load a series of dependencies or data before the route arrives and inject it into the controller.
Data: It is not injected into the controller, it is used to pass data from the parent state to the child State.
Onenter/onexit: These two functions are called when entering or leaving a view of the current state

Examples of URL use:
URL: '/inbox '
URL: '/inbox/:inboxid '
URL: '/inbox/{inboxid} '
URL: '/inbox/{inboxid:[0-9a-fa-f]{6}} '
URL: '/inbox/{inboxid:.*} '
URL: '/inbox?sort '
URL: '/inbox/:inboxid/messages/{sorted}?from&to '
URL: '/party/:p artyid/:p artylocation '
URL: '/product/info/favorite?pid&jancode&showaddfavorite&frompg '

(5) page Jump
<a href= "#/emp/hoge/1234" >Go</a>
<a ui-sref= ". Hoge ({id:empid})" >Go</a>
$state. Go (' state name ', {parameter});

(6) Event
State Event

• $rootScope. $on (' $stateChangeStart ', function (event, tostate, Toparams, FromState, Fromparams) {...})
• $rootScope. $on (' $stateNotFound ', function (event, unfoundstate, FromState, Fromparams) {...})
• $rootScope. $on (' $stateChangeSuccess ', function (event, tostate, Toparams, FromState, Fromparams) {...})
• $rootScope. $on (' $stateChangeError ', function (event, tostate, Toparams, FromState, Fromparams, error) {...})

View Event
View is loaded but before the DOM tree is built:
$scope. $on (' $viewContentLoading ', function (event, viewconfig) {...});
When view is loaded and the DOM tree is built:
$scope. $on (' $viewContentLoaded ', function (event) {...});

Reference:
Https://github.com/angular-ui/ui-router
Https://docs.angularjs.org/api/ngRoute
http://angular-ui.github.io/ui-router/sample/
Http://scotch.io/tutorials/javascript/angular-routing-using-ui-router
Http://blog.eisneim.com/articles/dive_deep_into_ui-router.html

Angularui Router Overview "Turn"