Spiegazione dettagliata di ng-route in AngularJs e codice di esempio

Precondizione

Prima di tutto, è necessario includere angular e angular-route nella pagina, assicurandosi di includere angular prima di angular-route

Questo è principalmente perché angular-route.js richiede il parametro window.angular, che appare solo dopo aver caricato angular.

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

Puoi scaricare dal sito ufficiale o installare utilizzando bower.

Spiegazione

　　La funzione di routing è implementata dal servizio routeProvider e ng-view, dove ng-view funge da punto di mountaggio per i modelli di pagina, e quando si cambia l'URL per il passaggio, diversi modelli di pagina vengono posizionati nella posizione di ng-view; quindi si configura la mappatura delle rotte tramite routeProvider.

Di solito si passa attraverso due metodi:

when(): configurare percorsi e parametri;

otherwise: configurare altri percorsi di reindirizzamento, che può essere considerato come default.

il secondo parametro di when:

controller: funzione del controller corrispondente al percorso o il nome

controllerAs: dare un altro nome al controller

template: modello di pagina corrispondente al percorso, apparirà in ng-view, ad esempio "<div>xxxx</div>"

templateUrl: percorso del modello corrispondente, ad esempio "src/xxx.html"

resolve: questo parametro viene spiegato in dettaglio, l'attributo assegnerà servizi o valori relativi alla rotta in forma di oggetto chiave-valore. Poi, il valore di esecuzione del risultato o il riferimento al servizio corrispondente viene iniettato nel controller. Se l'oggetto resolve è una promessa, allora verrà iniettato nel controller dopo il successo dell'esecuzione, il controller aspetterà quindi il risultato dell'esecuzione di resolve.

Esempi dettagliati possono essere trovati nei seguenti esempi.

redirectTo: indirizzo di reindirizzamento

reloadOnSearch: impostare se caricare il modello corrispondente solo quando cambia l'indirizzo; la modifica di search e params non carica il modello

caseInsensitiveMatch: la distinzioni tra maiuscole e minuscole nei percorsi

Ci sono diversi eventi comuni delle rotte:

$routeChangeStart: questo evento viene attivato prima del passaggio di rotta

$routeChangeSuccess: questo evento viene attivato dopo il successo del passaggio di rotta

$routeChangeError: questo evento viene attivato dopo il fallimento del passaggio di rotta

usare

Nella pagina, inserire il pulsante di link di transizione dell'URL e l'etichetta ng-view　　

 <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>

tra cui ng-view può essere considerato come un elemento o un etichetta.

è necessario definire la configurazione di reindirizzamento 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: {
     // Causerà un ritardo di 3 secondi
     delay: function($q, $timeout) {
     var delay = $q.defer();
     $timeout(delay.resolve, 3000);
     return delay.promise;
     }
   }
  })
  .otherwise({
   redirectTo: '/a'
   });
 });
 </script>

Nella seguente codice, il percorso /b è associato a un metodo di ritardo, che restituisce un oggetto Promise e ritorna il risultato dopo 3 secondi. Pertanto, la pagina b verrà caricata con successo solo dopo 3 secondi.

bisogna fornire ulteriormente due html:

a.html:

<div ng-controller="aController" style="altezza:500px;larghezza:100%;colore_di_sfondo:green;">{{hello}}</div>

ecco b.html:

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

In questo modo, è possibile realizzare il passaggio di rotta.

Tutti i codici possono essere consultati:

<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>

Ecco la raccolta di materiali su ng-route di AngularJS, continueremo a integrare ulteriori materiali pertinenti, grazie per il supporto della nostra community!

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright è di proprietà del rispettivo proprietario, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non possiede il diritto di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, è possibile inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.

Corso di base