Afbeelding door Aphinya Dechalert. Getiteld: Red Monster learning Angular

19 dingen die je moet leren om een ​​effectieve hoekige ontwikkelaar te worden

Een uitgebreide gids over hoe je een professional kunt worden bij Angular

Een todo-app is het equivalent van een 'Hallo wereld'-applicatie voor front-end ontwikkeling. Hoewel het het CRUD-aspect van het maken van een app behandelt, krast het vaak alleen het oppervlak van wat een framework of bibliotheek kan doen.

Angular lijkt altijd te veranderen en bij te werken - maar in werkelijkheid zijn er bepaalde dingen die hetzelfde blijven. Hier is een overzicht van de kernconcepten die u moet leren als het gaat om Angular om het JavaScript-framework goed te benutten.

Er is veel te leren als het gaat om Angular en velen van ons komen vast te zitten in de cirkel van de beginner, simpelweg omdat we niet weten waar we naartoe moeten of wat we moeten zoeken. Dit is een uitgebreide gids (en een korte samenvatting van Angular zelf) die ik wou dat ik had toen ik voor het eerst met Angular 2+ begon.

1. Modulaire hoekarchitectuur

In theorie kun je al je Angular-code op één pagina en in een enorme functie plaatsen, maar het wordt niet aanbevolen, noch is het een efficiënte manier om je code te structureren en het doel van het bestaan ​​van Angular te verslaan.

Angular maakt intensief gebruik van het concept van modules als onderdeel van de architectuur van het framework. Dit verwijst naar de verzameling code die maar één reden heeft om te bestaan. Uw Angular-app bestaat in wezen uit modules - sommige staan ​​op zichzelf en sommige worden gedeeld.

Er zijn meerdere manieren om uw modules in uw applicatie te structureren en door in de verschillende architecturale structuren te graven, kunt u ook bepalen hoe u uw app schaalt terwijl deze groeit. Het kan ook helpen uw code te isoleren en te voorkomen dat codekoppeling optreedt.

Wat te Google:

  • Hoekige architectuurpatronen
  • Schaalbare hoekapplicatiearchitectuur

Mijn mening over het onderwerp:

  • Wat betekent Modular Architecture in Angular eigenlijk?

2. Eenrichtingsgegevensstroom en onveranderlijkheid

Lang geleden in Angular 1 veroverde tweerichtingsbinding de harten van veel front-end ontwikkelaars. Het was in wezen een van Angular's oorspronkelijke verkoopargument. Na verloop van tijd begon het echter problemen op te leveren met betrekking tot de prestaties toen de applicatie complexer werd.

Het blijkt dat je eigenlijk geen tweerichtingsbinding nodig hebt.

Tweerichtingsbinding is nog steeds mogelijk in Angular 2+, maar alleen wanneer de ontwikkelaar hier expliciet om vraagt ​​- waardoor de persoon achter de code wordt gedwongen na te denken over de richting en stroom van zijn gegevens. Het stelt de applicatie ook in staat om flexibeler te worden met gegevens door te bepalen hoe gegevens moeten stromen.

Wat te Google:

  • Best practices voor hoekige datastromen,
  • Unidirectionele stroom in hoekig,
  • Voordelen van bindend in één richting

Mijn mening over het onderwerp:

  • The Tale of Unidirectional Dataflow in Angular

3. Attribuut en structurele richtlijnen

Een richtlijn is een uitbreiding van HTML via aangepaste elementen. Met kenmerkrichtlijnen kunt u de eigenschappen van een element wijzigen. Structurele richtlijnen veranderen de lay-out door elementen toe te voegen of te verwijderen uit de DOM.

NgSwitch en ngIf zijn bijvoorbeeld structurele richtlijnen omdat het de parameters evalueert en bepaalt of delen van de DOM al dan niet moeten bestaan.

Attribuutrichtlijnen zijn aangepast gedrag gekoppeld aan het element, component of andere richtlijnen.

