Kernpunkte
$stateProvider -Objekt in views definieren, das den Namen der Ansicht und ihren Pfad zur Vorlage definiert. Eine unbenannte Ansicht zeigt auf den übergeordneten Zustand (als relative Benennung bezeichnet). Benannte Ansichten verwenden die @ -Syntax, um Komponenten in einen bestimmten Zustand zuzuordnen (als absolute Benennung genannt). präzise Schreiben, Modular Code ist eines der wichtigsten Konzepte in der Webentwicklung, insbesondere wenn Teams zusammenarbeiten, um hochkomplexe Anwendungen zu entwickeln. Das Angular -Framework soll erweiterte Anwendungen erstellen, die schnell sehr komplex werden können, was wiederum den modularen Code noch wichtiger macht. Angular UI -Router ist ein Tool, das Ihnen dabei helfen kann, dies zu erreichen, und es wurde entwickelt, um die verschiedenen Zustände Ihrer Webanwendung zu verwalten. Es gibt Ihnen die vollständige Kontrolle über jede seiner Ansichten im Vergleich zur nativen AngularJS -Routing -Implementierung.
Wenn Sie zuvor UI-Router verwendet haben, wissen Sie möglicherweise, wie Sie unter Verwendung einer Punktnotation untergeordnete Zustände innerhalb des Elternzustands definieren können. Möglicherweise wissen Sie jedoch nicht, wie die UI-Router-Bibliothek benannte Ansichten, die im Elternstaat verschachtelt sind. Das möchte ich heute erklären.
Ich werde Ihnen zeigen, wie UI-Router absolute Namen verwendet, um zu steuern, wo bestimmte Teile einer Webanwendung angezeigt werden. Auf diese Weise können Sie auf einfache Weise verschiedene Schnittstellenteile hinzufügen und entfernen, um modulare Anwendungen zu erstellen, die aus verschiedenen Komponenten bestehen. Insbesondere zeige ich Ihnen, wie Sie die Navigationsleiste, einige Körperinhalte und Fußzeile einem bestimmten Zustand abbilden. Wie immer ist der Code für dieses Tutorial in GitHub verfügbar, und Sie finden am Ende des Artikels auch eine Demo.
Anfänger
Nehmen Sie sich einen Moment Zeit, um die Dateien zu durchsuchen, aus denen diese Demo besteht (finden Sie im GitHub -Link oben). Sie können sehen, dass wir eine Index.html-Datei haben, in der wir eine AngularJS- und UI-Router-Bibliothek haben. In dieser Datei haben wir zwei UI-View-Anweisungen, in die wir unseren Inhalt einfügen werden. Als nächstes haben wir eine App.js -Datei, die den Code für unsere Winkelanwendung sowie ein Vorlagenverzeichnis enthält. Dieses Verzeichnis wird verwendet, um alle unsere unterschiedlichen Ansichten zu berücksichtigen. Obwohl dieser Ordner nicht erforderlich ist, liegt es absolut in Ihrem Interesse, eine Struktur beim Erstellen Ihrer Anwendung mit Angular zu verwenden. Wie Sie sehen können, füge ich einen Vermögensordner in den Ordner Vorlagen ein. Hier speichere ich gerne wiederverwendbare Komponenten: Header, Navigationsleiste, Fußzeile usw. Ich denke, Sie finden diese Konvention möglicherweise nützlich, da Ihr Code extrem modular ist.
UI-Router
Beginnen wir mit der Konfiguration unserer Anwendung. In unserer App.js-Datei müssen wir unserem Hauptwinkelmodul Abhängigkeiten zum UI-Router hinzufügen.
angular.module('app', ['ui.router'])
$stateProvider Nach Abschluss können wir das Konfigurationsobjekt der Anwendung weiterhin konfigurieren. Hier werden wir uns mit $urlRouterProvider und
$urlRouterProvider.otherwise() Als nächstes möchten wir die URL des Homepage -Status an $stateProvider übergeben, damit sie unsere Anwendung standardmäßig in diesen Zustand ordnet. Dann müssen wir $stateProvider verwenden, wobei wir uns im Rest dieses Tutorials befassen werden.
$stateProvider Folgendes ist, wie die Datei App.js zu diesem Zeitpunkt aussehen sollte. Nach Konfiguration des UrlrouterProviders verwenden wir
angular.module('app', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/'
});
}
]);
$stateProvider Jetzt, da Sie das Basis -Framework eingerichtet haben, müssen Sie ein views -Objekt in
Als nächstes müssen wir zunächst eine unbenannte Ansicht erstellen, die auf den übergeordneten Zustand hinweist - in diesem Fall zu Hause. Die templateUrl dieser unbenannten Ansicht verbindet die beiden grundlegend. Dies wird als relative Benennung bezeichnet und fordert Angular an, diese unbenannte Ansicht in <div ui-view=""> in unserer Index.html -Datei in
angular.module('app', ['ui.router'])Wie Sie sehen können, beschließt die unbenannte Ansicht auf main.html, die dem folgenden Code ähnlich sein sollte.
angular.module('app', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/'
});
}
]);
Die Main.html -Datei enthält drei benannte Ansichten - NAV, Body und Fußzeile. Damit diese Komponenten im Heimatzustand erscheinen können, müssen wir sie mit absoluter Benennung definieren. Insbesondere müssen wir die @ -Syntax verwenden, um AngularJS -Anwendungen zu ermitteln, dass diese Komponenten einem bestimmten Zustand zugeordnet werden sollten. Dies folgt der ViewName@Statename -Syntax und teilt unserer Anwendung mit, die benannte Ansichten aus absolut oder einen bestimmten Zustand verwenden sollen. Weitere Informationen zu relativen Namen im Vergleich zu absoluten Namen finden Sie hier.
Sie werden sehen, dass @home in unserem Konfigurationsobjekt verwendet wird, um sicherzustellen, dass Angular weiß, dass unsere benannte Ansicht in unseren Heimatzustand verweist. Wenn diese absoluten Namen nicht vorhanden sind, weiß die Anwendung nicht, wo diese benannten Ansichten finden sollen. Schauen Sie sich unten an und sehen Sie, wie die Anwendung geleitet werden soll.
angular.module('app', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
views: {
'': {
templateUrl: './templates/main.html'
},
}
});
}
]);(Codepen -Demonstration sollte hier eingefügt werden)
Warum das großartig ist
Wie ich bereits sagte, macht absolute Benennung Ihren Code extrem modular. In diesem Tutorial habe ich alle unsere Ansichten in den Vorlagenordner gesteckt. Sie können jedoch noch einen Schritt weiter gehen und Ordner für verschiedene Ansichten Ihrer Anwendung erstellen. Auf diese Weise können Sie Vorlagen in der gesamten Anwendung sowie in zukünftigen Projekten wiederverwenden! Die UI-Router-Bibliothek erleichtert die Verwendung verschiedener Komponenten einer Webanwendung sehr einfach, z. B. die Header und die Fußzeile einer bestimmten Ansicht. Dies erleichtert den Wiederverwenden von Code in verschiedenen Projekten und spart Ihnen sicherlich Zeit.
Schlussfolgerung
Sie können absolute Namen für komplexere, höhere Verschachtelung verwenden-dies ist nur ein Beispiel! Trotzdem hoffe ich, dass Sie ein tieferes Verständnis für einige der Dinge haben, die UI-Router erreichen können. In diesem Artikel von Antonio Morales erklärt er den Unterschied zwischen absoluter Benennung und relativer Benennung, Unterbrechung und anderen Aspekten der UI-Router-Bibliothek von Angular. Lassen Sie mich wie immer wissen, ob Sie Fragen zu diesem Tutorial haben. Ich würde sie gerne beantworten.
FAQs über das Schreiben modularer Code mit einem Winkel -UI -Router und mit dem Namen Ansichten
Winkel -UI -Router ist ein flexibles Routing -Gerüst für AngularJs, das Merkmale liefert, die nicht im Standard -Winkelrouter zu finden sind. Es ermöglicht verschachtelte Ansichten und mehrere benannte Ansichten, während der Standard -Angular -Router nur eine Ansicht pro URL unterstützt. Dies macht Angular UI-Router zu einem leistungsstarken Werkzeug zum Aufbau komplexer, groß angelegter Anwendungen.
Um Angular UI -Router einzurichten, müssen Sie zunächst das Skript an Angular UI -Router in die HTML -Datei aufnehmen. Dann müssen Sie "ui.router" als Modulabhängigkeit in Ihrer AngularJS -Anwendung hinzufügen. Danach können Sie Ihren Status mit $stateProvider konfigurieren und den Standardstatus mit $urlRouterProvider festlegen.
Die Namensansicht ist eine Funktion des Angular UI -Routers, mit dem Sie einer Ansicht einen Namen zuweisen können. Auf diese Weise können Sie mehrere Ansichten pro URL haben, was in komplexen Anwendungen sehr nützlich ist. Um eine benannte Ansicht zu verwenden, müssen Sie die Anweisung "Ui-View" in die HTML-Datei aufnehmen und ihm einen Namen zuweisen. Sie können dann diesen Namen in der Statuskonfiguration verweisen.
Sie können die Methode $state.go() verwenden, um zwischen den Zuständen im Winkel -UI -Router zu navigieren. Diese Methode nimmt den Namen des Status als Parameter an und nimmt optional das Parameterobjekt des Status als Parameter an. Sie können auch die UI-SREF-Direktive in einer HTML-Datei verwenden, um Links zu Staaten zu erstellen.
Sie können Parameter im Angular UI -Router an Zustände übergeben, indem Sie sie in die Statuskonfiguration aufnehmen. Sie können dann mit dem $stateParams -Dienst auf diese Parameter im Controller zugreifen.
Sie können die Ereignisse $stateChangeStart und $stateChangeSuccess verwenden, um Statusänderungen im Angular UI -Router zu verarbeiten. Diese Ereignisse werden auf $rootScope ausgestrahlt und können in Ihrem Controller angehört werden.
Sie können Daten vor dem Aktivieren des Status im Winkel -UI -Router unter Verwendung der Eigenschaft resolve in der Statuskonfiguration analysieren. Diese Eigenschaft ist ein Objekt, das Abhängigkeiten definiert, die vor dem Aktivieren des Staates analysiert werden müssen.
Sie können mit dem Ereignis $stateChangeError Fehler im Winkel -UI -Router verarbeiten. Diese Veranstaltung wird auf $rootScope ausgestrahlt und kann in Ihrem Controller angehört werden.
Sie können verschachtelte Ansichten im Angular UI-Router verwenden, indem Sie die Anweisung "UI-View" in die HTML-Datei aufnehmen und ihm einen Namen zuweisen. Sie können dann diesen Namen in der Statuskonfiguration verweisen.
Sie können mehrere benannte Ansichten im Angular UI-Router verwenden, indem Sie die Anweisung "UI-View" in die HTML-Datei aufnehmen und einen anderen Namen zuweisen. Sie können dann diese Namen in der Statuskonfiguration verweisen.
Das obige ist der detaillierte Inhalt vonSo schreiben Sie modularer Code mit angularem UI-Router und genannten Ansichten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Vorstellung von Dienstleistern mit kostengünstigen Cloud-Server-Preisen
Der Dateiname enthält illegalen Inhalt
Antivirus für Apple-Handys
Einführung in Standard-Tags in PHP
Welche Zeichensoftware gibt es?
WeChat-Momente, zwei Striche und ein Punkt
So ändern Sie Dateinamen stapelweise
So setzen Sie Chinesisch in Eclipse ein
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
