[Angularjs] views and routes (iv)

Write in front

The concept of routing for ANGULARJS is basically the end of the story, and it's easier to get started by learning and practicing in real-world projects. Oneself also through Angularjs made a module in the app, the effect is still possible.

Series Articles

[Angularjs]ng-select and Ng-options

[Angularjs]ng-show and Ng-hide

[Angularjs] View and Route (i)

[Angularjs] View and Routing (ii)

[Angularjs] views and routes (iii)

Route mode

Different routing patterns are presented in a different URL format in the browser's address bar. $location service is routed by default using the label mode. The routing pattern determines what the URL of your site looks like.

Label mode

tags (hashbang) are the techniques angularjs use to link inside your app. The label mode is the downgrade scheme for the HTML5 mode, and the URL path begins with the # symbol. Tag mode does not require rewriting <a href= ' ></a> tags, nor does it require any server-side support. If no additional designations are made, ANGULARJS will use the label mode by default.

The URL that uses the tag pattern looks like this:

Http://yoursite.com/#!/inbox/all

If you want to display the specified configuration and use the label mode, you need to configure it in the Config function of the application module:

Angular.module (' app ', [' Ngroute '])            . config ([' $locationProvider ',function($ Locationprovider) {            $locationProvider. Html5mode (false);}]);

We can also configure Hashprefix, which is the default prefix for tags in tag mode! symbols. This prefix is also part of the downgrade mechanism of ANGULARJS in older browsers. This symbol can be configured:

Angular.module (' app ', [' Ngroute '])            . config ([' $locationProvider ',function($ Locationprovider) {            $locationProvider. Html5mode (false);            $locationProvider. Hashprefix ('! ') );}]);

HTML5 mode

Another routing pattern supported by ANGULARJS is the HTML5 mode. In this pattern, the URL looks like a normal URL (it looks like the URL of a tag in an old-fashioned browser). For example, the agreed route looks like this in the HTML5 mode:

Http://yoursite.com/inbox/all

Inside Angularjs, $location service allows applications to route using a common URL path through the HTML5 history API. When the browser does not support the HTML5 history API, the $location service automatically uses the URL of the label pattern as an alternative.

$location Service also has an interesting feature that, when a modern browser that supports the HTML5 history API loads a tagged URL, it rewrites the URL for the user.

In HTML5 mode, ANGULARJS is responsible for rewriting the links in <a href= ' ></a>. This means that ANGULARJS will decide whether to rewrite the link in href= ' at compile time, depending on the browser's capabilities.

For example <a href= '/person/42?all=true ' >Person</a> this tag, which will be rewritten in the old browser to tag mode url:/index.html#!/person/42?all= True But in modern browsers it will remain the same.

Back-end servers also need to support URL rewriting, and the server needs to ensure that all requests return index.html. To support HTML5 mode. This ensures that the route is handled by the ANGULARJS application.

When you write a link in the Angularjs of HTML5 mode, never use a relative path. If your app is loaded in the root path, this will not be a problem, but in other paths, the Angularjs app will not be able to handle the route correctly. Another option is to use the <base> tag in the head of the HTML document to specify the app's underlying URL:

<base href= '/base/url '/>

Routed events

$route Services trigger different events at each stage of the routing process, and you can set up listeners and respond to these different routed events.

This feature is useful for controlling different routing times, and for exploring scenarios such as login and authorization status for users.

We need to set the event listener for the route and use $rootscope to listen for these events.

$routeChangeStart

ANGULARJS broadcasts the $routechangestart event before routing changes. In this step, the routing service starts to load all the dependencies required for routing changes, and the promise in the template and resolve keys are also resolve.

Angular.module (' MyApp ', [])           . Run ([' $rootScope ', ' $location ',function($rootScope, $location) {           $rootScope. $on (' $routeChangeStart ', Fucntion (evt,next,current) {         });}]);   

$routeChangeStart event with two parameters:
The next URL that you want to navigate to.

The URL before the route changes.

$routeChangeSuccess

ANGULARJS broadcasts the $routechangesuccess event after the routing dependency is loaded.

Angular.module (' MyApp ', [])           . Run ([' $rootScope ', ' $location ',function($rootScope, $location) {           $rootScope. $on (' $routeChangeSuccess ', Fucntion (evt,next,current) {         });}]);   

$routeChangeSuccess has three parameters

The original Angularjs evt object.

The route to which the user is currently located.

The previous route (or undefined if it is currently the first route).

$routeChangeError

ANGULARJS broadcasts a $routechangeerror event when any promise is rejected or failed.

Angular.module (' MyApp ', [])           . Run ([' $rootScope ', ' $location ',function($rootScope, $location) {           $rootScope. $on (' $routeChangeError ', Fucntion (current,previous,rejection) {         });}]);   

$routeChangeError event has three parameters

The current routing information.

The previous routing information.

The promise error message that was rejected.

$routeUpdate

Angularjs The $routeupdate event is broadcast when an example of a controller is reused when the Reloadonsearch property is set to False.

Summarize

In the actual project, has not been used, now put the theory here, used to summarize it.

This article from

Angularjs Authoritative Tutorials

[Angularjs] views and routes (iv)