Erklären Sie kurz die Definition und Verwendung von AngularJS Routing_AngularJS

Bei Einzelseitenanwendungen ist das Wechseln zwischen Ansichten besonders wichtig. Da Anwendungen immer komplexer werden, benötigen wir eine Methode, um genau zu steuern, wann und welche Seite dem Benutzer angezeigt werden soll.

Wir können den Wechsel zwischen verschiedenen Seiten unterstützen, indem wir unterschiedliche Vorlagen in die Hauptseite einführen. Der Nachteil dabei ist jedoch, dass immer mehr eingebettete Codes die Verwaltung letztendlich erschweren.

Wir können viele Vorlagen über die ng-include-Direktive in die Ansicht integrieren, aber wir haben eine bessere Möglichkeit, mit dieser Situation umzugehen. Wir können die Ansicht in Layout- und Vorlagenansichten aufteilen und diese dann entsprechend der spezifischen Benutzerzugriffs-URL aufteilen um die gewünschte Ansicht anzuzeigen

Wir können diese „Teile“ in einer Layoutvorlage zusammenfügen

AngularJS implementiert die obige Idee, indem es Routen auf $routeProvider (Anbieter des $route-Dienstes) deklariert

Mit $routeProvider können wir die Browserverlauf-API besser nutzen und Benutzern ermöglichen, den aktuellen Pfad als Lesezeichen für die zukünftige Verwendung zu speichern

Um das Routing in unserer Anwendung einzurichten, müssen wir zwei Dinge tun: Zuerst müssen wir angeben, wo wir die Layoutvorlage speichern und wo der neue Seiteninhalt gespeichert wird. Wenn wir beispielsweise allen Seiten Kopf- und Fußzeilen hinzufügen möchten, können wir die Layoutvorlage wie folgt gestalten:

<header>
 <h1>Header</h1>
</header>
<div class="content">
 <div ng-view></div>
</div>
<footer>
 <h5>Footer</h5>
</footer>

Die ng-view-Direktive verwendet den Hochgeschwindigkeits-$routeProvider zum Rendern der Vorlage

Zweitens müssen wir unsere Routing-Informationen konfigurieren, wir werden $routeProvider in der Anwendung konfigurieren

$routeProvider bietet zwei Methoden zur Handhabung des Routings: wann und sonst. Wenn die Methode zwei Parameter empfängt, ist der erste $location.path() (die direkte Verwendung von „//“ ist kein Problem)

Definition
Es ist sehr einfach, Routen zu definieren, indem Sie einfach die ngRoute-Abhängigkeit in unser Anwendungshauptmodul einfügen

angular.module('myApp', ['ngRoute'])
 .config(function($routeProvider) {});

Jetzt können wir Routen für die Anwendung definieren. $routeProvider wird in die .config()-Methode im Routing-Modul eingefügt. Der obige Code zeigt uns zwei Methoden zum Definieren von Routen.

when()

Die when()-Methode hat zwei Parameter, die Browser-URL, die wir abgleichen möchten, und das Routing-Operationsobjekt. Im Allgemeinen wird die Hauptroute häufig durch „/“ dargestellt, und URL-Parameter können auch definiert werden. Im Controller wird $routeParams verwendet, um die URL-Parameter abzurufen.

templateUrl: Vorlage anzeigen, die den Routensprung darstellt

Controller: Controller

angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
   $routeProvider
    .when('/', {
     templateUrl: 'views/main.html',
     controller: 'MainCtrl'
    })
    .when('/day/:id', {
     templateUrl: 'views/day.html',
     controller: 'DayCtrl'
    })

sonst()

otherwise() definiert die Route, zu der gesprungen werden soll, wenn die Anwendung die angegebene Route nicht finden kann

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
  .when('/', {
   templateUrl: 'views/main.html',
   controller: 'MainCtrl'
  })
  .when('/day/:id', {
   templateUrl: 'views/day.html',
   controller: 'DayCtrl'
  })
  .otherwise({
   redirectTo: '/'
  });
})

Verwenden Sie
Wie verwende ich die definierte Route? Wir müssen Angular mitteilen, welchen Teil der Seite wir konvertieren möchten, was die Verwendung der ng-view-Direktive erfordert

<div class="header">My page</div>
<div ng-view></div>
<span class="footer">A footer</span>

Auf diese Weise wird nur

aktualisiert und die Kopf-/Fußzeile bleibt immer unverändert