Eine Anleitung zum Gebäuden von Quality Angular 1.5 Komponenten

Schlüsselpunkte

• Komponentenisolierung: Minimiert die Kopplung, verbessert die Kapselung, behält die interne Logik privat bei und steuert die Interaktion mit anderen Komponenten.
• Komponentenfokus: Jede Komponente konzentriert sich auf eine einzelne Verantwortung und verbessert damit die Testbarkeit und Wiederverwendbarkeit und die Einfachheit.
• Einwegbindung: Reduziert die Last des Verdauungszyklus und sorgt dafür, dass Datenflüsse in Komponenten ohne externe Interferenz gewährleistet werden, wodurch die Leistung und das Design der Klarheit verbessert werden.
• Einzelbindung: Die Leistung weiter optimieren, indem die Anzahl der Beobachter im Digest -Zyklus reduziert wird, was besonders für statische oder invariante Daten nützlich ist.
• Lebenszyklusereignisse: Verwenden Sie Lebenszyklusereignisse wie $onInit und $onDestroy, um die Einstellungen und die Demontage von Komponenten effektiv zu verwalten, um sicherzustellen, dass die Ressourcen ordnungsgemäß initialisiert und gereinigt werden.
• Komponentenereignisse: Komponenten sollten Ereignisse ausstellen, um mit anderen Komponenten zu kommunizieren, und bevorzugen es, mit benutzerdefinierten Ereignissen und nicht mit $scope zu interagieren, was mit Angular 2 -Praktiken übereinstimmt und die Modularität und Wiederverwendbarkeit von Komponenten verbessert.

Dieser Artikel wurde von Mark Brown und Jürgen van de Moere überprüft. Vielen Dank an alle Peer -Rezensenten bei SitePoint für die Erhöhung der Inhalte von SitePoint -Inhalten!

---

10. Januar 2017: Der Artikel wurde aktualisiert, hat den Abschnitt über die Einwegbindung geklärt und Informationen zur allzeiten Bindung hinzugefügt. ---

In Angular 1 sind Komponenten die Mechanismen zum Erstellen benutzerdefinierter HTML -Elemente. Dies war in der Vergangenheit mit Angular -Richtlinien möglich, aber die Komponenten basieren auf verschiedenen Verbesserungen an Angular und erzwingen Best Practices in Bauen und Design.

In diesem Artikel werden wir in das Design von Komponenten eintauchen und wie sie in Ihrer Anwendung verwendet werden. Wenn Sie in Angular 1 keine Komponenten verwendet haben, können Sie unser kürzlich veröffentlichtes Tutorial zu ihrer Syntax und ihrem Design lesen. Mein Ziel ist es, einige Best Practices zu skizzieren, die die Qualität Ihrer Anwendung verbessern.

Es ist auch zu beachten, dass viele Best Practices für Angular 2 durch die neue Komponenten -API in Angular 1 eingeführt wurden, sodass Sie Anwendungen erstellen können, die später leichter zu refaktor sind. Angular 2 beeinflusst die Art und Weise, wie wir an Winkel 1 -Komponenten nachdenken und entwerfen, aber es gibt immer noch viele offensichtliche Unterschiede. Angular 1 ist nach wie vor ein sehr leistungsstarkes Werkzeug zum Aufbau von Anwendungen. Ich glaube daher, dass es sich lohnt, in die Verwendung von Komponenten zu investieren, um Ihre Anwendung zu verbessern, um Ihre Anwendung zu verbessern, wenn Sie nicht auf Angular 2 migrieren.

Was sind gute Komponenten?

Komponenten sollten mit vielen wichtigen Funktionen ausgelegt werden, um sie zu einem leistungsstarken Baustein für Anwendungen zu machen. Wir werden jede Funktion genauer untersuchen, aber hier sind die Hauptkonzepte, denen Komponenten folgen sollten.

