So schreiben Sie modularer Code mit angularem UI-Router und genannten Ansichten

Kernpunkte

• Angular UI -Router ist ein leistungsstarkes Tool zum Verwalten verschiedener Zustände in komplexen Webanwendungen und bietet mehr Kontrolle über jede Ansicht als native AngularJS -Routing -Implementierungen. Es verwendet Punktnotation, um untergeordnete Zustände innerhalb des übergeordneten Zustands zu definieren und absolute Namen zu steuern, wo bestimmte Teile der Webanwendung angezeigt werden, wodurch das modulare Anwendungsdesign aktiviert wird.
Mit
• UI -Router können Entwickler ein $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).
• absolute Benennung macht den Code extrem modular und ermöglicht es Entwicklern, Vorlagen während ihrer Anwendung oder in zukünftigen Projekten wiederzuverwenden. Es vereinfacht auch die Möglichkeit, verschiedene Komponenten einer Webanwendung wie Header und Fußzeilen zu verwenden und so Zeit und Mühe zu sparen.

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

ui-router addieren

Abhängigkeiten hinzufügen

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'])

Konfigurieren Sie unsere Route

$stateProvider Nach Abschluss können wir das Konfigurationsobjekt der Anwendung weiterhin konfigurieren. Hier werden wir uns mit $urlRouterProvider und

befassen, daher müssen wir sie in unsere Konfigurationsobjekte einbringen, um sie zu verwenden.

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

ist ein Tool, das von UI-Router bereitgestellt wird, damit Entwickler beim Routing-Anwendungen verwenden können. Der Status entspricht der "Position" der gesamten UI- und Navigationsaspekte in der Anwendung. Der Status beschreibt die Benutzeroberfläche an diesem Ort und seine Funktionalität. Es funktioniert genauso wie NGroute RouteProvider verwendet.

$stateProvider Folgendes ist, wie die Datei App.js zu diesem Zeitpunkt aussehen sollte. Nach Konfiguration des UrlrouterProviders verwenden wir

, um verschiedene Zustände der Anwendung zu definieren. In diesem Beispiel definieren wir einen Zustand namens Home und konfigurieren nur die URL.

angular.module('app', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
      .state('home', {
        url: '/'
      });
    }
  ]);

Ansichten Objekt

$stateProvider Jetzt, da Sie das Basis -Framework eingerichtet haben, müssen Sie ein views -Objekt in

definieren. Es sollte der URL im Heimatstaat folgen. In diesem Objekt definieren wir die Namen der Ansichten und deren Vorlagenpfade. Hier können Sie auch Dinge wie Controller definieren.

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 einzufügen. Ihr Code sollte nun die App.js unten kopieren. <pre class='brush:php;toolbar:false;'>angular.module('app', ['ui.router'])</pre> <p> </p> Wie Sie sehen können, beschließt die unbenannte Ansicht auf main.html, die dem folgenden Code ähnlich sein sollte. <pre class='brush:php;toolbar:false;'>angular.module('app', ['ui.router']) .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider .state('home', { url: '/' }); } ]);</pre> <p> 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 <code>@ -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

Was ist der Winkel -UI -Router und wie unterscheidet es sich vom Standard -Angular -Router?

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.

Wie kann ich in meinem Projekt einen Winkel -UI -Router einrichten?

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.

Wie heißt Ansichten im Winkel -UI -Router und wie benutzt man sie?

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.

Wie navigieren Sie zwischen Zuständen im Winkel -UI -Router?

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.

Wie übergeben Sie Parameter an Zustände im Winkel -UI -Router?

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.

Wie kann man mit staatlichen Veränderungen im Winkel -UI -Router umgehen?

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.

Wie können Daten vor dem Aktivieren von Status im Winkel -UI -Router analysiert 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.

Wie kann man mit Fehlern im Winkel -UI -Router umgehen?

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.

Wie kann man verschachtelte Ansichten im Winkel -UI -Router verwenden?

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.

Wie verwendet ich mehrere benannte Ansichten im Winkel -UI -Router?

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.