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.
<!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.
'use strict';
angular.module("helloSolarSystem", ['peopleList', 'peopleDetail', 'hello','ui.router']).
config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('helloState', {
url: '/helloState',
template:'<hello></hello>'
}).state('aboutState', {
url: '/about',
template: '<h4>Its the UI-Router Hello Solar System app!</h4>'
}).state('peopleState', {
url: '/peopleList',
template:'<people-list></people-list>'
}).state('peopleState.details', {
url:'/detail/:id',
template: '<people-detail></people-detail>'
})
}
]);(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)
'use strict';
//根据条件（参数）查找信息。
angular.module('people.checkPeople', ['ui.router']).
factory('CheckPeople', ['$http', function ($http) {
return {
getData: getData
};
function getData(filed) {
var people;
var promise = $http({
method: 'GET',
url: './data/people.json'
}).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
"use strict";
angular.module("getStateParams", ['ui.router']).
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
'use strict';
angular.module("hello", [])
.component('hello', {
templateUrl: './components/hello/hello.template.html',
controller: ["$scope",
function HelloController($scope) {
$scope.hideFirstContent = false;
$scope.ctlButton = function () {
this.hideFirstContent = !this.hideFirstContent;
};
}
]
});(1 ) Die
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><🎜 anzuzeigen >
6. PeopleDetail-Modul implementierenpeopleDetail.template.html'use strict';
angular.module("peopleList", ['people.checkPeople'])
.component('peopleList', {
templateUrl: './components/people-list/people-list.template.html',
controller: ['CheckPeople','$scope',
function PeopleListController(CheckPeople, $scope) {
$scope.people = [];
CheckPeople.getData().then(function(data){
$scope.people = data;
});
}
]
});<ul ng-repeat="item in peopleDetails track by $index">
<li>名字： {{item.name}}</li>
<li>介绍： {{item.intro}}</li>
</ul>'use strict';
angular.module("peopleDetail", ['people.checkPeople', 'getStateParams'])
.component('peopleDetail', {
templateUrl: './components/people-detail/people-detail.template.html',
controller: ['CheckPeople', 'GetStateParams', '$scope',
function peopleDetailController(CheckPeople, GetStateParams, $scope) {
$scope.peopleDetails = [];
CheckPeople.getData(GetStateParams.getParams()).then(function(data){
$scope.peopleDetails = data;
});
}
]
});
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