• Isolierung: Die Logik der Komponente sollte eingekapselt, intern und privat gehalten werden. Dies hilft, die Kopplung zwischen Komponenten zu verringern.
• Fokus: Komponenten sollten eine Hauptaufgabe als einzelne Einheit ausführen, was sie leicht verständlich und oft einfacher zuverwenden macht.
• Einwegbindung: Verwenden Sie nach Möglichkeit eine Einwegbindung, um die Last am Verdauungszyklus zu reduzieren.
• Verwenden von Lebenszyklusereignissen: Der Lebenszyklus einer Komponente beginnt mit Instanziierung und endet mit der Entfernung von der Seite. Es ist am besten, diese Ereignisse zu verwenden, um Komponenten zu pflegen.
• Unbekannte API: Komponenten sollten Konfigurationen als Attribute konsistent akzeptieren, damit es leicht zu verstehen ist, wie sie verwendet werden.
• Ausgabeereignisse: Um mit anderen Komponenten zu kommunizieren, sollten sie Ereignisse mit entsprechenden Namen und Daten ausstellen.

Lassen Sie uns jetzt zuerst verstehen, warum und wie die Komponenten aus dem Rest der Anwendung isolieren und eingekapselt werden können.

Komponenten sollten isoliert sein

Die Entwicklung der Winkel 1 -Funktionalität besteht darin, isolierte und eingekapselte Komponenten aus gutem Grund zu aktivieren. Einige frühe Anwendungen waren mit der Verwendung von $scope und verschachtelten Controllern stark gekoppelt. Anfänglich war Angular keine Lösung, aber jetzt hat es es.

Gute Komponenten enthüllen ihre interne Logik nicht. Dies ist aufgrund der Art und Weise, wie sie entworfen werden, leicht zu erreichen. Es sollte jedoch nicht unbedingt erforderlich (z. B. Senden-/Sendungsereignisse), nicht unbedingt erforderlich, der Missbrauch der Komponentenverwendung $scope vermieden werden.

Komponenten sollten sich auf

konzentrieren

Komponenten sollten eine einzige Rolle übernehmen. Dies ist sehr wichtig für Testbarkeit, Wiederverwendbarkeit und Einfachheit. Es ist besser, zusätzliche Komponenten zu erstellen, anstatt einzelne Komponenten zu überladen. Dies bedeutet nicht, dass Sie keine größeren oder komplexeren Komponenten haben, sondern nur, dass sich jede Komponente auf ihre Hauptarbeit konzentrieren sollte.

Ich unterteilt die Komponenten in vier Hauptgruppen, basierend auf ihrer Rolle in der Anwendung, um darüber nachzudenken, wie Komponenten gestaltet werden. Es gibt keine andere Syntax, um diese verschiedenen Komponentenarten zu erstellen - betrachten Sie einfach die spezifischen Rollen, die die Komponenten annehmen.

Diese Typen basieren auf meiner mehr als 5 Jahre Erfahrung mit Angular. Sie können sich für etwas anders organisieren, aber das grundlegende Konzept besteht darin, sicherzustellen, dass Ihre Komponenten eine klare Rolle spielen.

Anwendungskomponenten

Nur eine Anwendungskomponente kann als Stammwurzel der Anwendung fungieren. Sie können es als nur eine Komponente im Körper einer Webanwendung vorstellen, durch die alle anderen Logik geladen werden.

<code>>
  <app>></app>>
>
</code>

Dies wird hauptsächlich für die Konsistenz von Angular 2 -Design empfohlen. Daher wird es in Zukunft einfacher, wenn Sie migrieren möchten. Es hilft auch beim Testen, indem der gesamte Root -Inhalt der Anwendung in eine einzelne Komponente verschoben wird (anstatt einen Teil davon in die Index.html -Datei zu setzen). Die Anwendungskomponente bietet Ihnen außerdem einen Ort, an dem Sie Ihre Anwendung instanziieren können, damit Sie dies nicht in der Anwendungslaufmethode tun müssen, wodurch die Testbarkeit verbessert und die Abhängigkeit von $rootScope verringert wird.

