Tworzenie komponentów AngularJS wielokrotnego użytku
Przygotowanie aplikacji AngularJS do Angular
bez wątpienia, jeśli zamierzasz zbudować nową aplikację dzisiaj, możesz zacząć od kątowego zbudowanego na maszynie (Angular 2+). Jednak z tysiącami AngularJS (Angular 1.X) aplikacje wciąż w produkcji, AngularJS jeszcze nigdzie się nie wybiera. W rzeczywistości AngularJS nadal widzi ciągły rozwój i wsparcie ze strony zespołu.
**UPDATE**
Angular jest obecnie w Wersji v6 i dobrze nadaje się do dużych aplikacji produkcyjnych. Jeśli budujesz nową aplikację dzisiaj, proszę spojrzeć na kątowe 6+.
zapoznaj się z naszym nowym przewodnikiem dotyczącym tworzenia komponentów wielokrotnego użytku za pomocą Angular
programiści mogą również preferować bogatą społeczność programistów i biblioteki open source wokół AngularJS, a nie nurkowanie w nowych i ograniczonych. Istnieje kilka powodów, dla których możesz chcieć utworzyć aplikację w AngularJS. Jeśli migracja aplikacji ng1 do ng2+ jest na celowniku, rozważ jej komponentowanie jako warunku migracji.
nowe funkcje od 1.5.x zostały dodane z mocą wsteczną, głównie obsługa komponentów i jednokierunkowe wiązanie danych. Zastanowimy się, jak zmaksymalizować te funkcje, aby stworzyć komponenty wielokrotnego użytku dla aplikacji AngularJS, które będą zbliżone do nowej struktury Angular.
Organizacja komponentu
łatwo się zgubić w komponencie this, komponencie that hoopla. Jednym z najważniejszych elementów do zrozumienia jest to, który komponent powinien być odpowiedzialny za co.
Zachowaj komponenty na poziomie strony jako siłę napędową widoku, jednocześnie wykorzystując komponenty wielokrotnego użytku lub “głupie”, aby zająć się wspólnym zadaniem.
to utrzymuje logikę strony w jednym komponencie, jednocześnie zamykając cały rutynowy kod i funkcjonalność w części wielokrotnego użytku.
jednym z największych błędów, jakie widziałem, jest przekazywanie danych komponentom dziecięcym, które zmieniają dane, zakładają bardzo konkretny przypadek użycia lub komunikują się za pośrednictwem usług w całym miejscu. To ostatecznie sprawia, że są one trudne do zrozumienia/przetestowania i nie nadają się do ponownego użycia, ponieważ stają się twarde kodowane do konkretnych przypadków użycia.
Twój pierwszy komponent “Hello World”
najprostszy możliwy komponent wyglądałby mniej więcej tak. Zauważ, jak podobne są do dyrektyw.
angular.module('app', )
.component('myComponent', {
template:'<h1>Hello World</h1>'
}
);
warto zauważyć, że dyrektywy są nadal dostępne dla programistów. Istnieją rzadkie okoliczności, w których nadal będziesz chciał użyć dyrektywy szablonu nad komponentem. Być może, jeśli byłeś zależny od jakiejś fazy kompilacji lub linku…. ale dyrektywy powinny być używane jako atrybuty do dodawania innych funkcji do komponentu … na przykład, może chciałeś dodać zabezpieczenia oparte na uprawnieniach, jeśli komponent powinien być dostępny lub nie dla użytkownika.
w razie wątpliwości preferuj model komponentu. Chcesz skonstruować swoją aplikację jako drzewo komponentów. Zobacz dokumenty AngularJS, aby uzyskać więcej informacji na temat komponentów i dyrektyw. Dyrektywy należy traktować jako komponenty bez szablonów wykorzystywanych do ulepszania komponentów.
opcje wiązania
parametry komponentu są przekazywane za pośrednictwem właściwości bindings. Podobny do starego sposobu przypisywania zmiennych zakresu dyrektywy.
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
Komunikacja komponentów
Załóżmy, że tworzymy aplikację messenger. Widok główny jest komponentem na poziomie strony z komponentem listy kontaktów wielokrotnego użytku. Chcemy używać komponentu listy kontaktów w innych obszarach naszej aplikacji, dlatego ważne jest, aby był on jak najbardziej możliwy do ponownego użycia.
komponent listy kontaktów ma jeden cel. Aby wyrenderować listę dostępnych kontaktów z serwera i wypisać dokonane wybory.
komponent messenger powinien akceptować wybory dokonane z komponentu listy kontaktów i dołączać je do listy odbiorców.
