Billede af Aphinya Dechalert. Titel: Red Monster learning Angular

19 ting, du har brug for for at lære at blive en effektiv vinkeludvikler

En omfattende guide til hvordan man bliver pro hos Angular

En todo-app svarer til en 'Hello world' applikation til front-end-udvikling. Mens det dækker CRUD-aspektet ved oprettelse af en app, ridser det ofte kun overfladen på, hvad en ramme eller et bibliotek kan gøre.

Vinkel synes altid at ændre sig og opdateres - men i virkeligheden er der visse ting, der forbliver de samme. Her er en oversigt over de kernekoncepter, du skal lære, når det kommer til Angular for korrekt at udnytte JavaScript-rammen.

Der er meget at lære, når det kommer til Angular, og mange af os sidder fast i begynderkredsen, simpelthen fordi vi ikke ved, hvor vi skal hen, eller hvad vi skal søge op. Dette er en omfattende guide (og en hurtig oversigt over selve Angular), som jeg ønskede, at jeg havde, da jeg først startede med Angular 2+.

1. Modular vinkelarkitektur

I teorien kan du placere al din vinkelkode på en side og i en massiv funktion, men den anbefales ikke, og det er heller ikke en effektiv måde at strukturere din kode og besejre formålet med Angular's eksistens.

Angular bruger modulbegrebet kraftigt som en del af rammets arkitektur. Dette henviser til indsamlingen af ​​kode, der har en enkelt grund til eksisterende. Din kantede app består i det væsentlige af moduler - nogle står alene og nogle deles.

Der er flere måder at strukturere dine moduler i din applikation, og at grave i de forskellige arkitektoniske strukturer kan også hjælpe med at bestemme, hvordan du skalerer din app, når den vokser. Det kan også hjælpe med at isolere din kode og forhindre kodekobling i at forekomme.

Hvad skal Google:

  • Vinklede arkitekturmønstre
  • Skalerbar vinkel applikationsarkitektur

Min holdning til emnet:

  • Hvad betyder Modular Architecture in Angular endda?

2. Envejs Dataflow og uforanderlighed

Vej tilbage i Angular 1 fangede tovejs binding hjertet fra mange front-end-udviklere. Det var i det væsentlige et af Angular's originale salgspunkt. Men med tiden begyndte det at give problemer med hensyn til ydeevne, da applikationen begyndte at blive mere kompleks.

Det viser sig, at du faktisk ikke har brug for tovejsbinding overalt.

To-vejs binding er stadig mulig i Angular 2+, men kun når det eksplicit anmodes om det af udvikleren - og dermed tvinger personen bag koden til at tænke på retningen og strømmen af ​​deres data. Det giver også applikationen mulighed for at blive mere fleksibel med data ved at bestemme, hvordan data skal flyde.

Hvad skal Google:

  • Vinkeldata-flow bedste praksis,
  • Ensrettet retning i vinkel,
  • Fordele ved envejs bindende

Min holdning til emnet:

  • Fortællingen om ensrettet dataflow i vinkel

3. Attributts- og strukturdirektiver

Et direktiv er en udvidelse af HTML gennem brugerdefinerede elementer. Attributdirektiver giver dig mulighed for at ændre egenskaberne for et element. Strukturelle direktiver ændrer layoutet ved at tilføje eller fjerne elementer fra DOM.

For eksempel er ngSwitch og ngIf strukturelle direktiver, fordi det evaluerer parametrene og bestemmer, om dele af DOM skal eksistere eller ikke.

Attributdirektiver er brugerdefineret adfærd knyttet til elementet, komponenten eller andre direktiver.

At lære at bruge disse to direktiver kan udvide din apps kapacitet og reducere mængden af ​​duplikatkode i dit projekt. Attributdirektiver kan også hjælpe med at centralisere visse adfærd, der bruges på tværs af forskellige dele af appen.

Hvad skal Google:

  • Vinkeldirektiver,
  • Vinklede strukturelle direktiver
  • Vinklede strukturelle direktivmønstre

4. Livscykluskroge til komponenter

Hvert stykke software har sin egen livscyklus, der bestemmer, hvordan noget oprettes, gengives og derefter fjernes. Angular har en komponent livscyklus, der går sådan:

opret → gengiv → gengæld børn → kontroller, når databindede egenskaber ændres → ødelægger → fjernes fra DOM

Vi har evnen til at tilslutte nøglemomenter inden for denne cyklus og målrette den mod bestemte øjeblikke i tid eller begivenhed. Dette giver os mulighed for at oprette passende svar og konfigurere adfærd i henhold til de forskellige faser i komponentens eksistens.