Diese Komponente sollte so einfach wie möglich sein. Wenn möglich, kann es nur Vorlagen ohne Bindungen oder Controller enthalten. Es ersetzt jedoch nicht die Anwendungsanforderungen ng-app oder startet sie nicht.

Routing -Komponente

In der Vergangenheit haben wir Controller und Vorlagen im UI-Router-Zustand (oder Ngroute-Routing) verknüpft. Die Route kann jetzt direkt mit der Komponente verknüpft werden, sodass die Komponente immer noch dort ist, wo das Controller und das Vorlagenpaar, aber es gibt auch die Vorteile, routabel zu sein.

zum Beispiel mit UI-Router, so die wir mit Vorlagen und Controllern verknüpfen.

<code>>
  <app>></app>>
>
</code>

Sie können die URL jetzt direkt mit der Komponente verknüpfen.

<code>$stateProvider.state('mystate', {
  url: '/',
  templateUrl: 'views/mystate.html',
  controller: MyStateController
});
</code>

Diese Komponenten können Daten aus Routing -Parametern wie Projekt -IDs binden. Ihre Aufgabe besteht darin, sich darauf zu konzentrieren, das Routing einzurichten, um andere erforderliche Komponenten zu laden. Diese scheinbar geringfügige Änderung der Routing -Definition ist für Angular 2 -Migrationsfähigkeiten sehr wichtig, aber in Angular 1.5 genauso wichtig, da sie Vorlagen und Controller auf Komponentenebene besser zusammenfasst.

Angular 1 verfügt tatsächlich über zwei Routing -Module, NGroute und Ngcomponentuterer. Nur Ngcomponentuter unterstützt Komponenten, ist aber auch veraltet. Ich denke, der beste Weg ist, UI-Router zu verwenden.

Zustandskomponente

Die meisten der einzigen Komponenten, die Sie für Ihre Bewerbung erstellen, sind staatlich. Hier platzieren Sie die Anwendungsgeschäftslogik, stellen HTTP -Anfragen, Prozessformulare und andere staatliche Aufgaben aus. Diese Komponenten können für Ihre Anwendung einzigartig sein und sich eher auf die Aufrechterhaltung von Daten als auf visuelle Rendering konzentrieren.

Angenommen, Sie haben einen Controller -Laden von Benutzerprofildaten für die Anzeige, und es gibt auch eine entsprechende Vorlage (hier nicht angezeigt) in der Direktive miteinander verknüpft. Dieser Code -Snippet ist wahrscheinlich der grundlegendste Controller, der den Job erledigt.

<code>$stateProvider.state('mystate', {
  url: '/',
  component: 'mystate'
});
</code>

Verwenden von Komponenten können Sie es besser entwerfen als zuvor. Im Idealfall sollten Sie auch den Dienst verwenden, anstatt $http direkt im Controller zu verwenden.

<code>.controller('ProfileCtrl', function ($scope, $http) {
  $http.get('/api/profile').then(function (data) {
    $scope.profile = data;
  });
})
.directive('profile', function() {
  return {
    templateUrl: 'views/profile.html',
    controller: 'ProfileCtrl'
  }
})
</code>

Jetzt haben Sie eine Komponente, die seine eigenen Daten lädt und so statend wird. Diese Art von Komponenten ähneln Routing -Komponenten, außer dass sie möglicherweise nicht zur Verbindung zu einer einzelnen Route verwendet werden.

Die staatliche Komponente verwendet andere (staatenlose) Komponenten, um die Benutzeroberfläche tatsächlich zu rendern. Außerdem möchten Sie den Dienst weiterhin verwenden, anstatt die Datenzugriffslogik direkt in den Controller zu setzen.

Staurosekomponente

