Prämisse
Zunächst müssen Sie Dreh- und Winkelroute auf der Seite einführen. Beachten Sie, dass Sie Angular vor Angular-Route einführen müssen.
<script src = "../../ bower_components/angular/angular.js"> </script>
<script src = "../../ bower_components/Angular-route/Angular-route.js"> </script>
Dies liegt hauptsächlich daran, dass Angular-Route.js in das Fenster übergeben muss. Angular Parameter, und dieser Parameter erscheint erst nach dem Laden des Winkels.
(Funktion (Fenster, Angular, undefiniert) {'Strict'; ... nGroutemodule.directive ('ngView', ngViewFactory); ...}) (Fenster, Fenster.angular);Sie können es auf der offiziellen Website herunterladen oder mit Bower installieren.
erklären
Die Routing-Funktion wird vom RouteProvider-Service und NG-View implementiert. NG-View entspricht der Bereitstellung des Mountspunkts der Seitenvorlage. Beim Umschalten der URL zum Springen werden verschiedene Seitenvorlagen an der Stelle der NG-View platziert. Anschließend wird RouteProvider verwendet, um die Routenzuordnung zu konfigurieren.
Im Allgemeinen gibt es zwei Methoden:
wenn (): Pfad und Parameter konfigurieren;
Andernfalls: Konfigurieren Sie andere Pfad -Sprünge, Sie können es als standardmäßig vorstellen.
Der zweite Parameter von Wann:
Controller: Die Controller -Funktion oder Name des entsprechenden Pfades
Controlleras: Geben Sie dem Controller einen Alias -Namen
Vorlage: Die Seitenvorlage, die dem Pfad entspricht, wird bei NG-View angezeigt, z.
Templateurl: Der Pfad, der der Vorlage entspricht, wie "src/xxx.html"
Resolve: Dieser Parameter konzentriert sich auf die Tatsache, dass diese Eigenschaft Dienste oder Werte an den Routen-Controller in Form eines Schlüsselwertepaarobjekts verbindet. Dann wird der Ausführungsergebniswert oder die entsprechende Dienstreferenz in den Controller injiziert. Wenn Resolve ein vielversprechendes Objekt ist, wird es warten, bis es erfolgreich ausgeführt wird, bevor es in den Controller injiziert wird. Zu diesem Zeitpunkt wartet der Controller auf das Ausführungsergebnis zu Auflösung.
Ausführliche Beispiele finden Sie unter folgenden Beispiele.
recirectto: redirect adresse
RELOADONSEARCH: Legen Sie fest, ob die entsprechende Vorlage nur dann geladen wird, wenn die Adresse geändert wird. Weder die Suche noch Parameter werden geladen.
Caseinsensitivematch: Pfad ist fallsempfindlich
Es gibt mehrere häufig verwendete Ereignisse zum Routing:
$ routechangEntart: Dieses Ereignis wird ausgelöst, bevor die Route springt
$ routechangesuccess: Dieses Ereignis wird ausgelöst, nachdem der Routensprung erfolgreich ist
$ routechangeError: Dieses Ereignis wird abgefeuert, nachdem der Streckensprung fehlgeschlagen ist
verwenden
Schreiben Sie auf der Seite den Schaltflächenlink zum URL-Sprung und zum NG-View-Tag
<div ng-controller = "myctrl"> <ul> <li> <a href = "#/a"> klicken Sie auf A </a> </li> <li> <a href = "#/b"> klicken b </a> </li> </ul> <ng-view> </ng-view> <!
Unter ihnen kann NG-View als Element oder Etikett usw. angesehen werden.
Verwandte Konfigurationen, die in JavaScript definiert werden müssen
<script type = "text/javaScript"> angular.module ("myapp", ["nGroute"]) .controller ("acontroller", function ($ scope, $ route) {$ scope.hello = "Hallo, A!"}) .Controller ("bontroller", {$ scope) {$ scope. .Controller ("myctrl", function ($ scope, $ location) {$ scope. console.log ("Route Change Start!"); }) .config (Funktion ($ routeProvider, $ locationProvider) {$ routeProvider .When ('/a', {templateurl: 'a.html', Controller: 'Acontroller'}) .Wen ('/b', {templateurl: b.html ', controller: controller: bontroller', bontroller ', {I. {I. - controller: controller:' bontroller ', {I. {I. WILLER ARGESTELLUNG A. Funktion ($ q, $ timeout) {var delay = $ q.defer (); </script>Im obigen Code ist die Auflösung im /B -Pfad einer Verzögerungsmethode zugeordnet. Diese Methode gibt das Versprechensobjekt zurück und wird das Ergebnis erst nach 3 Sekunden zurückgeben. Daher wird die B -Seite nach 3 Sekunden nicht erfolgreich geladen.
Zwei weitere HTML sind erforderlich:
A.html:
<div ng-controller = "acontroller" style = "height: 500px; Breite: 100%; Hintergrundfarbe: grün;"> {{Hallo}} </div>
Und B.html:
<div ng-controller = "bcontroller" style = "height: 2500px; Breite: 100%; Hintergrundfarbe: Blau;"> {{Hallo}} </div>
Auf diese Weise kann der Routensprung erreicht werden.
Alle Codes können verwiesen werden:
<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> <body> <div ng-controller = "myctrl"> <ul> <li> <a href = "#/a"> klicken a </a> <li> <a href =#/b " <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", Funktion ($ scope) {$ scope.hello = "Hallo, B!";}) .Controller ("myctrl", function ($ scope, $ location) {$ scope. $ scope. }) .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: Funktion ($ q, $ timeout) {var delay = $ q.defer (); </script> </body> </html>Das obige Informationen ist die Informationen, die AngularJs Ng-Route-Routing-Informationen aussortieren. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!