Module 11: Angular

Question 1

Wat is Angular?

Answer 1

Angular is een door Google ontworpen cross-platform front-end framework waarmee webapplicaties ontwikkeld kunnen worden.

Question 2

Wat zijn de voordelen van Angular ten opzichte van statische HTML in combinatie met JavaScript?

Answer 2

• Snelheid
• Cross platform
• Structuur
• Volledig
• Productiviteit

Question 3

Wat maakt Angular snel?

Answer 3

De standaard Angular compiler optimaliseert code door middel van treeshaking, wat betekenet dat code die niet gebruikt wordt, niet meegenomen wordt bij het bundelen van de JavaScript code.

Angular biedt ook de mogelijkheid tot lazy-loading van modules (meer over modules later), wat inhoud dat delen van je code pas worden ingeladen zodra nodig. Dit voordeel komt goed naar voren zodra je werkt aan grote enterprise applicaties.

Question 4

Angular is wat ze noemen noemen opinionated. Wat houdt dit in?

Answer 4

Het heeft een filosofie over hoe de applicatie gestructureerd moet worden. Omdat frontend projecten steeds groter worden, is het voordeel bij opinionated frameworks dat je de structuur zal herkennen

Question 5

Wat is een Angular module?

Answer 5

Een module is een manier om samenhangende functionaliteit te bundelen. Ze kunnen componenten, services en andere functionaliteiten bevatten.

Question 6

Wat is een Angular component?

Answer 6

Componenten zijn de primaire bouwblokken van je applicatie. Een component bestaat uit een Typescript class, waarmee je applicatie data en logica wordt beschreven. Ook bevat deze (of referentie naar) een template dat gebruikt wordt om het component te renderen op het scherm.

Een view zou dan ook een meer traditionele naam zijn voor een component.

Question 7

Wat is een Angular service?

Answer 7

Services zijn classes die data en logica bevatten die niet hoort bij een specifieke view of component en daarmee over meerdere componenten te gebruiken is. Denk hierbij aan bijvoorbeeld het ophalen van data uit backend systemen.

Question 8

Wat is een Angular directive?

Answer 8

Een directive is een herbruikbare functionaliteit bedoeld om het uiterlijk of gedrag van een DOM element aan te passen. Een voorbeeld hiervan is de *ngIf die een element verbergt of toont op basis van een boolean variabele of operatie. Een ander onwaarschijnlijk voorbeeld van een directive is een component, maar dan met een template er aan verbonden.

Question 9

Uit welke declaratie onderdelen bestaat een Angular module?

Answer 9

• Imports
• Exports
• Declerations
• Providers
• Bootstrap

Question 10

Wat is de Angular module declaratie ‘imports’?

Answer 10

In de import declaratie geef je aan welke modules de huidige module gebruik van maakt. Alle exports en providers van die module zijn vanaf dat moment ook beschikbaar binnen deze module.

Veel gebruikte geïmporteerde modules:
@angular/platform-browser::BrowserModule
@angular/common::CommonModule
@angular/forms::FormsModule
@angular/router::RouterModule
@angluar/common/http::HttpClientModule

Question 11

Wat is de Angular module declaratie ‘exports’?

Answer 11

Hier geef je een lijst aan wat deze module beschikbaar stelt aan andere modules. Alle componenten van een module zijn dus ‘private’ zolang deze niet geëxporteerd worden. Alles wat je wilt exporteren moet ook geïmporteerd of gedeclareerd zijn in deze module.

Question 12

Wat is de Angular module declaratie ‘declerations’?

Answer 12

Hier geef je met een lijst aan welke componenten, pipes ed. gedefinieerd worden binnen deze module. En dus ook welke componenten je in je templates kunt gebruiken (of pipes of directives).

Een importerende module hoeft niet nog een keer een declaration te doen voor geïmporteerde componenten. Nogmaals een declaration levert dan ook een foutmelding binnen Angular op .

Question 13

Wat is de Angular module declaratie ‘providers’?

Answer 13

In de providers geef je met een lijst aan welke onderdelen van deze module gebruikt kunnen worden voor Dependency Injection (DI). Importerende modules hebben dan ook toegang tot deze providers.

Question 14

Wat is de Angular module declaratie ‘bootstrap’?

Answer 14

Met bootstrap definieer je een lijst van componenten die gecreëerd moeten worden, dus een lijst met de root elementen die je wilt gebruiken (ofwel de entrypoints). In vele gevallen zul je maar 1 root element/component hebben (AppComponent).

Question 15

Uit welke onderdelen bestaat een Angular component?

Answer 15

• Template
• View logic
• Styling
• Unittest

Question 16

Wat zijn de life-cycle hooks van een Angular component? (in volgorde)

Answer 16

constructor
Deze wordt aangeroepen wanneer Angular het component of directive wordt gecreeerd door middel van het new commando.

ngOnChanges()
Wordt aangeroepen voor ngOnInit() en wanneer 1 of meer data-bound input properties veranderen.

ngOnInit()
Wordt 1 keer aangeroepen na de eerste ngOnChanges().

ngDoCheck()
Worden elke detection run aangeroepen, direct na ngOnChanges() en ngOnInit(). Kan gebruikt worden om je eigen detectie algoritme te implementeren.
(Er wordt geadviseerd deze methode niet in combinatie met ngOnChanges() te gebruiken)