Staateless Komponenten konzentrieren sich auf das Rendern ohne die Verwaltung der Geschäftslogik und müssen nicht für eine bestimmte Anwendung eindeutig sein. Beispielsweise verarbeiten die meisten Komponenten, die für UI -Elemente wie Formelemente, Karten usw. verwendet werden, auch keine Logik wie das Laden von Daten oder Speichern von Formularen. Sie sind so konzipiert, dass sie hochmodular, wiederverwendbar und isoliert sind.

Wenn die staatenlose Komponente nur Daten oder alles in der Steuervorlage anzeigt, ist möglicherweise nicht ein Controller erforderlich. Sie akzeptieren Eingaben von staatlichen Komponenten. Dieses Beispiel erhält den Wert aus der Statuskomponente (Profilbeispiel oben) und zeigt den Avatar an.

<code>.component('profile', {
  templateUrl: 'views/profile.html',
  controller: function($http) {
    var vm = this;
    // 当组件准备好时调用，见下文
    vm.$onInit = function() {
      $http.get('/api/profile').then(function (data) {
        vm.profile = data;
      });
    };
  }
})
</code>

Um es zu verwenden, übergeht die statige Komponente den Benutzernamen durch das Attribut, wie unten gezeigt: <avatar username="vm.profile.username">.</avatar>

Viele Bibliotheken, die Sie verwenden, sind Sammlungen für staatenlose Komponenten (und mögliche Dienste). Sie können sicherlich Konfigurationen akzeptieren, um ihr Verhalten zu ändern, aber sie sind nicht dafür gedacht, für Logik außerhalb von sich selbst verantwortlich zu sein.

Komponenten sollten eine Einwegbindung

verwenden

Dies ist für die Komponente nicht neu, aber es ist normalerweise ratsam, es in der Komponente zu verwenden. Der Zweck der Einwegbindung besteht darin, zu vermeiden, dass mehr Arbeit in den Digest-Zyklus geladen wird, was ein wesentlicher Faktor für die Anwendungsleistung ist. Die Daten fließen nun in die Komponente, ohne nach draußen zu suchen (was zu einigen heute existierenden Kopplungsproblemen führt), und die Komponente kann sich einfach basierend auf dieser Eingabe rendern. Dieses Design funktioniert auch mit Angular 2, was bei zukünftigen Migrationen hilft.

In diesem Beispiel ist das Titelattribut nur einmal an der Komponente gebunden, basierend auf dem angegebenen Anfangswert. Wenn der Titel durch einen externen Schauspieler geändert wird, wird er in der Komponente nicht widerspiegelt. Die Syntax, die angibt, dass die Bindung unidirektional ist, besteht darin,

zu verwenden

<code>>
  <app>></app>>
>
</code>

Wenn sich die Eigentumseigenschaft ändert, wird die Komponente weiterhin aktualisiert. Es wird empfohlen, nach Möglichkeit eine Einwegbindung zu verwenden.

Komponenten sollten eine einzelne Bindung

berücksichtigen

Angular hat auch die Fähigkeit, Daten in einer einzigen Zeit zu binden, sodass Sie den Verdauungszyklus optimieren können. Im Wesentlichen wird Angular warten, um den ersten nicht-definierten Wert in die Bindung zu liefern, diesen Wert zu binden und dann (sobald alle Bindungen analysiert wurden) den relevanten Beobachter aus dem Digest-Zyklus entfernen. Dies bedeutet, dass eine bestimmte Bindung einer zukünftigen Digest -Schleife keine Verarbeitungszeit hinzufügt.

Dies geschieht durch Vorgehen der Bindungsexpression mit ::. Wenn Sie wissen, dass sich die Eingabebindung während des Lebenszyklus nicht ändert, ist es nur sinnvoll, dies zu tun. Wenn der Titel in diesem Beispiel eine Einwegbindung ist, wird er weiterhin in der Komponente aktualisiert, aber die Bindung hier wird nicht aktualisiert, da wir ihn als Einzelzeitbindung angeben.

