Opprette Svært Gjenbruk AngularJS Komponenter
Forbereder Din AngularJS app For Angular
Ingen tvil om du skal bygge en ny app i dag, kan du begynne Med Angular bygget På Typescript (Angular 2+). Men med tusenvis Av AngularJS (Vinkel 1.X) apps fortsatt i produksjon, AngularJS går ikke hvor som helst ennå. Faktisk Ser AngularJS fortsatt fortsatt utvikling og støtte fra teamet.
**UPDATE**
Angular er for tiden på v6 og passer godt til store produksjonsapper. Hvis du bygger en ny app i dag, kan du se Til Angular 6+.
Sjekk ut vår nye guide For Å Lage Svært Gjenbrukbare Komponenter Med Angular
Utviklere kan også favorisere det rike utviklerfellesskapet og open source-biblioteker rundt AngularJS i motsetning til å dykke inn i nye og begrensede. Det er flere grunner til at du kanskje vil lage en app I AngularJS. Hvis overføring av ng1-appen til ng2 + er på radaren, bør du vurdere å komponere appen din som en forutsetning for overføringen.
Nye funksjoner siden 1.5.x har blitt retroaktivt lagt til, hovedsakelig støtte av komponenter og enveis databinding. Vi vil se ut hvordan du kan maksimere disse funksjonene for å lage svært gjenbrukbare komponenter For AngularJS applikasjoner som justerer nærmere Den nye Vinkel rammeverk.
Komponentorganisasjon
det er lett å gå seg vill i komponenten denne, komponenten som hoopla. En av de mest kritiske brikkene å forstå er hvilken komponent som skal være ansvarlig for hva.
Hold sidenivå komponenter som drivkraften bak en visning mens du bruker gjenbrukbare eller” dumme ” komponenter for å ta vare på felles oppgave.
dette holder sidespesifikk logikk til en enkelt komponent mens du innkapsler all rutinemessig kode og funksjonalitet i gjenbrukbare biter.
en av de største feilene jeg har sett, er å overføre data til barnekomponenter som endrer dataene, antar en veldig spesifikk brukstilfelle eller kommuniserer via tjenester over alt. Dette gjør dem til slutt vanskelig å forstå / teste og ikke gjenbrukbare i det hele tatt da de blir hardkodet til bestemte brukssaker.
Din Første “Hello World” – Komponent
den enkleste komponenten som er mulig, vil se omtrent slik ut. Legg merke til hvor lik direktiver disse er.
angular.module('app', )
.component('myComponent', {
template:'<h1>Hello World</h1>'
}
);
det er verdt å merke seg at direktiver fortsatt er tilgjengelige for utviklere. Det er noen sjeldne omstendigheter der du fortsatt vil bruke et maldirektiv over en komponent. Muligens hvis du var avhengig av noen kompilere eller lenke fase…. men direktiver bør brukes som attributter for å legge til annen funksjonalitet til en komponent … for eksempel, kanskje du ønsket å legge til tillatelsesbasert sikkerhet hvis en komponent skulle være tilgjengelig eller ikke for en bruker.
når du er i tvil favoriserer komponentmodellen. Du vil konstruere appen din som et tre av komponenter. Se AngularJS docs for mer informasjon om komponenter vs direktiver. Direktiver bør tenkes på komponenter uten maler som brukes til å forbedre komponenter.
Bindingsalternativer
Komponentparametere sendes via egenskapen bindings. Ligner på den gamle måten å tildele direktivomfang variabler.
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
Komponentkommunikasjon
Anta at vi lager en messenger-app. Hovedvisningen er en komponent på sidenivå med en gjenbrukbar kontaktlistekomponent. Vi ønsker å bruke kontaktlistekomponenten i andre områder av søknaden vår, så det er viktig å gjøre dette så gjenbrukbart som mulig.
kontaktlistekomponenten har ett formål. For å gjengi listen over tilgjengelige kontakter fra serveren og utdata valgene som er gjort.
messenger-komponenten skal godta valg fra kontaktlistekomponenten og legge dem til mottakerlisten.
