Angularjs Ng-route Routing and Instance code _ANGULARJS

Premise

First you need to introduce angular and angular-route on the page, and be aware of introducing angular before Angular-route

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

This is mainly because the angular-route.js needs to pass in the Window.angular parameter, which only appears when the angular is finished loading.

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

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

Explain

The routing function is implemented by Routeprovider service and Ng-view collocation, Ng-view is equivalent to provide the mount point of the page template, when the switch URL jumps, the different page template will place in the Ng-view location; The mapping of the route is then configured through Routeprovider.

Generally, two methods are adopted:

When (): Configuration path and parameters;

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

When is the second argument:

Controller: The controller function of the corresponding path, or the name

Controlleras: Give the controller an alias

Template: The page template for the corresponding path will appear in 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 attribute will bind the service or value to the routing-related controller in the form of a key value to the object. The result value of the execution or the corresponding service reference is then injected into the controller. If resolve is a promise object, it is injected into the controller after it has been successfully executed, at which point the controller waits for the execution result in resolve.

For a detailed example, you can refer to the sample below.

Redirectto: Redirect Address

Reloadonsearch: Sets whether to load the corresponding template only if the address changes; neither search nor params changes will load the template

Caseinsensitivematch: path is case sensitive

There are several common events for routing:

$routeChangeStart: This event will be triggered before the route jumps

$routeChangeSuccess: This event is triggered after the route jump succeeds

$routeChangeError: This event is triggered after a route jump failure

Use

In a page, a button link that writes a URL jump and a ng-view tag

 <div ng-controller= "Myctrl" >
  <ul>
   <li><a href= "#/a" >click a</a></li>
   <li><a href= "#/b" >click b</a></li>
  </ul>

  <ng-view></ng-view >
  <!--<div Ng-view ></div>-->
 </div>

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

Related configuration in JavaScript that needs to define jumps

<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: 'b.html',
   controller: 'bController',
   resolve: {
     // I will cause a 3 second delay
     delay: function($q, $timeout) {
     var delay = $q.defer();
     $timeout(delay.resolve, 3000);
     return delay.promise;
     }
   }
  })
  .otherwise({
   redirectTo: '/a'
   });
 });
 </script>

In the code above, the Resolve association in the/b path has a method of delaying, 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:

<div ng-controller= "Acontroller" style= "Height:500px;width:100%;background-color:green;" >{{hello}}</div>

and b.html:

<div ng-controller= "Bcontroller" style= "Height:2500px;width:100%;background-color:blue;" >{{hello}}</div>

This way, you can achieve the jump of the route.

All the code can refer to:

Above is the angularjs  Ng-route routing data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!