<code>$stateProvider.state('mystate', {
  url: '/',
  templateUrl: 'views/mystate.html',
  controller: MyStateController
});
</code>

Komponenten sollten Lebenszyklusereignisse verwenden

Sie haben möglicherweise die $onInit -Funktion als neue Funktion bemerkt. Komponenten haben Lebenszyklen und entsprechende Ereignisse, mit denen Sie bestimmte Aspekte der Komponente verwalten sollten.

$onInit()

Der erste Schritt im Lebenszyklus des Komponenten ist die Initialisierung. Dieses Ereignis läuft nach der Initialisierung des Controllers und der Bindung. Sie sollten diese Methode fast immer für die Komponenteneinrichtung oder die Initialisierung verwenden. Es wird sicherstellen, dass alle Werte für die Komponente vor dem Ausführen verfügbar sind. Wenn Sie im Controller direkt auf gebundene Werte zugreifen, können Sie nicht garantieren, dass diese Werte verfügbar sind.

<code>$stateProvider.state('mystate', {
  url: '/',
  component: 'mystate'
});
</code>

$postLink()

Der nächste Schritt besteht darin, alle untergeordneten Elemente in der Vorlage zu verknüpfen. Wenn die Komponente initialisiert wird, gibt es keine Garantie dafür, dass sie auch die in der Vorlage verwendeten untergeordneten Elemente gemacht haben. Dies ist wichtig, wenn Sie das DOM in irgendeiner Weise bedienen müssen. Eine wichtige Einschränkung ist, dass asynchron geladene Vorlagen möglicherweise nicht geladen wurden, wenn das Ereignis ausgelöst wird. Sie können jederzeit eine Vorlage -Caching -Lösung verwenden, um sicherzustellen, dass die Vorlage immer verfügbar ist.

<code>>
  <app>></app>>
>
</code>

$onChanges()

Wenn die Komponente aktiv ist, muss möglicherweise auf Änderungen der Eingabewerte reagieren. Eine Einwegbindung aktualisiert weiterhin Ihre Komponente, aber wir haben eine neue $onChanges Ereignisbindung, um zuzuhören, wenn sich die Eingabe ändert.

Angenommen, die Komponente ist mit einem Produkttitel und einer Beschreibung versehen. Sie können Änderungen wie unten gezeigt erkennen. Sie können das an die Funktion übergebene Objekt anzeigen, der Objekte auf verfügbare Bindungen zugeordnet sind und den aktuellen Wert und den vorherigen Wert enthalten.

<code>$stateProvider.state('mystate', {
  url: '/',
  templateUrl: 'views/mystate.html',
  controller: MyStateController
});
</code>

$onDestroy()

Die letzte Phase besteht darin, Komponenten von der Seite zu entfernen. Dieses Ereignis läuft, bevor der Controller und sein Umfang zerstört werden. Es ist wichtig, alles zu bereinigen, was die Komponente erzeugt oder Speicher enthält, z. B. Ereignishörer, Beobachter oder andere DOM -Elemente.

<code>$stateProvider.state('mystate', {
  url: '/',
  component: 'mystate'
});
</code>

Komponenten sollten klare API

haben

Um Komponenten mit einem Datensatz zu konfigurieren und zu initialisieren, sollten Komponenten Bindungen verwenden, um diese Werte zu akzeptieren. Dies wird manchmal als Komponenten -API angesehen, die nur eine andere Möglichkeit ist, zu beschreiben, wie eine Komponente Eingaben akzeptiert.

Die Herausforderung besteht darin, einen präzisen, aber klaren Namen für die Bindung anzugeben. Manchmal versuchen Entwickler, den Namen zu verkürzen, um ihn sehr präzise zu machen, aber dies ist gefährlich für die Verwendung von Komponenten. Angenommen, wir haben eine Komponente, die das Aktiencode als Eingabe akzeptiert. Welche der folgenden Aussagen ist besser?

