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.

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

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.

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!