Erstellen von hoch wiederverwendbaren AngularJS-Komponenten
Vorbereiten Ihrer AngularJS-App für Angular
Keine Frage, wenn Sie heute eine neue App erstellen möchten, können Sie mit Angular beginnen, das auf Typescript (Angular 2+) basiert. Mit Tausenden von AngularJS (Angular 1.X) Apps noch in Produktion, AngularJS geht noch nirgendwo hin. Tatsächlich wird AngularJS weiterhin vom Team weiterentwickelt und unterstützt.
**UPDATE **
Angular befindet sich derzeit in Version 6 und eignet sich gut für große Produktions-Apps. Wenn Sie heute eine neue App erstellen, schauen Sie sich bitte Angular 6+ an.
Lesen Sie unseren neuen Leitfaden zum Erstellen hoch wiederverwendbarer Komponenten mit Angular
Entwickler bevorzugen möglicherweise auch die reichhaltige Entwicklergemeinschaft und Open-Source-Bibliotheken rund um AngularJS, anstatt in neue und begrenzte einzutauchen. Es gibt mehrere Gründe, warum Sie eine App in AngularJS erstellen möchten. Wenn die Migration Ihrer ng1-App zu ng2 + auf dem Radar ist, sollten Sie die Komponentisierung Ihrer App als Voraussetzung für Ihre Migration in Betracht ziehen.
Neue Funktionen seit 1.5.x wurden rückwirkend hinzugefügt, hauptsächlich die Unterstützung von Komponenten und Einweg-Datenbindung. Wir werden herausfinden, wie Sie diese Funktionen maximieren können, um hochgradig wiederverwendbare Komponenten für Ihre AngularJS-Anwendungen zu erstellen, die näher am neuen Angular-Framework ausgerichtet sind.
Komponentenorganisation
Es ist leicht, sich in der Komponente this, component that hoopla zu verlieren. Eines der wichtigsten Teile zu verstehen ist, welche Komponente für was verantwortlich sein sollte.
Behalten Sie Komponenten auf Seitenebene als treibende Kraft hinter einer Ansicht bei, während Sie wiederverwendbare oder “dumme” Komponenten verwenden, um allgemeine Aufgaben zu erledigen.
Dadurch bleibt die seitenspezifische Logik in einer einzigen Komponente erhalten, während der gesamte Routinecode und die gesamte Funktionalität in wiederverwendbaren Blöcken gekapselt werden.
Einer der größten Fehler, den ich gesehen habe, ist die Weitergabe von Daten an untergeordnete Komponenten, die die Daten ändern, einen sehr spezifischen Anwendungsfall annehmen oder über Dienste überall kommunizieren. Dies macht sie schließlich schwer zu verstehen / zu testen und überhaupt nicht wiederverwendbar, da sie für bestimmte Anwendungsfälle fest codiert werden.
Ihre erste “Hello World” -Komponente
Die einfachste mögliche Komponente würde ungefähr so aussehen. Beachten Sie, wie ähnlich diese Direktiven sind.
angular.module('app', )
.component('myComponent', {
template:'<h1>Hello World</h1>'
}
);
Es ist erwähnenswert, dass Direktiven Entwicklern weiterhin zur Verfügung stehen. Es gibt einige seltene Umstände, in denen Sie immer noch eine Template-Direktive über eine Komponente verwenden möchten. Möglicherweise, wenn Sie von einer Kompilierungs- oder Linkphase abhängig wären …. direktiven sollten jedoch als Attribute verwendet werden, um einer Komponente andere Funktionen hinzuzufügen … beispielsweise möchten Sie möglicherweise berechtigungsbasierte Sicherheit hinzufügen, wenn eine Komponente für einen Benutzer verfügbar sein soll oder nicht.
Bevorzugen Sie im Zweifelsfall das Komponentenmodell. Sie möchten Ihre App als Baum von Komponenten erstellen. Weitere Informationen zu Komponenten und Direktiven finden Sie in den AngularJS-Dokumenten. Direktiven sollten an Komponenten ohne Vorlagen gedacht werden, die zur Verbesserung von Komponenten verwendet werden.
Bindungsoptionen
Komponentenparameter werden über die Eigenschaft bindings übergeben. Ähnlich wie bei der alten Methode zum Zuweisen von Richtlinienbereichsvariablen.
angular.module('myApp')
.component('myComponent', {
template:'<h1>$ctrl.name</h1>',
bindings:{
name: '<' //one way data binding
},
controller: function(){
//component controller }})* < - One way data bindingUtilize one-way data binding for your bindings. Two way data bindings were great and one of the neatest feature of AngularJS, but it comes at a performance cost with the bound properties being watched within the component scope. This also means anything you change in component scope would be reflected in the parent in a two-way binding.!Important! - Its important to note that objects are passed by reference instead of a new copy. This means if your bound property is an object or array, changes to these objects would indeed reflect changes in the parent scope and still give you a two way data binding result. This is why its important to not mutate the object/array in the component scope and make those changes in the parent.* = - Two way data bindingNo worries if you need it though. Two way data binding is still around. #yolo* & - Output event. Provides a hook to parent componentsBindings marked with '&' signify a parameter that accepts a callback function from the parent component. This allows the parent to listen or catch any changes/messages. This is how our "dumb" component will talk back to the parent component with the change or event.* @ - String input
Komponentenkommunikation
Angenommen, wir erstellen eine Messenger-App. Die Hauptansicht ist eine Komponente auf Seitenebene mit einer wiederverwendbaren Kontaktlistenkomponente. Wir möchten die Kontaktlistenkomponente in anderen Bereichen unserer Anwendung verwenden, daher ist es wichtig, diese so wiederverwendbar wie möglich zu gestalten.
Die Kontaktlistenkomponente hat einen einzigen Zweck. Um die Liste der verfügbaren Kontakte vom Server zu rendern und die getroffenen Auswahlen auszugeben.
Die Messenger-Komponente sollte Auswahlen aus der Kontaktlistenkomponente akzeptieren und an die Empfängerliste anhängen.