Als u leert hoe u deze twee richtlijnen kunt gebruiken, kunt u de mogelijkheden van uw app uitbreiden en de hoeveelheid dubbele code in uw project verminderen. Attribuutrichtlijnen kunnen ook helpen bij het centraliseren van bepaald gedrag dat in verschillende delen van de app wordt gebruikt.

Wat te Google:

  • Richtlijnen voor hoekkenmerken
  • Hoekige structurele richtlijnen
  • Hoekige structurele richtlijnpatronen

4. Componentlevenscyclushaken

Elk stukje software heeft zijn eigen levenscyclus die bepaalt hoe iets wordt gemaakt, weergegeven en vervolgens verwijderd. Angular heeft een componentlevenscyclus die ongeveer zo verloopt:

maken → renderen → kinderen renderen → controleren wanneer gegevensgebonden eigenschappen veranderen → vernietigen → verwijderen uit DOM

We hebben de mogelijkheid om aan te sluiten op belangrijke momenten in deze cyclus en ons te richten op specifieke momenten in de tijd of gebeurtenis. Dit stelt ons in staat om passende antwoorden te creëren en gedrag te configureren volgens de verschillende fasen van het bestaan ​​van de component.

Mogelijk moet u bijvoorbeeld enkele gegevens laden voordat de pagina wordt weergegeven. U kunt dit doen via ngOnInit (). Of misschien moet u de verbinding met een database verbreken. Dit kan worden gedaan via ngOnDestroy ().

Wat te Google:

  • Hoekige levenscyclushaken
  • Component levenscyclus

5. HTTP en waarneembare diensten

Dit is niet echt een specifieke Angular-functie, maar eerder iets van ES7. Angular heeft het net geïmplementeerd als onderdeel van de ondersteuningsmogelijkheden van het framework en begrijp dat dit ook goed vertaalt naar React, Vue en elke JavaScript-gerelateerde bibliotheek of framework.

Waarneembare services zijn patronen waarmee u gegevens effectief kunt verwerken - waarmee u gegevens kunt parseren, wijzigen en onderhouden in een gebeurtenisgebaseerd systeem. Je kunt niet echt ontsnappen aan HTTP en Observables omdat alles data is.

Wat te Google:

  • JavaScript waarneembare patronen
  • Angular HTTP en observables
  • ES7 waarneembare functie

6. Smart / Dumb-componentenarchitectuur

Bij het schrijven van onze Angular-apps hebben we de neiging om alles in de component te stoppen. Dat is echter niet bepaald de beste praktijk. Het idee van slimme / domme componenten in Angular is iets waarover meer moet worden gesproken, vooral in beginnende kringen.

Of een component slim / dom is, bepaalt zijn rol in het grote schema van de applicatie. Domme componenten zijn vaak staatloos met gedrag dat gemakkelijk te voorspellen en te begrijpen is. Maak uw component waar mogelijk dom.

Slimme componenten zijn moeilijker te begrijpen omdat er inputs en outputs bij betrokken zijn. Bekijk de slimme / domme componentenarchitectuur om de mogelijkheden van Angular goed te benutten. Het geeft je patronen en denkrichtingen over hoe je je code en zijn relaties met elkaar kunt benaderen.

Wat te Google:

  • Slimme / domme hoekcomponenten
  • Staatloze domme componenten
  • Presentatie componenten
  • Slimme componenten in hoekig

7. Toepassingsstructuur en beste praktijken

De CLI kan u alleen tot nu toe brengen als het gaat om structuur en best practices. Het bouwen van een Angular-app (of een andere applicatie in het algemeen) is als het bouwen van een huis. Er zijn vaste processen die door de gemeenschap door de jaren heen zijn geoptimaliseerd en die zullen resulteren in de meest effectieve en efficiënte toepassing.

Hoekig is geen uitzondering.

