Het hoofddoel van deze opleiding is om deelnemers vertrouwd te maken met het Angular-framework en hoe ze het kunnen gebruiken voor het ontwikkelen van moderne web toepassingen. Na afloop van de opleiding moeten deelnemers in staat zijn om Angular-projecten op te zetten, componenten te creëren, gegevens te beheren, routing toe te passen, en effectief samen te werken met web-API's

‍

Kennis/vaardigheden verworven na afloop van de opleiding; de deelnemer zal in staat zijn om

Angular-projecten op te zetten en te beheren.

Componenten te creëren en effectief te gebruiken.

Gegevens te beheren met behulp van data-binding en data-interpolatie.

Routing toe te passen in Angular-toepassingen.

Services te gebruiken voor IoC en HttpClient voor asynchrone HTTP-verzoeken.

Modelklassen te maken en te gebruiken.

Gegevens uit te wisselen tussen verschillende componenten.

Omgevingsvariabelen correct te beheren.

‍

Deze opleiding is bedoeld voor mensen die een introductie willen krijgen tot het gebruik van het Angular JavaScript-framework voor het ontwikkelen van web toepassingen. Het richt zich specifiek op deelnemers die al enige voorkennis hebben in Java,REST, webservices en web technologieën

De opleiding wordt zowel via instructeur-geleide lessen als zelfstudie aangeboden. Deelnemers zullen praktische oefeningen en opdrachten krijgen om hun vaardigheden te oefenen.De nadruk ligt op hands-on leren, waarbij deelnemers actief bezig zijn met het schrijven van code en het oplossen van programmeervraagstukken.

Hardwarevereisten: Deelnemers moeten toegang hebben tot een computer of laptop met internetverbinding en administratieve rechten. Het is ook aanbevolen om een modernere computer te gebruiken (minstens quad-core CPU, minstens 8GBRAM).

Softwarevereisten: Deelnemers moeten Node.js, NPM en Angular CLI installeren. Ze moeten ook een teksteditor of een geïntegreerde ontwikkelomgeving (IDE) gebruiken voor het schrijven van TypeScript-code. Git moet ook geïnstalleerd zijn en deelnemers moeten beschikken over een GitLab en GitHub account.

‍

‍

Angular in de wereld van Web

1. Introductie tot JS Frameworks

• Samenvatting statische websites vs. dynamische full-stack web apps en overzicht JS frameworks.
• Inleiding Angular
• Interactieve quiz.

2. TypeScript

