Heim > Artikel > Web-Frontend > AngularJS verwendet UI-Route, um mehrschichtiges verschachteltes Routing zu implementieren

AngularJS verwendet UI-Route, um mehrschichtiges verschachteltes Routing zu implementieren

小云云Original: 2018-01-11 13:13:332062Durchsuche

In diesem Artikel wird hauptsächlich das Beispiel von AngularJS vorgestellt, das UI-Route verwendet, um mehrschichtiges verschachteltes Routing zu implementieren. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Erwartete Ergebnisse:

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

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

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

1. Service:

(1) Personendaten checkPeople.service gemäß den Bedingungen abfragen. Wenn keine Bedingungen angegeben sind, fragen Sie alle ab.

(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. Importieren Sie die Dateien in lib und alle verwendeten Dienst- und Komponentendienstdateien.

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

(3) Ansicht definieren5643c5c8ec46989a1440c123e54787f3142226fc0f7a4611fbee3f36258ad78a

<!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>

2. Routing app.config.js konfigurieren

(1) Modulname: 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 5643c5c8ec46989a1440c123e54787f3142226fc0f7a4611fbee3f36258ad78a angezeigte Inhalt ist der von der 5d31ad12eb7f2467fa10436b397d69f6ce2196d7bcfa28427152ee3efb4b3e34

&#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;
    })
  }
]);

(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

(1 ) In der getData-Funktion möchten wir ein Array zurückgeben, das Personeninformationen speichert. Bei Verwendung des Dienstes $http().then() handelt es sich jedoch um eine asynchrone Anfrage. Wir wissen nicht, wann die Anfrage endet Die Welt kehrt zurück. Mit dem Personen-Array stimmt etwas nicht. 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

&#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;
    }
  }]);

(1) hier Die Funktion getParams gibt die letzten Daten der Routing-Informationen zurück, bei denen es sich um die Personen-ID handelt. Dieser Dienst ist etwas speziell und nicht universell genug. Möglicherweise muss er optimiert werden, um sinnvoller zu sein. Aber es hat keinen Einfluss auf unsere Bedürfnisse.

4. Implementieren Sie das Hallo-Modul

hello.template.html

"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];
    }
}]);

hello.component.js

<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>

5. PeopleList-Modul implementieren:

peopleList.template.html

&#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;
        };
      }
    ]
  });

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

peopleList.component.js

<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>

6. PeopleDetail-Modul implementieren

peopleDetail.template.html

&#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;
        });
      }
    ]
  });

peopleDetail.component.js

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

7. Quellcode: https://github.com/liyuan-meng/uiRouter-app

Verwandte Empfehlungen:

&#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;
        });
      }
    ]
  });

Beispielcode für das Routing der Ui-Router-Modulnutzung in AngularJS

Eine kurze Analyse der UI-Router- und NG-Grid-Module in AngularJS

ui -Verwendung von router_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonAngularJS verwendet UI-Route, um mehrschichtiges verschachteltes Routing zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html angular JS function 对象 promise 异步 github http https ui

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：Detaillierte Erläuterung der Nginx-Geschwindigkeitsbegrenzung für die VerbindungsanzahlNächster Artikel：Detaillierte Erläuterung der Nginx-Geschwindigkeitsbegrenzung für die Verbindungsanzahl

In Verbindung stehende Artikel

Mehr sehen