Angular - JavaScript Framework

Wil je professionele, schaalbare webapplicaties ontwikkelen? In deze training leer je Angular, het krachtige JavaScript-framework van Google. Je ontdekt hoe je modulaire, onderhoudbare en dynamische applicaties bouwt met TypeScript.

Wat leer je in deze training?

• Componentgebaseerde architectuur – Bouw herbruikbare UI-componenten voor overzichtelijke code.
• Data binding & directives – Koppel data efficiënt en pas Angular-directives toe voor dynamische content.
• Services & dependency injection – Deel logica tussen componenten en verbeter de prestaties.
• Routing & formulieren – Beheer navigatie en werk met zowel template-driven als reactive forms.
• State management & RxJS – Beheer applicatiestatus met observables en reactive programming.
• Testing & deployment – Schrijf unit tests, debug effectief en deploy je app met Angular CLI.

Deze training is ideaal voor frontend-ontwikkelaars, JavaScript-programmeurs en full-stack developers die Angular willen beheersen.

De training bevat Engelstalig lesmateriaal en wordt gegeven door een Nederlandstalige docent.

• Frontend-beginners die een gestructureerd framework willen leren.
• JavaScript-ontwikkelaars die overstappen naar TypeScript.
• Teams die onderhoudbare en testbare code prioriteren.
• Full-stack developers die Angular willen combineren met .NET/Java.

Dag 1: Angular Basis en Componenten

• Installatie: Node.js, npm, Angular CLI (ng new).
• Projectstructuur: src/app, modules, componenten, services.
• Componenten: @Component, templates ({{data}}), @Input/@Output.
• Data binding: property binding ([value]), event binding ((click)), two-way binding ([(ngModel)]).
• Directives: *ngIf, *ngFor, custom directives.

Dag 2: Services, Routing en Formulieren

• Dependency Injection: @Injectable, services maken en gebruiken.
• Routing: RouterModule, routerLink, route parameters (ActivatedRoute).
• Formulieren: Template-driven forms (ngForm), validatie.
• HTTP Client: API-calls met HttpClient, GET/POST, error handling.

Dag 3: State Management en Afronding

• Reactive Forms: FormGroup, FormControl, dynamische validators.
• State Management: Introductie tot RxJS (BehaviorSubject, Observable).
• Componentcommunicatie: Services vs. @ViewChild.
• Deployment: ng build --prod, hosting op Firebase/Netlify.
• Afsluitend project: Een volledige CRUD-app met API en routing.
• 
  

Programma:

• Basisconcepten:
• Decorators: @Component, @NgModule, @Injectable.
• Modules: AppModule, RouterModule, HttpClientModule.
• Lifecycle hooks: ngOnInit(), ngOnDestroy(), ngOnChanges().
• Template syntax: *ngFor="let item of items; index as i", *ngIf="condition".
• Pipes: | date, | async, | currency, custom pipes met @Pipe.
• Data Management:
• Dependency Injection: providedIn: 'root', @Optional(), @Inject().
• HTTP: HttpClient, HttpInterceptor, HttpHeaders, HttpErrorResponse.
• RxJS: Observable, Subject, BehaviorSubject, operators (map, catchError, tap).
• State: lokale state via @Input()/@Output(), services met BehaviorSubject.
• UI en Interactie:
• Directives: structurele (*ngIf), attribuut (ngClass, ngStyle), custom directives (@Directive).
• Forms:
• Template-driven: NgForm, NgModel, #form="ngForm".
• Reactive: FormGroup, FormControl, FormBuilder, Validators.required.
• Routing:
• RouterOutlet, ActivatedRoute, RouteConfigLoadStart, CanActivateFn.
• Route parameters: /:id, route.snapshot.paramMap.get('id').
• Testing:
• Unit tests: TestBed.configureTestingModule(), ComponentFixture, DebugElement.
• Mocken: jasmine.createSpyObj(), providers: [{ provide: Service, useValue: mockService }].
• E2E: Protractor, browser.get(), element(by.css()).
• Tools en Configuratie:
• Angular CLI: ng generate component|service|guard, ng serve --port 4200.
• Configuratiebestanden: angular.json, tsconfig.json, package.json scripts.
• Debugging: Augury, Redux DevTools (voor NgRx), Chrome DevTools.

• Bereidt voor op Angular Certification Program (Google, indien beschikbaar).
• Certificaat van deelname (geen officieel examen vereist).