• Wat is TypeScript.
• Hands-on: Installatie Node, NPM, TypeScript Compiler.
• Hands-on: Een eerste ‘Hello World’ TypeScript project opbouwen en uitvoeren.
• Praktische demo: Basis TypeScript syntax (variabelen, datatypes, modules, OOP, Error-handling, a.d.h.v. ‘Hello World’ project.
• Oefeningenbundel: 5 TypeScript oefeningen (rekenmachine, dagen van de week, BMI, Studenten, tekstanalyse, Webshop).

3. Up & Running met Angular

• Samenvatting “Angular Features” en “Nut van een JS Framework”.
• Hands-on: Installatie Angular CLI.
• Hands-on: Een eerste “Hello World” Angular project opbouwen en uitvoeren.
• Overzicht en interactieve uitleg: Structuur van een Angular project.
• Hands-on: Een eigen “Hello Angular” (met Bootstrap) project opbouwen en uitvoeren.

4. Angular Componenten en Routing

• Overzicht en interactieve uitleg: Wat zijn Angular componenten (voorbeeld zelf component aanmaken en onderdelen bestuderen).
• Overzicht en interactieve uitleg: Router, Routes en Router Outlet, ook met toegevoegde SPA uitleg.

• Hands-on: Een homepagina, “About” pagina en “Contact” pagina aanmaken a.d.h.v. componenten en routing.
• Opdracht: The Planets (navbar, footer, homepagina, blog, sign up).

5. Data binding, directives & pipes

• Demo: Wat is tekst interpolatie en hoe gebruiken we het.
• Hands-on: Footer met tekst interpolatie, en planeet-objecten in het The Planets project.
• Demo: Wat is property binding en hoe gebruiken we het.
• Hands-on: href Wikipedia URL voor de planeet-objecten, interactief wachtwoord veld bij de Sign Up.
• Demo: Wat is event binding en hoe gebruiken we het.
• Hands-on: Event-driven wachtwoord veld, fun-fact loader.
• Demo: Structurele en attribute directives.
• Hands-on: Cookies banner met ngIf “accepted”.
• Hands-on: Array van planeet-objecten met ngFor.
• Overzicht en interactieve uitleg: Pipes – wat en hoe.
• Opdracht: Blog posts (met interactieve Like knopjes) in The Planets

6. Robuustheid met models

• Overzicht en interactieve uitleg: Type-safety en robuustheid via model-klassen en via interfaces.
• Hands-on: Type-safety overhaul voor The Planets.

7. Services & DI

• Overzicht en interactieve uitleg: Dependency injection en Services.
• Hands-on: PlanetService aanmaken en bestuderen, vervolgens gebruiken om planeten te beheren/injecteren waar nodig.

• Opdracht: BlogService om blog posts dynamisch te beheren en injecteren.
• Opdracht: Pizzeria webshop met interactieve menu en shopping cart.

8. Communicatie tussen ouder/kind componenten

• Overzicht en interactieve uitleg: Praten met kind componenten a.d.h.v. @Input.
• Hands-on: Planeet rijen en Blog posts vervangen met kind componenten.
• Overzicht en interactieve uitleg: Praten met ouder componenten a.d.h.b. @Output.

9. Communicatie met een API via HttpClient

• Overzicht en interactieve uitleg: Samenvatting de rol van APIs in full-stack web apps, HtppClient en Observables, HTTP-requests verzenden en HTTP-responses aanvaarden/verwerken.
• Hands-on: Stranger Things quote generator.
• Opdracht: Weer app.
• Opdracht: Pokemon app.
• Overzicht en interactieve uitleg: Omgevingsvariabelen correct opslaan en gebruiken.
• Hands-on: Vervang hardcoded URLs met omgevingsvariabelen.

10. Forms en validatie

• Overzicht en interactieve uitleg: Forms in Angular (template-driven vs. reactive).
• Hands-on: Sign up pagina in The Planets.
• Opdracht: Interactieve Shopping lijst.
• Opdracht: Quiz App.

Doelstellingen

Aan het einde van de training moeten de deelnemers in staat zijn om:

• Het onderscheid te maken tussen statische websites en dynamische full-stack webapplicaties en een overzicht te geven van verschillende JavaScript-frameworks.
• TypeScript te begrijpen en te gebruiken, inclusief de installatie van Node, NPM en de TypeScript-compiler.
• Basis TypeScript-syntax, variabelen, datatypes, modules, OOP en error-handling te begrijpen en gebruiken om toepassingen op te bouwen.
• Een Angular-project op te zetten, te installeren en uit te voeren met behulp van de Angular CLI.
• De structuur van een Angular-project te begrijpen en een eenvoudig Angular-project met Bootstrap te maken.
• Angular-componenten en routing te begrijpen, inclusief het maken van verschillende pagina's met behulp van componenten en routing.
• Data binding, directives en pipes in Angular te gebruiken, zoals tekstinterpolatie, property binding, event binding, structurele en attribuutdirectives, en pipes.
• Modelklassen en interfaces te gebruiken voor typeveiligheid en robuustheid in Angular.
• Dependency injection en services te begrijpen en te gebruiken om gegevens te beheren en injecteren.
• Communicatie tussen ouder- en kindcomponenten in Angular te begrijpen en implementeren met behulp van @Input en @Output.
• Communicatie met een externe API via HttpClient in Angular te begrijpen en HTTP-requests te verzenden en verwerken.
• Omgevingsvariabelen correct op te slaan en te gebruiken in Angular-toepassingen.
• Formulieren in Angular te begrijpen, zowel template-driven als reactive, en validatie toe te passen.