Wanneer je een applicatie ontwikkelt krijg je vaak nieuwe inzichten om de applicatie te optimaliseren. Je bent dit zeker al tegengekomen waardoor er waarschijnlijk al heel wat van je code in de vuilnisbak is beland.
Tijdens het ontwikkelen van Angular applicaties heb ik volgende tips & tricks genoteerd. Je kan ze lezen in de rest van deze blog.
Tips & tricks
- Maak gebruik van modules
- Private services in componenten
- Swagger API client generator
- Global http error handling
- Global http loading spinner
- Route service
- Form consts
- Compodoc
1. Maak gebruik van modules
Een veelvoorkomend feit is dat alles in de AppModule terecht komt. Hierdoor is het moeilijk om de structuur te vinden in je applicatie, met de welgekende spaghetticode tot gevolg. Om dit te voorkomen is het aangeraden om verschillende modules in je applicatie te gebruiken. Daarnaaast kan je op deze manier ook gebruik maken van lazy-loading van modules.
Standaard worden alle modules ingeladen, ongeacht je deze al dan niet onmiddellijk gebruikt.
Het spreekt voor zich dat dit bij grote applicaties de laadtijd aanzienlijk doet verhogen. Door gebruik te maken van lazy-loading ga je enkel de modules inladen op het moment dat je ze nodig hebt. Dit zal de laadtijd sterk verminderen.
Feature Module
Voor elke specifieke onafhankelijke functionaliteit of feature is het aangeraden om een andere module te maken zodat de code gescheiden blijft. Deze module noemen we een feature module.
Core Module
De core module is een module die maar één keer geïmporteerd wordt in de AppModule en dus niet in de andere modules.
Alle services die slechts één instantie per applicatie mogen hebben (singleton-services) moeten hier worden geïmplementeerd.
Shared Module
De shared module is een module die gedeelde componenten, directives en pipes bevat en die geïmporteerd wordt in feature modules.
Maak je gebruik van andere modules zoals Angular Material module, dan moet je deze enkel in je shared module importeren. Wanneer je feature modules de shared module importeren kunnen ze op die manier gebruik maken van de Angular Material module. Je moet zo je andere modules maar een keer importeren.
Het gebruik van services in shared modules is afgeraden omdat je te veel instances zal krijgen van die service.
De componenten in de shared module injecteren geen services van andere modules uit je applicatie. Door gebruik te maken van attributen in je componenten kan je de nodige data ontvangen.
Het is belangrijk om te onthouden dat de shared module geen afhankelijkheden mag hebben met de rest van de applicatie.
2. Private services in componenten
Je schrijft best zo weinig mogelijk logica in je componenten. Daarom is het ook aan te raden om private services in je componenten toe te passen. De meest gekende services zijn globale services. Deze zijn beschikbaar over de hele applicatie en zijn singleton.
Private services gebruik je enkel in die specifieke component. Deze zorgen er eveneens voor dat je code overzichtelijk en eenvoudig onderhouderbaar is. De life-cycle van de private service is op deze manier gelijk aan de life-cycle van je component.
In ons voorbeeld is de DetailPageService een private service.
In de DetailComponent page is deze DetailPageService gedefinieerd als provider. De life-cycle van de service is dus dezelfde als die van de pagina. Bij het verlaten van de pagina zal op deze manier de state van de service gereset zijn.
3. Swagger API client generator
De Swagger Codegen zal je heel wat werk besparen door automatisch HTTP-services te genereren uit de swagger API-beschrijving.
Wanneer er aanpassingen aan de API gebeuren, moet je enkel een nieuwe client genereren. Zo ben je zeker dat de communicatie tussen de Angular applicatie en de API vlekkeloos zal blijven verlopen.
Je zal op deze manier compilatiefouten krijgen wanneer er models of end-points werden aangepast.
Het aanmaken van een API client via Swagger Codegen of eenvoudig online via: https://editor.swagger.io
4. Global http error handling
Wanneer een HTTP-request naar je API om de één of andere reden een fout geeft, kan je deze fout best globaal opvangen. In Angular kan je dat doen door gebruik te maken van een HTTP Interceptor. De HTTP Interceptor geeft je de mogelijkheid om HTTP-requests en HTTP-response te onderscheppen, te transformeren of af te handelen voordat ze worden doorgeven. Op deze manier kan je o.a. ook de headers wijzigen, authenticatietokens toevoegen enz…
Door een HTTP Interceptor in de AppModule te registreren, kan je alles globaal afhandelen.
5. Global http loading spinner
Net zoals voor de globale error handling, kan je voor een loading spinner best gebruik maken van een HTTP Interceptor. Het principe is net hetzelfde.
6. Route service
Door gebruik van een eigen route service, zorg je ervoor dat je routes op één plaats gedefinieerd zijn. Zo voorkom je typo’s, en ook wanneer er een route moet aangepast worden, moet je dit maar op één plaats doen.
7. Form consts
De formulier constanten zijn te vergelijken met de route service. Ze helpen typo’s te voorkomen en geven compilatiefouten wanneer je een foute constante gebruikt.
8. Compodoc
Met Compodoc kan je eenvoudig documentatie genereren voor je Angular project. Een must voor elke applicatie!
