Verwenden von ui-route zur Implementierung von mehrschichtigem verschachteltem Routing in AngularJS (ausführliches Tutorial)-js-Tutorial-php.cn

In diesem Artikel wird hauptsächlich das Beispiel von AngularJS vorgestellt, das UI-Route verwendet, um mehrschichtiges verschachteltes Routing zu implementieren. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

In diesem Artikel wird ein Beispiel für die Verwendung von UI-Route zur Implementierung von mehrschichtigem verschachteltem Routing vorgestellt. Die Details lauten wie folgt:

1 . Erwarteter Implementierungseffekt:

https://liyuan-meng.github.io/uiRouter-app/index.html

(Projektadresse: https://github.com /liyuan-meng/uiRouter-app)

2. Analysieren Sie die Frageanforderungen, geben Sie Abhängigkeiten an und erstellen Sie das Projekt

1. Service:

(1) Abfragen der PersonendatenprüfungPersonen basierend auf den Bedingungen des Dienstes. Wenn keine Bedingungen angegeben sind, werden alle abgefragt.

(2) Routing-Informationen abrufen getStateParams.service.

2. Komponenten:

(1) Hallo-Modul: Klicken Sie auf die Schaltfläche, um den Inhalt zu ändern.

(2) peopleList-Modul: Zeigt die Personenliste an. Klicken Sie auf Personen, um Personendetails anzuzeigen. Hängt vom checkPeople.service-Modul ab.

(3) peopleDetail-Modul: Zeigt Personendetails an und basiert auf den Modulen checkPeople.service und getStateParams.service.

3. Erstellen Sie das Projekt:

Wie in der Abbildung gezeigt: Das Komponentenverzeichnis wird zum Speichern aller Servicemodule und Geschäftsmodule sowie der Bibliothek verwendet Das Verzeichnis speichert externe Referenzen (ich verwende Angular.js1.5.8 und ui-route0.2.18), die Datei app.config.js wird zum Konfigurieren des Routings verwendet und index.html wird als Eintragsdatei verwendet.

3. Implementieren Sie dieses Beispiel

1. Home index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="./lib/angular.js"></script>
  <script src="./lib/angular-ui-route.js"></script>
  <script src="./app.config.js"></script>
  <script src="./components/core/people/checkPeople.service.js"></script>
  <script src="./components/core/people/getStateParams.service.js"></script>
  <script src="./components/hello/hello.component.js"></script>
  <script src="./components/people-list/people-list.component.js"></script>
  <script src="./components/people-detail/people-detail.component.js"></script>
</head>
<body ng-app="helloSolarSystem">
<p>
  <a ui-sref="helloState">Hello</a>
  <a ui-sref="aboutState">About</a>
  <a ui-sref="peopleState">People</a>
</p>

<ui-view></ui-view>

</body>
</html>

Nach dem Login kopieren

(1) Importieren Sie die Dateien in lib und alle verwendeten Dienste und Komponenten Servicedateien.

(2) ng-app="helloSolarSystem" gibt an, dass die Analyse vom helloSolarSystem-Modul aus beginnt.

(3) Ansicht definieren

2. Routing app.config.js

&#39;use strict&#39;;

angular.module("helloSolarSystem", [&#39;peopleList&#39;, &#39;peopleDetail&#39;, &#39;hello&#39;,&#39;ui.router&#39;]).

  config([&#39;$stateProvider&#39;, function ($stateProvider) {

    $stateProvider.state(&#39;helloState&#39;, {
      url: &#39;/helloState&#39;,
      template:&#39;<hello></hello>&#39;

    }).state(&#39;aboutState&#39;, {
      url: &#39;/about&#39;,
      template: &#39;<h4>Its the UI-Router Hello Solar System app!</h4>&#39;

    }).state(&#39;peopleState&#39;, {
      url: &#39;/peopleList&#39;,
      template:&#39;<people-list></people-list>&#39;

    }).state(&#39;peopleState.details&#39;, {
      url:&#39;/detail/:id&#39;,
      template: &#39;<people-detail></people-detail>&#39;
    })
  }
]);

Nach dem Login kopieren

(1) Modulname konfigurieren : helloSolarSystem;

(2) Fügen Sie die Module „peopleList“, „peopleDetail“, „hello“ und „ui.router“ ein.

(3) Konfigurieren Sie die Ansichtssteuerung des StateProvider-Dienstes, beispielsweise den ersten Ansichtscontroller mit dem Namen helloState: Wenn ui-sref == „helloState“ ist, wird die Route auf den Wert der URL #/helloState aktualisiert , Und der in angezeigte Inhalt ist der von der

(4) Implementierung von verschachteltem Routing: Der View-Controller namens peopleState ist die übergeordnete Route. Der View-Controller namens peopleState.details ist eine untergeordnete Route. Dies ist eine relative Routing-Methode. Die übergeordnete Route entspricht .../index.html#/peopleState/, und die untergeordnete Route entspricht .../index.html#/peopleState/detail/x (x ist /detail/). :id der Wert von id in ). Wenn Sie es auf absolutes Routing ändern, müssen Sie nur url:'^/detail/:id' schreiben, dann stimmt die Unterroute mit .../index.html#/detail/x überein (x ist in /detail/ :id) ID-Wert).

4. CheckPeople.service implementieren (Personen anhand von Bedingungen finden)

checkPeople.sercice.js

&#39;use strict&#39;;

