AngularJs ng-route routing detailed explanation and example code

premise

First, you need to introduce angular and angular-route on the page. Note that you need to introduce angular before angular-route.

This is mainly because this parameter needs to be passed in, and this parameter will only appear after angular is loaded.

(function(window, angular, undefined) {
'use strict';
...
('ngView', ngViewFactory);
...
})(window, );

You can download it on the official website or install it using bower.

explain

The routing function is implemented by the routeProvider service and ng-view. ng-view is equivalent to providing the mount point of the page template. When switching the URL for jumping, different page templates will be placed at the location of ng-view; then routeProvider is used to configure the route mapping.

There are two methods in general:

when(): Configure path and parameters;

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

The second parameter of when:

controller: the controller function or name of the corresponding path

controllerAs: Give the controller an alias name

template: The page template corresponding to the path will appear at ng-view, such as "<div>xxxx</div>"

templateUrl: the path corresponding to the template, such as "src/"

resolve: This parameter focuses on the fact that this property will bind services or values to the route-related controller in the form of a key-value pair object. Then the execution result value or corresponding service reference is injected into the controller. If resolve is a promise object, it will wait until it executes successfully before it is injected into the controller. At this time, the controller will wait for the execution result in resolve.

For detailed examples, please refer to the following examples.

redirectTo: redirect address

reloadOnSearch: Set whether the corresponding template will be loaded only when the address is changed; neither search nor params will be loaded.

caseInsensitiveMatch: Path is case sensitive

There are several commonly used events for routing:

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

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

$routeChangeError: This event is fired after the route jump failed

use

In the page, write the button link to the URL jump and the 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>

Among them, ng-view can be regarded as an element or a label, etc.

Related configurations that need to be defined in javascript

<script type="text/javascript">
 ("myApp",["ngRoute"])
 .controller("aController",function($scope,$route){
  $ = "hello,a!";
 })
 .controller("bController",function($scope){
  $ = "hello,b!";
 })
 .controller("myCtrl",function($scope,$location){

  $scope.$on("$viewContentLoaded",function(){
   ("ng-view content loaded!");
  });

  $scope.$on("$routeChangeStart",function(event,next,current){
   //(); //cancel url change
   ("route change start!");
  });
 })
 .config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when('/a', {
   templateUrl: '',
   controller: 'aController'
   })
  .when('/b', {
   templateUrl: '',
   controller: 'bController',
   resolve: {
     // I will cause a 3 second delay
     delay: function($q, $timeout) {
     var delay = $();
     $timeout(, 3000);
     return ;
     }
   }
  })
  .otherwise({
   redirectTo: '/a'
   });
 });
 </script>

In the above code, the resolve in the /b path is associated with a delay method. This method returns the Promise object and will return the result only after 3 seconds. Therefore, the b page will not load successfully after 3 seconds.

Two additional html are required:

：

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

as well as:

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

In this way, the route jump can be achieved.

All codes can be referenced:

<html ng-app="myApp">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="../../bower_components/angular/"></script>
 <script src="../../bower_components/angular-route/"></script>
</head>
<body>
 <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>
 <script type="text/javascript">
 ("myApp",["ngRoute"])
 .controller("aController",function($scope,$route){
  $ = "hello,a!";
 })
 .controller("bController",function($scope){
  $ = "hello,b!";
 })
 .controller("myCtrl",function($scope,$location){

  $scope.$on("$viewContentLoaded",function(){
   ("ng-view content loaded!");
  });

  $scope.$on("$routeChangeStart",function(event,next,current){
   //(); //cancel url change
   ("route change start!");
  });
 })
 .config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when('/a', {
   templateUrl: '',
   controller: 'aController'
   })
  .when('/b', {
   templateUrl: '',
   controller: 'bController',
   resolve: {
     // I will cause a 1 second delay
     delay: function($q, $timeout) {
     var delay = $();
     $timeout(, 3000);
     return ;
     }
   }
  })
  .otherwise({
   redirectTo: '/a'
   });
 });
 </script>
</body>
</html>

The above is a compilation of the AngularJS ng-route routing information. We will continue to add relevant information in the future. Thank you for your support for this site!