ngAfterContentInit()
Wordt 1 keer aangeroepen na de eerste ngDoCheck().

ngAfterContentChecked()
Wordt aangeroepen na ngAfterContentInit() en elke ngDoCheck().

ngAfterViewInit()
Wordt 1 keer aangeroepen na de eerste ngAfterContentChecked().

ngAfterViewChecked()
Wordt aangeroepen na ngAfterViewInit en elke ngAfterContentChecked().

ngOnDestroy()
Wordt aangeroepen vlak voor het component wordt vernietigd. Gebruik deze hook om bijvoorbeeld te unsubscriben van Observables, event handlers te detachen of andere langlopende processen te stoppen om memory leaks tegen te gaan.

Question 17

Hoe kan ngOnDestroy() worden gebruikt om memory leaks te voorkomen?

Answer 17

Gebruik deze hook om bijvoorbeeld te unsubscriben van Observables, event handlers te detachen of andere langlopende processen te stoppen om memory leaks tegen te gaan.

Question 18

Wat is routing in Angular?

Answer 18

Routing in Angular is de techniek om binnen een Angular applicatie de navigatie state (veelal de URL) te kunnen koppelen aan een view. Ofwel het kunnen navigeren tussen componenten.

Question 19

Uit welke onderdelen bestaat Angular routing?

Answer 19

• de Router;
• een Route;
• en de Router-outlet.

Question 20

In tegenstelling tot bijvoorbeeld Java biedt Angular de mogelijkheid tot meerdere injection pools in plaats van alleen applicatiebreed. Hiermee kan je per potentieel geïnjecteerde class bepalen op welk niveau deze geïnjecteerd kan worden. Op welke manieren kan je die configureren?

Answer 20

• @Injectable boven een class declaratie
• @NgModule in de module declaratie
• @Component op component niveau

Question 21

Wat is een TestBed?

Answer 21

De TestBed is een door Angular aangeboden testing framework die de brug vormt tussen Jasmine en Angular. Dit framework maakt het mogelijk om componenten te creëren, dependency injection zijn werk te laten doen, om testen asynchroon van elkaar te kunnen draaien en te kunnen interacteren met Angular views.

Question 22

Wat is een Guard?

Answer 22

Met een guard bescherm je route van toegang als bijvoorbeeld een rol van toepassing is.

Question 23

Welke Guard interfaces zijn er?

Answer 23

• CanActivate
• CanActivateChild
• CanDeactivate
• Resolve
• CanLoad

Question 24

Wat doet de CanActivate guard interface?

Answer 24

De CanActivate guard interface wordt gebruikt bij het bepalen of navigatie naar een component toegestaan is. Als een lazy-loaded module ingeladen wordt, wordt er eerst gekeken naar de bijbehorende route zijn CanActive guard en of deze true retourneerd voordat componenten e.d. verder ingeladen worden.

Question 25

Wat doet de CanActivateChild guard interface?

Answer 25

De CanActivateChild is hetzelfde als de CanActivate, maar richt zich meer op het mogen navigeren van child routes. Deze moet dan ook toegepast worden op een parent route.

Question 26

Wat doet de CanDeactivate guard interface?

Answer 26

In tegenstelling tot de vorige route guards bepaalt de CanDeactive of het mogelijk is om weg te navigeren van een route. Dit is bijvoorbeeld te gebruiken om te kijken of gebruikers wijzigingen wel opgeslagen zijn of als er niet terug genavigeerd mag worden omdat het gaat over een speciaal proces.

Question 27

Wat doet de Resolve guard interface?

Answer 27

Resolve wordt niet gebruikt om te bepalen of een gebruiker naar een route mag navigeren, maar hoe dit gebeurt voordat de navigatie daadwerkelijk gestart wordt. Denk hierbij aan het ophalen van data voordat een component ingeladen wordt of navigeren op basis van een id, maar de bijbehorende naam eerst op te halen en die verder te gebruiken voor navigatie.

Question 28

Wat doet de CanLoad guard interface?

Answer 28

De CanLoad bepaalt in het geval van een lazy-loaded module (en diens routes) of deze wel of niet ingeladen mag worden op basis van de resultaten van een implementatie van deze interface. Hiermee kan bijvoorbeeld een gehele admin-module alleen ingeladen worden als de huidige gebruiker de admin rol heeft.

Question 29

Wat is een Observable?

Answer 29

Observables worden gebruikt als communicatiemiddel om berichten tussen publishers en subscribers te versturen. Een publisher kan berichten aanbieden zoals een lijst van gebruikers, een subscriber kan deze vervolgens binnenhalen door zich daarop te registreren. Dit is te vergelijken met een stream, aan een observable kunnen continue items worden toegevoegd. Het voordeel van observables is dat je meerdere items kunt versturen en dat de API hierbij gelijk blijft, ook in het geval van asynchrone data.

Question 30

Wat is het verschil tussen Atrribute- en structural directives?

Answer 30

Met structural directives worden directives bedoeld die een aanpassing doen in structuur van je template, bijvoorbeeld een *ngif, *ngFor of ngSwitch. Met attribute directives worden directives bedoeld die een aanpassing doen aan attributen van een element. Veel voorkomend is een aanpassing op de styling, bijvoorbeeld een highlight directive.