F.eks. Skal du muligvis indlæse nogle data, før siden bliver gengivet. Du kan gøre dette gennem ngOnInit (). Eller måske skal du afbryde forbindelsen fra en database. Dette kan gøres gennem ngOnDestroy ().

Hvad skal Google:

  • Vinklede livscykluskroge
  • Komponentens livscyklus

5. Http og observerbare tjenester

Dette er ikke rigtig en vinkel-specifik funktion, men snarere noget fra ES7. Vinkelformede netop til at implementere det som en del af rammets supportfunktioner og forstå dette oversætter også godt til React, Vue og ethvert JavaScript-relateret bibliotek eller ramme.

Observable tjenester er mønstre, der giver dig mulighed for effektivt at håndtere data - så du kan analysere, ændre og vedligeholde data i et begivenhedsbaseret system. Du kan ikke rigtig undslippe Http og Observables, fordi alt er data.

Hvad skal Google:

  • JavaScript-observerbare mønstre
  • Vinklet HTTP og observerbar
  • ES7 observerbar funktion

6. Smart / dum komponentarkitektur

Når vi skriver vores kantede apps, har vi en tendens til at sætte alt i komponenten. Det er dog ikke nøjagtigt den bedste praksis. Ideen om smarte / stumme komponenter i Angular er noget, der skal talt om mere, især i begynderkredse.

Hvorvidt en komponent er smart / stum, bestemmer dens rolle i det store program for applikationen. Stomme komponenter er ofte statsløse med opførsel, der er let at forudsige og forstå. Gør din komponent stum, når det er muligt.

Smarte komponenter er sværere at forstå, fordi indgange og udgange er involveret. For at udnytte Angular's muligheder korrekt skal du undersøge smart / stum komponentarkitektur. Det giver dig mønstre og tankesæt om, hvordan du nærmer dig din kode og dens forhold til hinanden.

Hvad skal Google:

  • Smart / dum vinkelkomponenter
  • Statsløse dumme komponenter
  • Præsentationskomponenter
  • Smarte komponenter i vinkel

7. Anvendelsesstruktur og bedste praksis

CLI kan kun tage dig så langt, når det kommer til struktur og bedste praksis. At bygge en kantet app (eller enhver applikation generelt) er som at bygge et hus. Der er faste processer, der er optimeret af samfundet gennem årene, hvilket vil resultere i den mest effektive og effektive anvendelse.

Vinkelformet er ingen undtagelse.

De fleste klager over Angular af dem, der prøver at lære det, skyldes ofte manglende strukturel viden; syntaks er let at hente, og den er klar og klar. Anvendelse af strukturel viden kræver imidlertid forståelse af kontekst, krav og hvordan det hele passer sammen på et konceptuelt og praktisk niveau. At lære de forskellige potentielle applikationsstrukturer for Angular og deres bedste praksis giver dig perspektiv på, hvordan du bygger din applikation.

Hvad skal Google:

  • Enkelt repo Angular apps
  • Vinkelbiblioteker, vinkelpakker
  • Vinklede bundter
  • Vinkelformede mikro-apps
  • Monorepo

8. Skabelon bindende syntaks

Binding er prikken over i-JavaScript-rammen. Det er også en af ​​grundene til, at det eksisterer i første omgang. Skabelonbinding brobro mellem rummet mellem statisk HTML og JavaScript. Angular's skabelonbindende syntaks fungerer som facilitator mellem disse to teknologier.

Når du først har lært, hvordan og hvornår du skal bruge dem, bliver det enklere og mindre irriterende at omdanne en statisk side til noget interaktivt. Se på de forskellige scenarier for binding såsom egenskabsbinding, begivenheder, interpolering og tovejs binding.

Hvad skal Google:

  • Vinkelformig binding
  • Vinkelhændelse bindende
  • Vinkelformet tovejsbinding, vinkelinterpolation
  • Vinklede forbipasserende konstanter

9. Funktionsmoduler og routing

Funktionsmoduler er undervurderet, når det kommer til Angular. Det er faktisk en virkelig fantastisk måde at organisere og ringe til hegn af forretningskrav. Det begrænser ansvaret og hjælper med at forhindre kodeforurening i det lange løb.

Der er fem typer funktionsmoduler (domæne, routet, routing, service og widget), og hver beskæftiger sig med en bestemt type funktionalitet. At lære at bruge funktionsmoduler i forbindelse med routing kan hjælpe med at skabe diskrete sæt funktionalitet og anvende en god og klar adskillelse af bekymringer for din applikation.

