AngularJS-Routing

In diesem Kapitel führen wir in das AngularJS-Routing ein.

AngularJS-Routing ermöglicht uns den Zugriff auf unterschiedliche Inhalte über verschiedene URLs.

Mit AngularJS lassen sich Multi-View-Single-Page-Webanwendungen (SPA) implementieren.

Normalerweise hat unsere URL die Form vonhttp://example.com/first/page, aber in Single-Page-Webanwendungen verwendet AngularJS#! + Marker, um dies zu implementieren, zum Beispiel:

http://example.com/#!/first
http://example.com/#!/second
http://example.com/#!/third

Hinweis: In Versionen vor Angular 1.6 wird Routing über# + Marker implementiert.

Wenn wir auf einen der obigen Links klicken, ist die vom Server angeforderte Adresse dieselbe (http://example.com/). Denn der Inhalt nach dem #!-Zeichen wird vom Browser beim Senden einer Anfrage an den Server ignoriert. Also müssen wir die Funktionalität des Inhalts nach dem #!-Zeichen auf der Clientseite implementieren. AngularJS-Routing verwendet#! + Marker, um uns zu helfen, verschiedene logische Seiten zu unterscheiden und verschiedene Seiten an die entsprechenden Controller zu binden.

Im obigen Diagramm sehen wir, dass zwei URLs erstellt werden: /ShowOrders und /AddNewOrder. Jede URL hat eine entsprechende Ansicht und einen entsprechenden Controller.

Sehen wir uns nun ein einfaches Beispiel an:

Beispielanalyse:

• 1. Laden Sie die JS-Datei, die das Routing implementiert: angular-route.js.

• 2. Fügen Sie das ngRoute-Modul als Abhängigkeitsmodul des Hauptanwendungsmoduls hinzu.

  angular.module('routingDemoApp',['ngRoute'])
  

• 3. Verwenden Sie die Direktive ngView.

  <div ng-view></div>

  Der HTML-Inhalt innerhalb dieses div ändert sich entsprechend den Routenänderungen.

• 4. Konfigurieren Sie $routeProvider. AngularJS $routeProvider wird verwendet, um Routingregeln zu definieren.

  module.config(['$routeProvider', function($routeProvider){
      $routeProvider
          .when('/',{template:'这是首页页面'})
          .when('/computers',{template:'这是电脑分类页面'})
          .when('/printers',{template:'这是打印机页面'})
          .otherwise({redirectTo:'/'});
  }]);
  

Die config-Funktion eines AngularJS-Moduls wird verwendet, um Routingregeln zu konfigurieren. Mithilfe der config-API lassen wir $routeProvider in unsere Konfigurationsfunktion injizieren und verwenden die $routeProvider.when-API, um unsere Routingregeln zu definieren.

$routeProvider stellt uns die Funktionen when(path,object) und otherwise(object) zur Verfügung, um alle Routen der Reihe nach zu definieren. Die Funktion when enthält zwei Parameter:

• Der erste Parameter ist eine URL oder eine URL-Regex-Regel.
• Der zweite Parameter ist das Routing-Konfigurationsobjekt.

---

Routing-Konfigurationsobjekt

AngularJS-Routing kann auch über verschiedene Templates implementiert werden.

Der erste Parameter der Funktion $routeProvider.when ist eine URL oder eine URL-Regex-Regel, und der zweite Parameter ist das Routing-Konfigurationsobjekt.

Die Syntaxregeln des Routing-Konfigurationsobjekts sind wie folgt:

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function oder  array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});

Parameter description:

• template:

  Wenn wir nur einfachen HTML-Inhalt in ng-view einfügen müssen, verwenden Sie diesen Parameter:

  .when('/computers',{template:'这是电脑分类页面'})

• templateUrl:

  Wenn wir nur eine HTML-Template-Datei in ng-view einfügen müssen, verwenden Sie diesen Parameter:

  $routeProvider.when('/computers', {
      templateUrl: 'views/computers.html',
  });
  

  Der obige Code ruft den Inhalt der Datei views/computers.html vom Server ab und fügt ihn in ng-view ein.

• controller:

  Funktion, String oder Array-Typ; die Controller-Funktion, die auf dem aktuellen Template ausgeführt wird und einen neuen Scope erzeugt.

• controllerAs:

  String-Typ; legt einen Alias für den Controller fest.

• redirectTo:

  Die Weiterleitungsadresse.

• resolve:

  Geben Sie andere Module an, von denen der aktuelle Controller abhängt.

Beispiel

Weitere Erweiterungen