oprettelse meget genanvendelige AngularJS komponenter
forbereder din AngularJS app til Angular
Intet spørgsmål, hvis du skal bygge en ny app i dag, kan du starte med Angular bygget på Typescript (Angular 2+). Men med tusindvis af AngularJS (vinkel 1.Apps stadig i produktion, AngularJS går ikke nogen steder endnu. Faktisk ser AngularJS stadig fortsat udvikling og støtte fra holdet.
**opdatering**
Angular er i øjeblikket på v6 og er velegnet til store produktionsapps. Hvis du bygger en ny app i dag, skal du se til Angular 6+.
tjek vores nye guide til oprettelse af meget genanvendelige komponenter med Angular
udviklere kan også favorisere det rige udviklerfællesskab og open source-biblioteker omkring AngularJS i modsætning til at dykke ned i nye og begrænsede. Der er flere grunde til, at du måske ønsker at oprette en app i AngularJS. Hvis migrering af din ng1-app til ng2+ er på radaren, skal du overveje at komponentisere din app som en forudsætning for din migration.
nye funktioner siden 1.5.der er med tilbagevirkende kraft tilføjet, hovedsageligt understøttelse af komponenter og envejsdatabinding. Vi vil se på, hvordan du maksimerer disse funktioner for at skabe meget genanvendelige komponenter til dine AngularJS-applikationer, der passer tættere på den nye Vinkelramme.
Komponentorganisation
det er let at gå tabt i komponenten dette, komponent, der hoopla. En af de mest kritiske stykker at forstå er, hvilken komponent der skal være ansvarlig for hvad.
hold komponenter på sideniveau som drivkraften bag en visning, mens du bruger genanvendelige eller “dumme” komponenter til at tage sig af fælles opgave.
dette holder side specifik logik til en enkelt komponent, mens indkapsling al den rutinemæssige kode og funktionalitet i genanvendelige bidder.
en af de største fejl, jeg har set, er at videregive data til børnekomponenter, der ændrer dataene, antager en meget specifik brugssag eller kommunikerer via tjenester overalt. Dette gør dem til sidst svære at forstå/teste og slet ikke genanvendelige, da de bliver hårdt kodet til specifikke brugssager.
din første “Hej Verden” komponent
den enkleste komponent muligt ville se noget som dette. Bemærk, hvordan ligner direktiver disse er.
angular.module('app', )
.component('myComponent', {
template:'<h1>Hello World</h1>'
}
);
det er værd at bemærke, at direktiver stadig er tilgængelige for udviklere. Der er nogle sjældne tilfælde, hvor du stadig vil bruge et skabelondirektiv over en komponent. Muligvis hvis du var afhængig af en kompilerings-eller linkfase…. men direktiver bør bruges som attributter til at tilføje andre funktioner til en komponent … for eksempel, måske du ønskede at tilføje tilladelse baseret sikkerhed, hvis en komponent skal være tilgængelig eller ikke til en bruger.
når du er i tvivl favoriserer komponentmodellen. Du ønsker at konstruere din app som et træ af komponenter. Se AngularJS docs for mere info om komponenter vs direktiver. Direktiver bør tænkes på komponenter uden skabeloner, der bruges til at forbedre komponenter.
Bindingsindstillinger
Komponentparametre sendes via egenskaben bindings. Svarende til den gamle måde at tildele direktiv anvendelsesområde 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
Komponentkommunikation
Antag, at vi laver en messenger-app. Hovedvisningen er en sideniveaukomponent med en genanvendelig kontaktlistekomponent. Vi ønsker at bruge kontaktlistekomponenten i andre områder af vores applikation, så det er vigtigt at gøre dette så genanvendeligt som muligt.
kontaktlistekomponenten har et enkelt formål. For at gengive listen over tilgængelige kontakter fra serveren og output de foretagne valg.
messenger-komponenten skal acceptere valg foretaget fra kontaktlistekomponenten og føje dem til modtagerlisten.
