AngularJs Ng-route Routing

This article is based on the ng-route of the angular in the route, the routing function is mainly $routeProvider service and ng-view implementation.

The implementation principle of Ng-view is to dynamically compile HTML templates-$compile (HTML) (scope) based on the switching of routes.

More content reference: Angularjs Summary

Premise

You first need to introduce angular and angular-route to the page, and note that you should introduce angular before angular-route

<src=". /.. /bower_components/angular/angular.js "></script><src=". /.. /bower_components/angular-route/angular-route.js "></script>     

This is mainly because angular-route.js needs to pass in the Window.angular parameter, and this parameter will only appear if the angular is finished loading.

(function (window, angular, undefined) {' use strict '; ... ngroutemodule.directive (' Ngview ', ngviewfactory), ...}) (window.angular);    

Downloads can be downloaded to the official website, or installed using Bower.

Explain

The routing function is implemented by Routeprovider service and Ng-view, Ng-view is equivalent to providing a mount point of the page template, when the switch URL to jump, the different page template will be placed in the location of Ng-view; The route mapping is then configured through Routeprovider.

Generally, mainly through two methods:

When (): Configure the path and parameters;

Otherwise: Configure other path jumps, you can think of as default.

The second parameter of when:

Controller: The control function for the corresponding path, or the name

Controlleras: Give the controller an alias

Template: The corresponding path of the page templates, will appear in the Ng-view, such as "<div>xxxx</div>"

Templateurl: The path of the corresponding template, such as "src/xxx.html"

Resolve: This parameter emphasizes that the property will bind the service or value to the controller of the route, in the form of a key-value object. The result value of the execution or the corresponding service reference is then injected into the controller. If the resolve is a promise object, it is injected into the controller until it succeeds, and the controller waits for the result to be executed in resolve.

For a detailed example, you can refer to the following example.

Redirectto: Redirect Address

Reloadonsearch: Sets whether the corresponding template is loaded only when the address is changed; neither search nor params changes will load the template

caseInsensitiveMatch: path is case-sensitive

There are several common events for routing:

$routeChangeStart: This event is triggered before the route jumps

$routeChangeSuccess: This event is triggered after a successful routing jump

$routeChangeError: This event is triggered after a failed routing jump

Use

In the page, write the URL jump button link as well as the Ng-view tag

    <DivNg-controller="Myctrl" ><Ul><Li><Ahref= "#/a" >click a</a></li> <li><a href= "#/b" >click b</a> </li> </ ul> <ng-view></ ng-view> <!--<div ng-view ></div>-</DIV>          

Where ng-view can be used as an element or as a label.

The relevant configuration of the jump needs to be defined in JavaScript

<script type="Text/javascript" > Angular.module ("MyApp", ["Ngroute"]). Controller ("Acontroller",function($scope, $route) {$scope. Hello ="Hello,a!"; }). Controller ("Bcontroller",function($scope) {$scope. Hello ="Hello,b!"; }). Controller ("Myctrl",function($scope, $location) {$scope. $on ("$viewContentLoaded",function() {Console.log ("Ng-view content loaded!"); }); $scope. $on ("$routeChangeStart",function(event,next,current) {Event.preventdefault (); Cancel URL Change Console.log ("Route Change start!"); }); }). config (function ($routeProvider, $ Locationprovider) {$routeProvider. When ( "/a", {templateurl:  A.html ', controller:  ' Acontroller '}). When ( '/b ', {templateurl:  ' Bcontroller ', resolve: {//I'll cause a 3 second delay delay: function< Span class= "Hljs-params" > ($q, $timeout) {var delay = $q. Defer (); $timeout (Delay.resolve, Span class= "Hljs-number" >3000); return delay.promise;} }}). Otherwise ({redirectto:  '/A '}); </script>              

In the above code, the resolve in the/b path is associated with a deferred method, which returns the Promise object and returns the result after 3 seconds. Therefore, the B page will not load successfully until 3 seconds.

Additional two HTML is required:

A.html:

<ng-controller=style="height:500px;width:100%;" >{{hello}}</div>      

and b.html:

<ng-controller=style="height:2500px;width:100%;" >{{hello}}</div>      

In this way, you can implement a routing jump.

All the code can refer to:

<Htmlng-app="MYAPP" ><Head><Metahttp-equiv="Content-type"Content="Text/html; Charset=utf-8 "/><ScriptSrc=".. /.. /bower_components/angular/angular.js "></Script><ScriptSrc=".. /.. /bower_components/angular-route/angular-route.js "></Script></Head><Body><DivNg-controller="Myctrl" ><Ul><Li><Ahref="#/a" >click A</A></Li><Li><Ahref="#/b" >click b</A></Li></Ul><Ng-view></Ng-view><!--<div Ng-view ></div>--</Div><ScriptType="Text/javascript" >Angular.module ("MyApp", ["Ngroute"]). Controller ("Acontroller",function$scope, $route) {$scope. Hello ="Hello,a!"; }). Controller ("Bcontroller",function$scope) {$scope. Hello ="Hello,b!"; }). Controller ("Myctrl",function$scope, $location) {$scope. $on ("$viewContentLoaded",function){Console.log ("Ng-view content loaded!"); }); $scope. $on ("$routeChangeStart",functionEvent,next,current) {Event.preventdefault (); Cancel URL ChangeConsole.log ("Route Change start!"); }); }). config (function$routeProvider, $locationProvider) {$routeProvider. When ('/a ', {Templateurl:' A.html ',Controller' Acontroller '}). When (templateurl:  ' b.html ', controller:  ' Bcontroller ', resolve: {//I'll cause a 1 second delay delay:  function ( $q, $timeout) {var delay = $q. Defer (); $timeout ( Delay.resolve, 3000); return delay.promise;} }}). Otherwise ({redirectto:  '/A '}); </script></ body></html>view Code   

AngularJs Ng-route Routing detailed