Heim > Artikel > Web-Frontend > So wählen Sie die Route für angle.js aus

So wählen Sie die Route für angle.js aus

高洛峰Original: 2017-02-06 11:41:561478Durchsuche

Auf einer einzelnen Seite können wir mehrere Module hinzufügen, sodass die Webseite dieses Modul nur bei Bedarf lädt. Das Umschalten von Modulen kann das Umschalten von Webseiten in etwa ersetzen. Daher können wir das Umschalten von Webseiten durch Modulumschaltung realisieren.

Auf den ersten Blick erscheint es sehr gewöhnlich, aber wenn Sie sorgfältig darüber nachdenken, können Sie feststellen, dass diese Idee viele Ressourcen lösen kann.

Wenn es beispielsweise eine Seite gibt, auf der Informationen zu 1.000 Produkten angezeigt werden müssen und jedes Produkt eine andere Ausdrucksform hat (vorausgesetzt, es verfügt über ein eigenes unabhängiges CSS und JS), dann benötigen wir im Allgemeinen Folgendes Bereiten Sie 1.000 Webseiten vor, um diese Informationen zu laden. Mit dieser modularen Idee können wir jedoch einfach 1.000 verschiedene Module im Hintergrund einrichten und dann bei Bedarf die entsprechenden Module der benötigten Produkte auf eine einzelne Seite laden.

Um die oben eingeführten Funktionen zu erreichen, müssen Sie die Routing-Funktion verwenden.

Hauptidee:

Einrichten mehrerer unabhängiger Module im Hintergrund

2. Extrahieren durch Routing als benötigt Das Modul muss auf der Homepage geladen werden

4 Während des Ladens andere Module ausblenden.

Wie viel Aufwand ist also erforderlich, um das Routing-Modul einzurichten? Tatsächlich ist es überraschend einfach:

Schreiben Sie zunächst den entsprechenden Code auf die Hauptseite:

55efc87653a0016330b9eaa14089c1747a91cead4d31023d90a4b7b2272b3235 Der Ansichtsbereich. Erst wenn dieses Tag geschrieben wird, wird das Routing-Ereignis ausgelöst:

Alles andere ist Dekoration, schauen Sie sich einfach Zeile 24 an.

<html ng-app="myTodo"><head>
    <meta charset="utf-8">
    <title>angularjs • TodoMVC</title>
    <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
    <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
    <style>
      .pagination {
        overflow: hidden;
        padding: 20px;
      }
      .pagination ul li {
        width: 60px;
        height: 30px;
        line-height: 30px;
        border:1px solid black;
        float: left;
        list-style-type: none;
        margin-right: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <ng-view></ng-view> <!-- 路由区域，视图区域-->
    <footer id="info">
      <p>Double-click to edit a todo</p>
      <p>Created by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    </footer>
     
    <script src="node_modules/angular/angular.js"></script>
    <script src="node_modules/angular-route/angular-route.js"></script>
    <script src="js/app.js"></script>
   
 
</body>
</html>

Im Routing-Bereich und im Ansichtsbereich können wir Inhalte hinzufügen – sogar eine Webseite hinzufügen.

Als nächstes schauen Sie sich bitte die entsprechende app.js an.

Wenn Sie nur Routing verwenden, reicht der obige Code aus. Es wird garantiert:

var app = angular.module("myTodo", [&#39;ngRoute&#39;]);
//路由的配置：
app.config(function($routeProvider) {
 var routeconfig = {
    templateUrl: "body.html",
    controller: "myTodoCtrl"
    /*controller: &#39;myTodoCtrl&#39;*/
  }
 
  var ohter_config = {
    templateUrl: "other.html"
  }
 
  $routeProvider.
   when("",routeconfig).
   //status ： 它对应我们页面的hash: all completed active
   //路由规则的优先级按写法的顺序所决定的
   when("/other", ohter_config).
   when("/:aaa", routeconfig ).
   otherwise( { redirectTo: "/all" });
});
app.controller("myTodoCtrl", function($scope, $routeParams, $filter){
    console.log($routeParams);
   
});

1. Wenn die Seite auf der Startseite oder an anderen seltsamen Orten bleibt, springt sie automatisch zu

/all

.0.1:8020/finishAngularJS-mark2/index.html#/all

Achten Sie einfach darauf, was nach dem Index kommt.

2. Wenn die Seitensprungrichtung /other ist, springen Sie zu

http://127.0.0.1:8020/finishAngularJS-mark2/iother.html

3. Wenn ein bestimmter Sprung auftritt (die drei hier angegebenen Sprünge sind /active, /complete/all), wird auch zur entsprechenden Seite gesprungen, dies ist jedoch ein Sprung unter dem Index——

http:// 127.0.0.1:8020/finishAngularJS-mark2/index.html#/active

http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/ all

http: //127.0.0.1:8020/finishAngularJS-mark2/index.html#/complete

[Eines ist besonders zu beachten: Außer 2 wird diese Seite verlassen, andere springen Es wird in der angegebenen Ansicht angezeigt Bereich und Routing-Bereich, und der Inhalt der Hauptwebseite wird geladen. 】

Als nächstes erklären wir das Prinzip:

app.config(function($routeProvider)

Dies ist der Code, der zum Festlegen der Route verwendet wird, schreiben Sie ihn einfach direkt

Dies sind zwei Sprünge, templateUrl, das heißt, die Vorlage ist body.html. Der zweite Parameter ist Ein Controller, der Name lautet - myTodoCtrl.

var routeconfig = {
    templateUrl: "body.html",
    controller: "myTodoCtrl"
    /*controller: &#39;myTodoCtrl&#39;*/
  }
 
  var ohter_config = {
    templateUrl: "other.html"
  }

Dieser Code wird zur Beurteilung verwendet, wenn der Der Hash-Wert ist „“, das heißt, der zweite Satz ist leer, führen Sie routeconfig aus

Wenn der Hash-Wert „/other“ ist, also in der fünften Runde, führen Sie other_config aus

$routeProvider.
   when("",routeconfig).
   //status ： 它对应我们页面的hash: all completed active
   //路由规则的优先级按写法的顺序所决定的
   when("/other", ohter_config).
   when("/:aaa", routeconfig ).
   otherwise( { redirectTo: "/all" });
});

Wann Der Hashwert ist eine spezielle Variable, der Name der Variablen ist aaa und der Wert ist X (X kann ein beliebiger definierter Zeiger sein, hier ist alles, vollständig, aktiv), also „/aktiv“, „/vollständig“, „/all“, routeconfig ausführen

Wenn der Hash-Wert in anderen Fällen lautet, wird der Standardsprung durchgeführt. Wenn der Hash-Wert „/all“ ist, erhalten wir den Hash-Wert, führen das folgende Objekt aus und nehmen es heraus Fügen Sie die Vorlage des Objekts zur Homepage hinzu, starten Sie den Controller und die gesamte Route ist abgeschlossen.

Das Obige ist hoffentlich der gesamte Inhalt der vom Editor bereitgestellten Route Es wird Ihnen hilfreich sein. Bitte unterstützen Sie die chinesische PHP-Website ~

Weitere Artikel zu den Routenauswahlmethoden von angle.j finden Sie auf der chinesischen PHP-Website

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Teilen von Vue.js-LernbeispielenNächster Artikel：Teilen von Vue.js-Lernbeispielen

In Verbindung stehende Artikel

Mehr sehen