<code>.controller('ProfileCtrl', function ($scope, $http) {
  $http.get('/api/profile').then(function (data) {
    $scope.profile = data;
  });
})
.directive('profile', function() {
  return {
    templateUrl: 'views/profile.html',
    controller: 'ProfileCtrl'
  }
})
</code>

Ich hoffe du denkst symbol ist besser. Manchmal mögen Entwickler auch gerne Komponenten und Bindungen, um Namenskonflikte zu vermeiden. Es ist ratsam, Komponenten zu präfixen, beispielsweise md-toolbar ist die Material -Symbolleiste, aber das Präfix für alle Bindungen kann ausführlich werden und sollte vermieden werden.

Komponente sollte ein Ereignis

ausstellen

Um mit anderen Komponenten zu kommunizieren, sollte die Komponente ein benutzerdefiniertes Ereignis ausstellen. Es gibt viele Beispiele für die Verwendung von Diensten und Zwei-Wege-Datenbindung, um die Anzahl zwischen den Komponenten

zu synchronisieren

ist es, aber Ereignisse sind eine bessere Designauswahl. Die Ereignisse sind viel effizienter, um mit Seiten zu kommunizieren (und der grundlegende Bestandteil der JavaScript -Sprache und der Funktionsweise in Angular 2 ohne Zufall).

Ereignisse in

können mit $emit (bis zum Geltungsbaum) oder $broadcast (bis zum Geltungsbaum) verwendet werden. Dies ist eine praktische Anwendung eines schnellen Beispielereignisses.

<code>.component('profile', {
  templateUrl: 'views/profile.html',
  controller: function($http) {
    var vm = this;
    // 当组件准备好时调用，见下文
    vm.$onInit = function() {
      $http.get('/api/profile').then(function (data) {
        vm.profile = data;
      });
    };
  }
})
</code>

Es gibt zwei Hauptsituationen, in denen Sie zwischen den Komponenten kommunizieren müssen: zwischen Komponenten, die Sie kennen und zwischen Komponenten, die Sie nicht kennen. Um diesen Unterschied zu veranschaulichen, gehen wir davon aus, dass wir über eine Reihe von Komponenten verfügen, um Registerkarten auf der Seite zu verwalten, und eine Symbolleiste mit entsprechenden Hilfeseiten -Links.

