AngularJs ng-Route Routing Explanation and Example Code

Preliminary

Firstly, you need to introduce angular and angular in the page-route, note that it must be within angular-introduced angular before route

This is mainly because of angular-The route.js needs to pass the parameter window.angular, and this parameter only appears after angular is loaded.

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

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

explains

　　The routing function is provided by the routeProvider service and ng-combined with ng-'view' provides a mounting point for the page template, when switching the URL for redirection, different page templates will be placed in ng-the location of 'view'; then configure the routing mapping through routeProvider.

Generally, it is mainly through two methods:

when(): Configure paths and parameters;

otherwise: Configure other path redirections, which can be considered as default.

The second parameter of 'when':

controller: The controller function or name corresponding to the path

controllerAs: Give the controller an alias

template: The page template corresponding to the path, which will appear in ng-at the 'view' location, for example, "<div>xxxx</div>"

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

resolve: This parameter is emphasized, and this property will bind services or values to the controller related to routing in the form of a key-value pair object. Then, the result value or the corresponding service reference is injected into the controller. If the resolve is a promise object, it will wait for it to execute successfully before injecting it into the controller, at which point the controller will wait for the execution result of resolve.

For detailed examples, please refer to the following examples.

redirectTo: Redirect address

reloadOnSearch: Set whether to load the corresponding template only when the address changes; changes in search and params will not load the template.

caseInsensitiveMatch: Path is case-insensitive.

There are several commonly used events for routing:

$routeChangeStart: This event is triggered before the routing redirection.

$routeChangeSuccess: This event is triggered after the routing redirection is successful.

$routeChangeError: This event is triggered after the routing redirection fails.

using

In the page, write the button link for URL redirection and ng-the '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 which, ng-The 'view' can be treated as an element or a tag, etc.

the relevant configuration for redirection 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: '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>

The code above contains,/path has a delay method associated with the resolve, which returns a Promise object, and3seconds later, so the b page, in the3will load successfully after 2 seconds.

Additionally, two more html files need to be provided:

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>

Thus, route transitions can be achieved.

All the code can be referred to:

<html ng-app="myApp">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="../../bower_components/angular/angular.js"></script>
 <script src="../../bower_components/angular-route/angular-route.js"></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">
 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 1 second delay
     delay: function($q, $timeout) {
     var delay = $q.defer();
     $timeout(delay.resolve, 3000);
     return delay.promise;
     }
   }
  }
  .otherwise({
   redirectTo: '/a'
   });
 });
 </script>
</body>
</html>

That's all about AngularJS ng-Data compilation of route routing, will continue to supplement relevant data, thank you all for your support to this site!

Declaration: The content of this article is from the Internet, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

Basic Tutorial