Hvad skal Google:

  • Vinkelfunktionsmoduler
  • Delte funktionsstrukturer i vinkelformet
  • Udbydere af funktionsmodul
  • Lat ladning med routing og funktionsmoduler

10. Formularer og validering (Reaktive Forms and Validators)

Formularer er en uundgåelig del af enhver frontend-udvikling.

Og med formularer kommer validering.

Der er forskellige måder at konstruere smarte, datadrevne former, når det kommer til Angular. Den mest populære iteration af former er reaktive former. Der er dog andre muligheder derude, nemlig skabelonstyrede og brugerdefinerede validatorer.

At lære, hvordan validatorer fungerer sammen med CSS, hjælper med at fremskynde din arbejdsgang og omdanne din applikation til en klarhåndterings klar plads.

Hvad skal Google:

  • Validering af vinkelform
  • Skabelon drevet validering
  • Reaktiv formvalidering
  • Synkroniserings- og asyncvalidatorer i Angular
  • Indbyggede validatorer
  • Vinkel tilpassede validatorer
  • Validering på tværs af felterne

11. Projektion af indhold

Vinkelformet har en ting, der kaldes indholdsprojektion, som er evnen til at videregive data fra forældre til børnkomponenter effektivt. Selvom dette kan lyde kompliceret, er det faktisk handlingen om at sætte synspunkter inden for visninger for at generere en mastervisning.

Vi forstår ofte indholdsprojektion på et overfladeniveau - når vi hekker børnebilleder inde i en forældresyn. For at udvide vores forståelse er vi imidlertid nødt til også at forstå, hvordan data sendes mellem forskellige synspunkter. Det er her, forståelse af indholdsprojektion er praktisk.

At forstå indholdsprojektion kan hjælpe dig med at bestemme strømmen af ​​din applikations data, og hvor dens mutabilitet opstår.

Hvad skal Google:

  • Vinkelindholdsprojektion
  • Vinkelt forhold mellem forældre og barn
  • Vinkelvisning dataforhold

12. onPush Change Detection

Som standard bruger Angular en standardstrategi for ændringsdetektering. Dette betyder, at komponenter altid vil blive kontrolleret. Selvom der ikke er noget galt i at bruge standarden, kan det være en ineffektiv måde at opdage ændringer på.

Til små applikationer er hastighed og ydelse i orden. Når først din ansøgning er nået til en bestemt størrelse, kan tingene dog blive meget besværlige at køre, især i ældre browsere.

onPush ændringsdetekteringsstrategi vil fremskynde applikationen markant, da det afhænger af specifikke triggere, der skal forekomme i stedet for en konstant kontrol for at se, om der er sket noget.

Hvad skal Google:

  • Angular onPush-ændringsdetektion

13. Ruteværn, forhåndsbelastninger, doven lastning

Hvis du har et login af en eller anden art, har du brug for rutevagter. Ideen om, at du kan beskytte visse visninger mod uautoriserede visninger, er et must-have-krav i mange applikationer. Ruteovervågninger fungerer som en grænseflade mellem din router og den ønskede rute. Det er beslutningstageren, der bestemmer, om en bestemt rute er tilladt adgang eller ej. Der er meget i verdenen af ​​rutevagter, der skal udforskes - nemlig routingbeslutninger baseret på ting som token-udløb, brugerroller-godkendelser og rutepapirer.

Forbelastninger og dobelastning kan også forbedre din brugers oplevelse ved at fremskynde din applikations indlæsningstid. Det er også godt at bemærke, at forhåndsbelastning og doven-indlæsning mere end bare bestemmer, om du vil indlæse et bestemt sæt billeder eller ej. Det kan også forbedre dine medfølgende arkitekturer og indlæse forskellige dele af din applikation, der kan findes på forskellige scopes og domæner.

Hvad skal Google:

  • Vinklede rutevagter,
  • Vinkelgodkendelsesmønstre
  • Vinkelforudladning og modul til ladning af doven
  • Vinklede sikrede rutemønstre

14. Brugerdefinerede rør

Formatering af data har aldrig været lettere med kantede rør. Mens mange af de forkonfigurerede og ud af boksrørene dækker en masse ting som datoer, valuta, procenter og karakterhylster, dækker det ikke alt hvad du nogensinde har brug for.

Det er her brugerdefinerede rør er nyttige. Du kan nemt oprette dine egne filtre og omdanne dataformater til din smag. Det er virkelig nemt at lave så gå og tjek det.