//根据条件（参数）查找信息。
angular.module(&#39;people.checkPeople&#39;, [&#39;ui.router&#39;]).
  factory(&#39;CheckPeople&#39;, [&#39;$http&#39;, function ($http) {
    return {
      getData: getData
    };
    function getData(filed) {
      var people;
      var promise = $http({
        method: &#39;GET&#39;,
        url: &#39;./data/people.json&#39;
      }).then(function (response) {
        if (filed) {
          people = response.data.filter(function (value) {
            if (Number(value.id) === Number(filed)) {
              return value;
            }
          })
        } else {
          people = response.data;
        }
        return people;
      });
      return promise;
    }
  }]);

Nach dem Login kopieren

(1) In der getData-Funktion möchten wir a zurückgeben Ein Array, das Personeninformationen speichert, aber da es sich bei Verwendung des Dienstes $http().then() um eine asynchrone Anfrage handelt und wir nicht wissen, wann die Anfrage endet, gibt es ein Problem mit der Welt, die zurückgibt Menschen-Array. Wir haben festgestellt, dass $http().then() ein Promise-Objekt ist, daher können wir uns vorstellen, dieses Objekt direkt zurückzugeben, damit wir „result of function.then(function(data))“ verwenden können, um die asynchrone Anfrage zu erhalten kommende Daten Daten.

3. Implementieren Sie getStateParams.service (Routing-Informationen abrufen)

getStatePatams.service.js

"use strict";

angular.module("getStateParams", [&#39;ui.router&#39;]).
  factory("GetStateParams", ["$location", function ($location) {
    return {
      getParams: getParams
    };
    function getParams() {
      var partUrlArr = $location.url().split("/");
      return partUrlArr[partUrlArr.length-1];
    }
}]);

Nach dem Login kopieren

(1) Die Funktion getParams gibt hier die letzte Routing-Information zurück Daten, also Personen-IDs, sind etwas Besonderes und nicht universell genug. Möglicherweise muss sie optimiert werden, um sie sinnvoller zu gestalten. Aber es hat keinen Einfluss auf unsere Bedürfnisse.

4. Implementieren Sie das Hello-Modul

hello.template.html

<p>
  <p ng-hide="hideFirstContent">hello solar sytem!</p>
  <p ng-hide="!hideFirstContent">whats up solar sytem!</p>
  <button ng-click="ctlButton()">click</button>
</p>

Nach dem Login kopieren

hello.component.js

&#39;use strict&#39;;

angular.module("hello", [])
  .component(&#39;hello&#39;, {
    templateUrl: &#39;./components/hello/hello.template.html&#39;,
    controller: ["$scope", 
      function HelloController($scope) {
        $scope.hideFirstContent = false;
        $scope.ctlButton = function () {
          this.hideFirstContent = !this.hideFirstContent;
        };
      }
    ]
  });

Nach dem Login kopieren

5. Implementieren Sie das peopleeList-Modul:

peopleList.template.html

<p>
  <ul>
    <a ng-repeat="item in people" ui-sref="peopleState.details({id:item.id})">
      <li>{{item.name}}</li>
    </a>
  </ul>
  <ui-view></ui-view>
</p>

Nach dem Login kopieren

(1) Die wird hier verwendet, um die Unterkomponente pepleDetail

peopleList anzuzeigen. Komponente von peopleList .js

&#39;use strict&#39;;

angular.module("peopleList", [&#39;people.checkPeople&#39;])
  .component(&#39;peopleList&#39;, {
    templateUrl: &#39;./components/people-list/people-list.template.html&#39;,
    controller: [&#39;CheckPeople&#39;,&#39;$scope&#39;,
      function PeopleListController(CheckPeople, $scope) {
        $scope.people = [];
        CheckPeople.getData().then(function(data){
          $scope.people = data;
        });
      }
    ]
  });

Nach dem Login kopieren

6. PeopleDetail-Modul implementieren

peopleDetail.template.html

<ul ng-repeat="item in peopleDetails track by $index">
  <li>名字： {{item.name}}</li>
  <li>介绍： {{item.intro}}</li>
</ul>

Nach dem Login kopieren

peopleDetail.component.js

&#39;use strict&#39;;

angular.module("peopleDetail", [&#39;people.checkPeople&#39;, &#39;getStateParams&#39;])
  .component(&#39;peopleDetail&#39;, {
    templateUrl: &#39;./components/people-detail/people-detail.template.html&#39;,
    controller: [&#39;CheckPeople&#39;, &#39;GetStateParams&#39;, &#39;$scope&#39;,
      function peopleDetailController(CheckPeople, GetStateParams, $scope) {
        $scope.peopleDetails = [];
        CheckPeople.getData(GetStateParams.getParams()).then(function(data){
          $scope.peopleDetails = data;
        });
      }
    ]
  });

Nach dem Login kopieren

Das Obige ist Was ich für alle zusammengestellt habe Ja, ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die entsprechende Rückruffunktion nach dem Laden mithilfe eines JS-Skripts

So verwenden Sie vue+webpack zum Lösen das Problem mit der leeren Seite der gepackten Datei 404

So implementieren Sie Debugging und unabhängige Verpackungskonfigurationsdateien über das Webpack-Projekt (ausführliches Tutorial)

Durch die vue-cli+webpack-Projekt So ändern Sie den Projektnamen

So implementieren Sie die globale Registrierung und die lokale Registrierung

in der Vue-Komponente

Das obige ist der detaillierte Inhalt vonVerwenden von ui-route zur Implementierung von mehrschichtigem verschachteltem Routing in AngularJS (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!