De meeste klachten over Angular door degenen die het proberen te leren, zijn vaak te wijten aan een gebrek aan structurele kennis; de syntaxis is gemakkelijk op te pakken en is duidelijk en duidelijk. Structurele kennis van toepassingen vereist echter inzicht in context, vereisten en hoe dit allemaal op conceptueel en praktisch niveau in elkaar past. Het leren van de verschillende mogelijke applicatiestructuren voor Angular en hun best practices geeft u inzicht in hoe u uw applicatie kunt bouwen.

Wat te Google:

  • Enkele repo Hoekige apps
  • Hoekige bibliotheken, Hoekige pakketten
  • Hoekige bundels
  • Hoekige micro-apps
  • Monorepo

8. Sjabloonbindingssyntaxis

Binding is de kers op het JavaScript-framework. Het is ook een van de redenen om in de eerste plaats te bestaan. Sjabloonbinding overbrugt de ruimte tussen statische HTML en JavaScript. Angular's sjabloonbindingssyntaxis fungeert als facilitator tussen deze twee technologieën.

Als je eenmaal hebt geleerd hoe en wanneer je ze moet gebruiken, wordt het veranderen van een statische pagina in iets interactiefs veel eenvoudiger en minder vervelend. Bekijk de verschillende scenario's voor binding, zoals eigenschapbinding, gebeurtenissen, interpolatie en tweerichtingsbinding.

Wat te Google:

  • Hoekig eigendom bindend
  • Hoekige gebeurtenisbinding
  • Hoekige tweewegbinding, hoekinterpolatie
  • Hoekige passerende constanten

9. Functiemodules en routing

Functiemodules worden onderschat als het gaat om Angular. Het is eigenlijk een echt fantastische manier om zakelijke vereisten te organiseren en af ​​te schermen. Het beperkt verantwoordelijkheden en helpt codevervuiling op de lange termijn te voorkomen.

Er zijn vijf soorten functiemodules (domein, gerouteerd, routering, service en widget) en elk gaat over een bepaald type functionaliteit. Het leren gebruiken van functiemodules in combinatie met routing kan helpen bij het creëren van discrete sets functionaliteit en een goede en duidelijke scheiding van problemen voor uw toepassing.

Wat te Google:

  • Hoekige functiemodules
  • Gedeelde functiestructuren in Angular
  • Providers van functiemodules
  • Lui laden met routing en functiemodules

10. Formulieren en validatie (reactieve formulieren en validators)

Formulieren zijn een onontkoombaar onderdeel van elke front-end ontwikkeling.

En met formulieren komt validatie.

Er zijn verschillende manieren om slimme, datagestuurde formulieren te bouwen als het gaat om Angular. De meest populaire iteratie van vormen is reactieve vormen. Er zijn echter nog andere opties, namelijk sjabloongestuurd en aangepaste validators.

Als u leert hoe validators werken in combinatie met CSS, kunt u uw workflow versnellen en uw applicatie omzetten in een ruimte voor het afhandelen van fouten.

Wat te Google:

  • Validatie van hoekformulieren
  • Sjabloongestuurde validatie
  • Validatie van reactieve formulieren
  • Synchronisatie- en asynchronisatie-validators in hoekig
  • Ingebouwde validators
  • Hoekige aangepaste validators
  • Cross-field validatie

11. Inhoudsprojectie

Angular heeft iets dat inhoudsprojectie wordt genoemd, namelijk de mogelijkheid om gegevens van ouder- naar kindonderdelen effectief door te geven. Hoewel dit misschien ingewikkeld klinkt, is het eigenlijk de handeling om weergaven in weergaven te plaatsen om een ​​hoofdweergave te genereren.

We begrijpen inhoudsprojectie vaak op een oppervlakniveau - wanneer we onderliggende weergaven nestelen in een bovenliggende weergave. Om ons begrip te vergroten, moeten we echter ook begrijpen hoe gegevens tussen verschillende weergaven worden doorgegeven. Dit is waar het begrijpen van inhoudsprojectie van pas komt.

