rendkívül újrafelhasználható AngularJS komponensek létrehozása
az AngularJS alkalmazás előkészítése Angular számára
nem kérdés, ha megy, hogy építsenek egy új app ma lehet kezdeni a szögletes épül gépírás (Angular 2+). Azonban több ezer AngularJS (szögletes 1.X) alkalmazások még a termelés, AngularJS nem megy sehova csak még. Valójában az AngularJS továbbra is folyamatos fejlesztést és támogatást lát a csapattól.
**frissítés**
az Angular jelenleg v6-os, és kiválóan alkalmas nagy gyártási alkalmazásokhoz. Ha ma új alkalmazást épít, kérjük, nézze meg az Angular 6+oldalt.
tekintse meg új útmutatónkat az erősen újrafelhasználható komponensek létrehozásához az Angular
a fejlesztők a gazdag fejlesztői közösséget és az AngularJS körüli nyílt forráskódú könyvtárakat is előnyben részesíthetik, szemben az új és korlátozott könyvtárakkal. Számos oka van annak, hogy miért érdemes létrehozni egy alkalmazást az AngularJS-ben. Ha az ng1 alkalmazás ng2+ – ra való áttelepítése a radaron van, akkor fontolja meg az alkalmazás összetevővé tételét az áttelepítés előfeltételeként.
új funkciók az 1.5 óta.x visszamenőleges hatállyal került hozzáadásra, elsősorban az összetevők támogatása és az egyirányú adatkötés. Megvizsgáljuk, hogyan lehet maximalizálni ezeket a funkciókat, hogy rendkívül újrafelhasználható összetevőket hozzunk létre az AngularJS alkalmazásokhoz, amelyek közelebb állnak az új Angular keretrendszerhez.
Component Organization
ez könnyen eltévedni a komponens ezt, komponens hoopla. Az egyik legkritikusabb darab, amelyet meg kell érteni, hogy melyik komponensnek kell felelősnek lennie.
tartsa az oldalszintű összetevőket a nézet hajtóerejeként, miközben újrafelhasználható vagy “buta” összetevőket használ a közös feladat ellátásához.
ez az oldalspecifikus logikát egyetlen komponenshez köti, miközben az összes rutin kódot és funkciót újrafelhasználható részekbe foglalja.
az egyik legnagyobb hiba, amit láttam, az adatok átadása a gyermekek összetevőinek, amelyek megváltoztatják az adatokat, nagyon konkrét felhasználási esetet feltételeznek, vagy a Szolgáltatásokon keresztül kommunikálnak az egész helyen. Ez végül megnehezíti a megértésüket/tesztelésüket, és egyáltalán nem használhatók fel újra, mivel keményen kódolódnak a konkrét felhasználási esetekhez.
az első “Hello World” összetevő
a lehető legegyszerűbb összetevő valahogy így néz ki. Figyeld meg, hogy ezek mennyire hasonlítanak az irányelvekhez.
angular.module('app', )
.component('myComponent', {
template:'<h1>Hello World</h1>'
}
);
érdemes megjegyezni, hogy az irányelvek továbbra is elérhetők a fejlesztők számára. Vannak olyan ritka körülmények, amikor továbbra is sablonirányelvet szeretne használni egy alkatrész felett. Esetleg, ha valamilyen fordítási vagy linkelési fázistól függtél…. de az irányelveket attribútumként kell használni, hogy más funkciókat adjon hozzá egy összetevőhöz … például talán engedélyalapú biztonságot akart hozzáadni, ha egy összetevőnek elérhetőnek kell lennie a felhasználó számára.
ha kétségei vannak a komponens modell. Azt szeretné, hogy építeni az alkalmazást, mint egy fa alkatrészek. Lásd AngularJS docs További információ alkatrészek vs Irányelvek. Az irányelveket olyan összetevőkre kell gondolni, amelyek nem tartalmaznak sablonokat az összetevők javítására.
kötési lehetőségek
az összetevők paramétereit a bindings tulajdonság adja át. Hasonló az irányelv hatókör-változók hozzárendelésének régi módjához.
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
komponens kommunikáció
tegyük fel, hogy egy messenger alkalmazást készítünk. A fő nézet egy újrafelhasználható névjegyzék-összetevővel rendelkező oldalszintű összetevő. A névjegyzék összetevőt alkalmazásunk más területein is szeretnénk használni, ezért fontos, hogy ez a lehető legjobban újrafelhasználható legyen.
a névjegyzék összetevőnek egyetlen célja van. Az elérhető névjegyek listájának megjelenítése a szerverről, majd a kiválasztott adatok kimenete.
a messenger összetevőnek el kell fogadnia a névjegyzék összetevőből kiválasztott beállításokat, és hozzá kell fűznie azokat a címzettek listájához.