<code>.component('avatar', {
  template: '<img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173975605585460.png" class="lazy" ng- alt="Eine Anleitung zum Gebäuden von Quality Angular 1.5 Komponenten" >',
  bindings: {
    username: '  },
  controllerAs: 'vm'
})
</code>

In diesem Fall können sich die Komponenten my-tabs und my-tab kennen, da sie zusammenarbeiten, um einen Satz von drei verschiedenen Registerkarten zu erstellen. my-toolbar Komponenten liegen jedoch über ihren kognitiven Bereich.

Wenn eine andere Registerkarte ausgewählt ist (dies ist ein Ereignis in der my-tab -Komponenteninstanz), muss die my-tabs -Komponente wissen, damit die Anzeige der Registerkarte angepasst werden kann, um die Instanz anzuzeigen. Die my-tab -Komponente kann Ereignisse an die übergeordnete my-tabs -Komponente nach oben ausstellen. Diese Art der Kommunikation ist wie eine interne Kommunikation zwischen zwei Komponenten, die zusammenarbeiten, um eine einzelne Funktion zu erstellen (eine Registerkartenschnittstelle).

Aber was ist, wenn my-toolbar wissen möchte, welche Registerkarte derzeit ausgewählt ist, damit sie die Hilfebaste basierend auf dem sichtbaren Inhalt ändern kann? Das Ereignis my-tab wird niemals my-toolbar erreichen, da es kein Elternteil ist. Eine andere Option besteht also darin, $rootScope zu verwenden, um Ereignisse für den gesamten Komponentenbaum nach unten auszugeben, sodass jede Komponente anhören und reagieren kann. Der potenzielle Nachteil hier ist, dass Ihre Ereignisse jetzt jeden Controller erreichen. Wenn eine andere Komponente denselben Ereignisnamen verwendet, können Sie unerwartete Effekte auslösen.

Ermitteln Sie, welcher Ansatz für Ihren Anwendungsfall geeignet ist. Wenn jedoch möglicherweise eine andere Komponente über das Ereignis informiert werden muss, möchten Sie möglicherweise mit der zweiten Option Ereignisse an der gesamten Komponentenbaum ausstellen.

Zusammenfassung

Angular 1 -Anwendungen können nun mit Komponenten geschrieben werden, die die Best Practices und Art unseres Anwendungsschreibens verändern. Dies ist besser, aber nur Komponenten zu verwenden ist nicht unbedingt besser als zuvor. Beachten Sie die folgenden Punkte, wenn Sie Winkel 1 -Komponenten bauen.

• Isolieren Sie Ihre Logik. Halten Sie so viel Komponentenlogik wie möglich intern und von anderen Aspekten der Anwendung fern, um Konsistenz und Qualität zu gewährleisten.
• Halten Sie die Komponenten einfach und konzentrieren Sie sich auf eine einzige Rolle. Sie können komplexe Komponenten sein, aber verschiedene Aufgaben einer einzelnen Komponente sollten logisch als Einheiten verbunden sein.
• Lebenszyklus -Ereignisse verwenden. Durch die Verbindung mit dem Komponentenlebenszyklus können Sie sicherstellen, dass die Daten zur richtigen Zeit fertig sind und dass Sie sie reinigen können.
• Einweg- und Single-Shot-Bindungen verwenden. Wenn möglich, ist die Einwegbindung effizienter und fördert ein gutes Design, während die alleinstehende Bindung die Anwendung beschleunigen kann. Sie können das $onChanges Lebenszyklusereignis jederzeit verwenden, um Änderungen zu beobachten.
• Verwenden Sie Ereignisse, um zu kommunizieren. Komponenten können mit benutzerdefinierten Ereignissen kommunizieren, was mit der Funktionalität von Angular 2 übereinstimmt und besser gestaltet ist.
• haben eine klare API. Stellen Sie sicher, dass Ihre Komponenten klar und leicht verständlich genannt werden.

Verwenden Sie Komponenten in Ihrer Angular 1.x -Anwendung? Oder werden Sie warten, bis Sie zu Angular 2 wechseln? Ich würde gerne über Ihre Erfahrungen in den Kommentaren unten hören.

FAQs zum Bau von Winkel 1,5 Komponenten

Was sind die Hauptunterschiede zwischen angular 1,5 Komponenten und Richtlinien?

Angular 1.5 -Komponente ist eine einfachere und intuitivere API für die Erstellung von Anweisungen. Obwohl Anweisungen leistungsfähig sind, können sie aufgrund ihrer Flexibilität schwierig zu verwenden sein. Auf der anderen Seite haben Komponenten einfachere Konfigurationen und dienen zum Erstellen von UI -Elementen. Sie erleichtern auch die Verwendung von Einweg-Datenbindung und Lebenszyklushaken, was zu einem vorhersehbaren Datenfluss und einer einfacheren Debuggierung führen kann.

Wie verwendet ich Einweg-Datenbindung in angularer 1.5-Komponente?

Einweg-Datenbindung kann unter Verwendung des bindings -attributs in angular 1.5-Komponente erreicht werden.

Was ist der Lebenszyklushaken? Wie benutze ich sie in eckigen 1.5 -Komponenten?

Lebenszyklushaken ist eine Funktion, die an einem bestimmten Punkt im Lebenszyklus einer Komponente bezeichnet wird. Angular 1.5 führt mehrere Lebenszyklushaken ein, wie $onInit, $onChanges, $onDestroy und $postLink. Diese Hooks können verwendet werden, um Aufgaben wie die Initialisierung von Daten, die Reinigung von Ressourcen oder die Reaktion auf Bindungsänderungen auszuführen.

Wie kommunizieren Sie zwischen Komponenten in Angular 1.5?

Kommunikation zwischen Komponenten kann unter Verwendung von Bindungen und Ereignissen in Angular 1.5 erreicht werden. Die Kommunikation von Eltern zu Sohn kann mithilfe von Bindungen durchgeführt werden, während die Kommunikation zwischen Child-zu-Eltern mithilfe von Ereignissen durchgeführt werden kann. Dies erleichtert den Einweg-Datenfluss, wodurch Ihre Anwendung das Verständnis erleichtert.

Wie migriert man von Richtlinien in Angular 1.5 zu Komponenten?

Migration von Anweisungen in Angular 1.5 zu Komponenten umfasst mehrere Schritte. Ersetzen Sie zunächst die Anweisung, um das Objekt durch die Komponentendefinition zu definieren. Ersetzen Sie dann die Verbindungsfunktion durch den Lebenszyklushaken. Ersetzen Sie schließlich die Zwei-Wege-Datenbindung durch Einweg-Datenbindung und Ereignisse.

Welche Vorteile haben die Verwendung von Komponenten in Angular 1.5 anstelle von Anweisungen?

Die Komponenten in Angular 1.5 bieten mehrere Vorteile gegenüber Anweisungen. Sie haben eine einfachere API, die Einweg-Datenbindung und Einweg-Datenfluss erleichtert und Lebenszyklushaken bereitstellt. Diese Funktionen können Ihren Code erleichtern, zu verstehen, zu debuggen und zu warten.

Wie kann ich die Transkription in angularer 1.5 -Komponente verwenden?

Transkription kann in Winkel 1.5 -Komponenten unter Verwendung der Option transclude in der Komponentendefinition erreicht werden. Auf diese Weise können Sie benutzerdefinierte Inhalte in die Vorlage der Komponente einfügen, die sehr nützlich ist, um wiederverwendbare UI -Elemente zu erstellen.

Wie erstelle ich eine Multi-Slot-Transkription in angularer 1.5-Komponente?

Multi-Slot-Transkription kann in Winkel 1.5-Komponenten unter Verwendung der Option transclude mit der Objektsyntax implementiert werden. Auf diese Weise können Sie mehrere Transkriptionssteckplätze in der Vorlage der Komponente definieren, die mit benutzerdefinierten Inhalten gefüllt werden kann.

Wie verwendet ich $onChanges Lebenszyklushaken in Winkel 1.5 -Komponente?

Wenn eine Einweg-Bindung aktualisiert wird, wird der $onChanges Lebenszyklushaken in angularer 1.5-Komponente aufgerufen. Es empfängt ein Änderungsobjekt, das die aktuellen und früheren Werte der Bindung enthält. Dies kann verwendet werden, um Reaktionen auf die Bindungsänderungen zu führen und Aufgaben wie das Aktualisieren des Komponentenzustands oder das Erhalten von Daten auszuführen.

Wie verwendet ich $postLink Lebenszyklushaken in Winkel 1.5 -Komponente?

Nachdem das Element der Komponente und ihre untergeordneten Elemente verknüpft sind, wird der $postLink Lebenszyklushaken in der Winkel 1.5 -Komponente aufgerufen. Dies kann verwendet werden, um Aufgaben auszuführen, die Zugriff auf die DOM -Elemente der Komponente erfordern, z. B. das Einrichten eines Ereignishörers oder das Betrieb des DOM.

Das obige ist der detaillierte Inhalt vonEine Anleitung zum Gebäuden von Quality Angular 1.5 Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!