Inzicht in inhoudsprojectie kan u helpen bij het bepalen van de stroom van de gegevens van uw applicatie en waar de veranderbaarheid zich voordoet.

Wat te Google:

  • Hoekige inhoud projectie
  • Hoekige ouder-kind kijkrelatie
  • Hoekige gegevensrelaties

12. onPush Change Detection

Standaard gebruikt Angular een standaardstrategie voor het detecteren van wijzigingen. Dit betekent dat componenten altijd worden gecontroleerd. Hoewel er niets mis is met het gebruik van de standaard, kan het een inefficiënte manier zijn om veranderingen te detecteren.

Voor kleine toepassingen zijn snelheid en prestaties goed. Zodra uw toepassing echter een bepaalde grootte heeft bereikt, kunnen de dingen behoorlijk omslachtig worden, vooral in oudere browsers.

onPush veranderingsdetectiestrategie zal de applicatie aanzienlijk versnellen, omdat het afhankelijk is van specifieke triggers in plaats van een constante controle om te zien of er iets is gebeurd.

Wat te Google:

  • Detectie van hoekig aanzetten

13. Routebewakers, voorladen, Lazy-laden

Als je een login hebt, heb je routebewakers nodig. Het idee dat u bepaalde weergaven tegen ongeautoriseerde weergaven kunt beschermen, is in veel toepassingen een vereiste. Routebewakers fungeren als een interface tussen uw router en de gevraagde route. Het is de beslisser die bepaalt of een bepaalde route toegang heeft of niet. Er is veel in de wereld van routebewakers om te verkennen - namelijk routeringsbeslissingen op basis van dingen zoals verval van tokens, authenticatie van gebruikersrollen en routebeveiliging.

Voorladen en lui laden kan ook de ervaring van uw gebruiker verbeteren door de laadtijd van uw applicatie te versnellen. Het is ook goed om op te merken dat vooraf laden en lui laden meer zijn dan alleen beslissen of je een bepaalde set afbeeldingen gaat laden of niet. Het kan ook uw gebundelde architecturen verbeteren en verschillende delen van uw applicatie laden die op verschillende bereiken en domeinen kunnen bestaan.

Wat te Google:

  • Hoekige routewachten,
  • Hoekige authenticatiepatronen
  • Hoekige voorbelasting en lui ladende modules
  • Hoekige beveiligde routepatronen

14. Aangepaste buizen

Gegevens formatteren was nog nooit zo eenvoudig met hoekige pijpen. Hoewel veel van de vooraf geconfigureerde en out-of-the-box pijpen veel dingen omvatten, zoals datums, valuta, percentages en karaktercasus, dekt het niet alles wat je ooit nodig zult hebben.

Dat is waar aangepaste pijpen van pas komen. U kunt eenvoudig uw eigen filters maken en gegevensindelingen naar wens transformeren. Het is echt gemakkelijk om het te maken, dus ga het bekijken.

Wat te Google:

  • Hoekige aangepaste buizen

15. Decorators van @viewChild en @ContentChild

viewChild en contentChild zijn manieren waarop uw component met elkaar kan praten. Het punt van Angular is dat je meerdere componenten hebt die samen worden gecompileerd als een puzzel, maar die puzzel kan niet echt veel doen als de stukjes van elkaar worden geïsoleerd.

Dat is waar viewChild en contentChild van pas komen. Als je deze twee decorateurs leert gebruiken, heb je toegang tot gerelateerde componenten. Dit maakt de taak van het delen van gegevens eenvoudiger en het overbrengen van gegevens en gebeurtenissen die worden geactiveerd door bijbehorende componenten mogelijk.

Wat te Google:

  • Hoekige decorateurs
  • viewchild en contentchild in Angular
  • Delen van hoekige componenten

16. Dynamische componenten en ng-sjabloon

