Vytvoření Vysoce Opakovaně použitelné Komponenty AngularJS
Příprava vašeho AngularJS aplikace pro Úhlové
Žádná otázka, jestli se chystáte stavět nový app dnes můžete začít s Úhlovou postavený na psacím Stroji (Úhlový 2+). Nicméně, s tisíci AngularJS (úhlová 1.X) aplikace stále ve výrobě, AngularJS zatím nikam nevede. Ve skutečnosti, AngularJS stále vidí pokračující vývoj a podporu týmu.
* * UPDATE * *
Angular je v současné době na v6 a je vhodný pro velké výrobní aplikace. Pokud dnes vytváříte novou aplikaci, podívejte se prosím na Angular 6+.
Podívejte se na náš nový průvodce pro Vytváření Vysoce Opakovaně použitelné Komponenty S Úhlovou
Vývojáři mohou také upřednostňovat bohaté developer community a open source knihovny AngularJS proti potápění do nových a omezených. Existuje několik důvodů, proč budete chtít vytvořit aplikaci v AngularJS. Pokud je migrace aplikace ng1 na ng2+ na radaru, zvažte komponentizaci aplikace jako předpoklad pro migraci.
nové funkce od 1.5.x byly přidány zpětně, zejména podpora komponent a jednosměrná vazba dat. Podíváme se, jak maximalizovat tyto funkce a vytvořit vysoce opakovaně použitelné komponenty pro vaše aplikace AngularJS, které se přiblíží novému Hranatému rámci.
organizace komponent
je snadné se ztratit v komponentě, která hoopla. Jedním z nejkritičtějších kousků, které je třeba pochopit, je, která složka by měla být zodpovědná za co.
Udržet na úrovni stránky součásti, jako hnací silou cílem při využití opakovaně nebo “hloupý” komponenty postarat se o společný úkol.
to udržuje logiku specifickou pro jednu komponentu a zároveň zapouzdřuje veškerý rutinní kód a funkčnost do opakovaně použitelných bloků.
Jeden z největších omylů, co jsem viděl, je předávání dat do dětí součásti, které mění data, předpokládáme velmi konkrétní případ použití, nebo komunikovat prostřednictvím služby všude. To nakonec z nich dělá těžké pochopit/test a ne opakovaně použitelné vůbec, jak se stanou pevně zakódovány do konkrétních případů použití.
vaše první součást “Hello World”
nejjednodušší možná součást by vypadala nějak takto. Všimněte si, jak jsou podobné směrnicím.
angular.module('app', )
.component('myComponent', {
template:'<h1>Hello World</h1>'
}
);
stojí za zmínku, že směrnice jsou stále k dispozici vývojářům. Tam jsou některé vzácné okolnosti, kdy budete stále chtít použít směrnici šablony nad komponentou. Možná, pokud jste byli závislí na nějaké fázi kompilace nebo propojení…. směrnice by však měly být použity jako atributy pro přidání dalších funkcí do komponenty … například, možná jste chtěli přidat zabezpečení založené na oprávnění, pokud by komponenta měla být k dispozici nebo ne uživateli.
v případě pochybností upřednostňuje model komponenty. Chcete vytvořit aplikaci jako strom komponent. Viz AngularJS dokumenty pro více informací o komponenty vs směrnic. Směrnice by měly být považovány za komponenty bez šablon používaných k vylepšení komponent.
Možnosti vazby
parametry komponenty jsou předávány pomocí vlastnosti bindings. Podobně jako starý způsob přiřazování proměnných rozsahu směrnice.
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
komponentní komunikace
Předpokládejme, že vytváříme aplikaci messenger. Hlavní pohled je komponenta na úrovni stránky s opakovaně použitelnou složkou seznamu kontaktů. Chceme použít složku seznamu kontaktů v jiných oblastech naší aplikace, takže je důležité, aby to bylo co nejvíce opakovaně použitelné.
součást seznamu kontaktů má jediný účel. Vykreslení seznamu dostupných kontaktů ze serveru a výstup provedených výběrů.
komponenta messenger by měla přijímat výběry provedené ze složky seznam kontaktů a připojit je do seznamu příjemců.