Hvad skal Google:

  • Vinkelformede tilpassede rør

15. @viewChild og @ContentChild Decorators

viewChild og contentChild er måder, hvor din komponent kan tale med hinanden. Poenget med Angular er, at du har flere komponenter, der er samlet sammen som et puslespil, men det puslespil kan ikke rigtig gøre meget, hvis brikkerne er isoleret fra hinanden.

Det er her viewChild og contentChild kommer ind. At lære at bruge disse to dekoratører giver dig mulighed for at få adgang til relaterede komponenter. Dette gør opgaven med datadeling lettere og overføre data og begivenheder, der er udløst af tilknyttede komponenter, mulig.

Hvad skal Google:

  • Vinkeldekoratører
  • viewchild og contentchild i Angular
  • Deling af vinkelkomponenter

16. Dynamiske komponenter og ng-skabelon

Komponenter er byggestenene til Angular. Dog er ikke alle komponenter faste og skal oprettes i farten snarere end forudkompileret på forhånd.

Dynamiske komponenter giver appen mulighed for at oprette visse komponenter undervejs. Statiske komponenter antager, at tingene ikke vil ændre sig. Det er forudsigeligt med forventede input og output.

Dynamiske komponenter gengives dog efter behov. De bliver ganske praktiske, når du konstruerer en app, der muligvis lytter til eksterne kilder og deres opdateringer eller er reaktioner på handlinger, der opstod på siden.

Hvad skal Google:

  • Dynamiske komponenter i vinkel
  • Dynamiske komponenter en ng-templating

17. @Host @Hostbinding og eksportAs

@Host, @Hostbinding og eksportAs er vinkeldirektive dekoratører, der udvider de parametre, den er knyttet til. Det giver dig også muligheden for at oprette kortfattede skabeloner til eksport til forbrug i applikationen.

Hvis ovenstående lyder forvirrende, skal du starte med at slå op vinkeldirektiver og deres formål med eksisterende. @Host, @Hostbinding og eksportAs er funktioner i direktiver, der hjælper med at gøre det til det, det er.

Hvad skal Google:

  • Vinkeldirektionsmønstre,
  • @Host, @Hostbinding og eksportAs i vinkel

18. Statsledelse med RxJ'er

Tilstanden for din applikation bestemmer i sidste ende de data, der vises for din bruger. Hvis din tilstand er et rod med spaghetti, er chancerne for, at hele din datastruktur bliver uklar og smuldrer mod eventuelle ændringer.

Når du begynder at forstå, hvordan stater fungerer i Angular, vil du forstå, hvordan og hvorfor dine data opfører sig, som de er.

Mens Angular har sit eget statsstyringssystem, er RxJs en fantastisk metode til at centralisere stater og dens tilknyttede data. Data kan gå tabt i kæden for forældre-barn-forhold. RxJs afkobler dette ved at oprette en centraliseret butik.

Hvad skal Google:

  • Vinkelformede RxJ'er
  • Flux / Redux-principper
  • Vinklede statsstyringsprincipper

19. Indsprøjtning til afhængighed og zoner

Afhængighedsinjektion er generelt et massivt koncept, så hvis du ikke er for godt bevandret i ideen, er dette en af ​​de ting, du virkelig har brug for for at slå op. Der er flere måder at rent skabe afhængighedsinjektioner inden for vinkelformet, mest opnået gennem konstruktøren. Det er en måde at importere kun de ting, du har brug for, og derfor øge effektiviteten af ​​din applikation i stedet for at indlæse alt under solen.

Ligesom afhængighedsinjektion er zoner også en idé, der heller ikke er eksklusiv for Angular. Det er en måde for applikationen at registrere asynkrone opgaver fra start til slut. Dette er vigtigt, fordi disse asyncopgaver har magten til at ændre de interne tilstande i applikationen og derfor synspunktet. Zoner letter processen for ændringsdetektering.

Hvad skal Google:

  • Vinkelzoner
  • Afhængighedsinjektioner
  • Vinkel DI

Afsluttende ord

Vinkelformet er et massivt emne. Mens bygning af kantede apps kan hjælpe læringsprocessen, ved du nogle gange bare ikke, hvad du ikke ved. Det er svært at kende det ukendte, når du begynder, og forhåbentlig har denne korte guide givet dig en vis oplysning ud over dine sædvanlige vinkel-tutorials sammen med et større og mere omfattende kig på Angular generelt.

Lad os holde os tilsluttet og deltage i min fantastiske nyhedsbrevliste for web-fordøje.Tak for at have læst.❤

Aphinya