Componenten zijn de bouwstenen van Angular. Niet alle componenten zijn echter vast en moeten direct worden gemaakt in plaats van vooraf gecompileerd.

Met dynamische componenten kan de app bepaalde componenten direct maken. Statische componenten gaan ervan uit dat dingen niet zullen veranderen. Het is voorspelbaar met verwachte ingangen en uitgangen.

Dynamische componenten worden echter naar wens weergegeven. Ze worden heel handig bij het bouwen van een app die mogelijk op zoek is naar externe bronnen en hun updates of reacties zijn op acties die op de pagina hebben plaatsgevonden.

Wat te Google:

  • Dynamische componenten in hoekig
  • Dynamische componenten en een templating

17. @Host @Hostbinding en export

@Host, @Hostbinding en exportAs zijn hoekige decorateurs die de parameters uitbreiden waaraan het is gekoppeld. Het geeft je ook de mogelijkheid om beknopte sjablonen te maken om te exporteren voor consumptie binnen de applicatie.

Als het bovenstaande verwarrend klinkt, moet je beginnen met het opzoeken van hoekige richtlijnen en hun bestaansrecht. @Host, @Hostbinding en exportAs zijn kenmerken van richtlijnen die helpen te maken wat het is.

Wat te Google:

  • Hoekige richtlijnen patronen,
  • @Host, @Hostbinding en exportAs in hoekig

18. Staatsmanagement met RxJ's

De status van uw toepassing bepaalt uiteindelijk de gegevens die aan uw gebruiker worden weergegeven. Als uw toestand een puinhoop van spaghetti is, is de kans groot dat uw hele gegevensstructuur schilferig wordt en afbrokkelt tegen eventuele wijzigingen.

Wanneer u begint te begrijpen hoe staten werken in Angular, zult u begrijpen hoe en waarom uw gegevens zich gedragen zoals ze zijn.

Hoewel Angular zijn eigen statusbeheersysteem heeft, is RxJs een fantastische methode voor het centraliseren van staten en de bijbehorende gegevens. Gegevens kunnen verloren gaan in de keten van ouder-kindrelaties. RxJs ontkoppelt dit door een gecentraliseerde winkel te creëren.

Wat te Google:

  • Hoekige RxJ's
  • Flux / Redux-principes
  • Angular state management principes

19. Afhankelijkheid injectie en zones

Afhankelijkheidsinjectie is in het algemeen een enorm concept, dus als je niet zo vertrouwd bent met het idee, is dit een van de dingen die je echt moet opzoeken. Er zijn meerdere manieren om netjes afhankelijkheidsinjecties binnen Angular te maken, meestal via de constructor. Het is een manier om alleen de dingen te importeren die u nodig hebt en daarom de efficiëntie van uw toepassing te verhogen in plaats van alles onder de zon te laden.

Net als afhankelijkheidsinjectie, zijn zones ook een idee dat niet exclusief is voor Angular. Het is een manier voor de toepassing om asynchrone taken van begin tot eind te detecteren. Dit is belangrijk omdat deze async-taken de mogelijkheid hebben om de interne status van de toepassing en dus het uitzicht te wijzigen. Zones vergemakkelijken het veranderingsdetectieproces.

Wat te Google:

  • Hoekige zones
  • Afhankelijkheid injecties
  • Hoekige DI

Laatste woorden

Angular is een enorm onderwerp. Hoewel het bouwen van Angular-apps het leerproces kan helpen, weet je soms gewoon niet wat je niet weet. Het is moeilijk om het onbekende te kennen wanneer je begint en hopelijk heeft deze korte gids je wat meer verlichting gegeven dan je gebruikelijke Angular-tutorials, samen met een grotere en uitgebreidere kijk op Angular in het algemeen.

Laten we contact houden en deelnemen aan mijn geweldige nieuwsbrieflijst met weboverzicht. Bedankt voor het lezen.❤

Aphinya