Ui-router Details (ii) Ngroute tool difference

We understand that Angular.js is a rich client single page application, so routing plays a vital role in rendering different views on one page.

Angular.js has packaged a routing tool for us Ngroute, which is a way to drive a view by URL changes.

Angularui also encapsulates a standalone routing module, Ui-router, which is a state-driven view.

What is the advantage of the latter: a page can be nested multiple views, multiple views to control a certain view and so on.

Ngroute

You need to use the Ng-view directive in the UI to specify such as:<div ng-view></div>

URL changes this area will be refreshed.

First, you configure the registration Ngroute

var app = Angular.module ("Yijiebuyi", [' Ngroute ']);

App. Config (function ($locationProvider) {

});

Routing settings:

Angular.module (' Yijiebuyi '). config ([' $urlRouterProvider ',

function ($urlRouterProvider) {

$urlRouterProvider

. When ("/blog", "/blog/index")

. otherwise ("/blog/index");

});

Ui-router

You need to use the Ui-view directive in the UI to specify such as:<div ui-view></div>

You need to download the Ui-route file.

First configure the registration Ui-route

var app = Angular.module ("Yijiebuyi", [' Ui.router ']); App. Config (function () {//routing configuration});

Routing settings:

Angular.module (' Yijiebuyi '). config ([' $stateProvider ', function ($stateProvider) {$stateProvider. State (' blog ', {ur L: '/blog ', views:{' container ': {templateurl: ' Templates/blog/layout.html '}}}). State (' Blog.ind Ex ', {url: '/index ', views:{' container ': {templaterurl: ' Templates/blog/index.html '}}}) });

Compared to Ngroute and Ui-route:

$state $route

$routeParams $Stateparams

$stateProvider $routeProvider

<div ng-view></div>-> <div ui-view></div>

To set the route compared to:

$urlRouterProvider. Otherwise ('/blog/index '); Setting a default route also needs to be set using Ngroute.

$stateProvider. State (' Blog.index ', {url: ' ... ', views:{template path}); see setting information above.

So we have a brief introduction to the previous post that the Ui-route routing controller uses both Ngroute and Ui-route because

Set the default page or use the Ngroute tool.

The following details Ui-route use:

(1) Parent route, sub-route

The Ui-route child route can inherit the parent route, which means that the state setting can be nested through the name. (dots) to differentiate levels.

As the following route:

Angular.module (' Yijiebuyi '). config ([' $stateProvider ', function ($stateProvider) {$stateProvider. State (' blog ', {ur L: '/blog ', views:{' container ': {templateurl: ' Templates/blog/layout.html '}}}). State (' Blog.ind Ex ', {url: '/index ', views:{' container ': {templaterurl: ' Templates/blog/index.html '}}}) });

The route that the blog corresponds to is/blog

Blog.index the corresponding route is/blog/index (the previous/blog is inherited from the parent view).

Blog.index is the child view of the blog

(2) Specify the view of the response

<div ui-view= "View1" ></div> <div ui-view= "View2" ></div>

. State ("Blog.detail"), {URL: "/:blogid", views:{view1:{templateurl: "View1.html"} , view2:{templateurl: "View1.html"}}}

(3) state configuration parameters

URL: The default relative path (the absolute path begins with ^)

Views: Each child view can contain its own template, controller, and preload data. (after 2 options, the controller can be bound in the view)

Abstract: Abstraction template cannot be activated

Template:html a string or a function that returns an HTML string

Such as:

$stateProvider. State (' Blog.detail ', {Template: ' 
Templateurl:html the path to a template or a function that returns an HTML template path
Such as:
$stateProvider. State (' Blog.detail ', {templateurl: ' templates/blog_detail.html '})
Templateprovider: function that returns an HTML string
such as: return HTML by function
$stateProvider. State (' Blog.detail ', {templateprovider:function ($timeout, $stateParams) {return $timeout (function (  {return ' 
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
(4) Solution Resolve
You can use Resolve to provide optional dependency injection for the controller. 
Relolve is a key-value object made up of Key/value.
Key–{string}: The dependency name of the injection controller.
Value-{string|function}:
String: Alias for a service
Functions: The return value of the function is used as a dependency injection, and if the function is a time-consuming operation, then the controller must wait for the function to complete (be resolved) to be instantiated.
For example, the view of the background of the blog needs to be logged in to the user to access, then determine whether login can be made a controller dependent
$stateProvider. State (' Yijiebuyi ', {url: '/admin ',//Login to access resolve: {authentication:[' Yijiebuyiauth ', ' $q ', Fu        Nction (Yijiebuyiauth, $q) {return $q. When (). then (function () {return yijiebuyiauth.authentication ();    }); }]}, Views: {container: {templateurl: "Templates/admin_manage.html"}}})
In the return function above we inject a service Yijiebuyiauth, which implements the method of login judgment in this service authentication
(5) Provision of custom data $state object
$stateProvider. State (' Blog.index ', {templateurl: ' templates/blog_index.html ', data: {current_page:1, PAGE_SIZE:20}})
The data object above is custom
It defines the current page and the number of display items for 2 pages.
In the controller that corresponds to the view, we can get the custom data by the following method.
Console.log ($state. current.data.current_page);  1console.log ($state. current.data.page_size); 20
(5) OnEnter and OnExit callback functions
OnEnter: Triggers what is active when the state is active??? The page is loading ... I also solve!
OnExit: What is inactive when the state is inactive?? Page loading Complete ... The same solution!
$stateProvider. State ("Blog.detail", {Template: ' 
Therefore, the above-mentioned resolution depends on the decision whether to log in, fully in the OnEnter event to determine the login status, if not logged in, jump directly to other routes.
(6) Page jump
<a href= "#/blog/1234" > Blog details </a> <a ui-sref= "Blog.detail ({blogid:blogid})" > Blog details </a>
$state. Go (' Blog.detail ', {blogid:blogid});
(7) 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) {...});
Ui-router Details (ii) Ngroute tool difference