erittäin uudelleenkäytettävien Kulmakomponenttien luominen
valmistellaan AngularJS app Kulmikas
ei ole epäilystäkään, jos aiot rakentaa uuden sovelluksen tänään saatat aloittaa pois Angular rakennettu Typescript (Angular 2+). Kuitenkin tuhansilla kulmikkailla (Kulmikas 1.X) Sovellukset vielä tuotannossa, AngularJS ei ole menossa minnekään aivan vielä. Itse asiassa AngularJS näkee edelleen jatkuvaa kehitystä ja tukea joukkueelta.
**UPDATE**
Angular on tällä hetkellä V6: ssa ja sopii hyvin suuriin tuotantosovelluksiin. Jos olet rakentamassa uutta sovellusta tänään, katso Kulmikas 6+.
Tsekkaa Uusi oppaamme erittäin uudelleenkäytettävien komponenttien luomiseen kulmikkailla
kehittäjät saattavat myös suosia AngularJS: n ympärillä olevaa rikasta kehittäjäyhteisöä ja avoimen lähdekoodin kirjastoja, jotka vastustavat uusiin ja rajattuihin sukeltamista. On useita syitä, miksi haluat ehkä luoda sovelluksen AngularJS. Jos siirtyminen NG1 sovellus NG2+ on tutka, sitten harkita componentizing app edellytys muuttoliike.
uusia ominaisuuksia 1.5. lähtien.x on lisätty taannehtivasti, lähinnä komponenttien tukena ja yksisuuntaisena tiedon sitomisena. Tarkastelemme, miten maksimoida nämä ominaisuudet luoda erittäin uudelleenkäytettäviä komponentteja Oman AngularJS sovelluksia, jotka yhdenmukaistaa lähempänä uutta Kulmikas kehys.
Komponenttiorganisaatio
on helppo eksyä komponenttiin tämä, komponentti että hoopla. Yksi kriittisimmistä kappaleista ymmärtää on, minkä komponentin pitäisi olla vastuussa mistäkin.
pidä sivutason komponentit näkymän käyttövoimana, samalla kun käytät uudelleenkäytettäviä tai” tyhmiä ” komponentteja yhteisen tehtävän hoitamiseen.
tämä pitää sivun tietyn logiikan yhteen komponenttiin ja kapseloi kaikki rutiinikoodit ja toiminnot uudelleenkäytettäviin paloihin.
yksi suurimmista näkemistäni virheistä on tietojen välittäminen lapsille, jotka muuttavat tietoja, olettavat hyvin tietyn käyttötapauksen tai kommunikoivat palveluiden kautta kaikkialla. Tämä lopulta tekee niistä vaikea ymmärtää / testata ja ei uudelleenkäytettäviä ollenkaan, koska ne tulevat kova koodattu tiettyihin käyttötapauksiin.
ensimmäinen “Hello World” – komponentti
yksinkertaisin mahdollinen komponentti näyttäisi jotakuinkin tältä. Huomaa, miten samanlaisia ne ovat kuin direktiivit.
angular.module('app', )
.component('myComponent', {
template:'<h1>Hello World</h1>'
}
);
on syytä huomata, että direktiivit ovat edelleen saatavilla kehittäjille. On joitakin harvinaisia tilanteita, joissa haluat silti käyttää mallidirektiiviä komponentin yli. Mahdollisesti Jos olit riippuvainen joidenkin kääntää tai link vaihe…. mutta direktiivejä tulisi käyttää attribuutteina lisätäksesi muita toimintoja komponenttiin … esimerkiksi, ehkä halusit lisätä käyttöoikeuksiin perustuvan suojauksen, jos osan pitäisi olla käyttäjän saatavilla tai ei.
epävarmoissa suositaan komponenttimallia. Haluat rakentaa sovelluksen puu komponenttien. Katso AngularJS docs lisätietoja komponentit vs direktiivit. Direktiiveissä olisi ajateltava komponentteja ilman malleja, joita käytetään komponenttien parantamiseen.
Sidontavaihtoehdot
Komponenttiparametrit kulkevat bindings ominaisuuden kautta. Samanlainen kuin vanha tapa määrittää direktiivin soveltamisalan muuttujat.
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
Komponenttiviestintä
Oletetaan, että teemme messenger-sovelluksen. Päänäkymä on sivutason komponentti uudelleenkäytettävällä yhteystietoluettelokomponentilla. Haluamme käyttää yhteystietoluettelokomponenttia muilla sovelluksemme alueilla, joten on tärkeää tehdä siitä mahdollisimman uudelleenkäytettävä.
kontaktiluettelokomponentilla on vain yksi käyttötarkoitus. Voit tehdä luettelon käytettävissä olevista yhteystiedoista palvelimelta ja tulostaa tehdyt valinnat.
messenger-komponentin tulee hyväksyä yhteystietoluettelokomponentista tehdyt valinnat ja liittää ne vastaanottajaluetteloonsa.
