Angular 2 - Leren en begrijpen

Leer werken met Angular 2, het snelst groeiende framework in de tech industrie!
4.2 (22 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
56 students enrolled
$19
$45
58% off
Take This Course
  • Lectures 91
  • Length 5.5 hours
  • Skill Level Intermediate Level
  • Languages Dutch
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2016 Dutch

Course Description

Angular 2 - Leren en begrijpen

Angular 2 is de opvolger van AngularJS. Behalve de naam, is er maar weinig dat de twee frameworks met elkaar gemeen hebben. Angular 2 heeft een totaal nieuwe syntaxis voor zowel front-end als backend. In deze cursus leer je werken met de nieuwe, op componenten gebaseerde manier om webapplicaties te programmeren. Je maakt kennis met de vernieuwde wijze van databinding, services, observables, routing en andere belangrijke Angular 2-concepten. Daarnaast leer je omgaan met bijkomende tools en programmeertalen zoals Node.js, TypeScript en ECMAScript 2015. Tot de behandelde onderwerpen behoren:

  • Kennismaken met Angular 2.
  • De ontwikkelomgeving inrichten.
  • Hello World in Angular 2 - je eerste component
  • Databinding op allerlei manieren.
  • Datavoorziening met services.
  • Asynchrone services - gegevens ophalen uit databases.
  • Werken met RxJS en observables.
  • Angular-applicaties als boomstructuur van componenten.
  • Routing in Angular 2-apps.
  • Meer over Angular 2 - blik op de toekomst.

What are the requirements?

  • Werken met een code-editor naar keuze (WebStorm, Visual Studio/Code, Sublime Text, etc.)
  • Debuggen in de browser (bij voorkeur Google Chrome of Mozilla Firefox)
  • Node.js 4.x of hoger wordt gebruikt; dit wordt in de cursus toegelicht.
  • Enige bekendheid met werken in een opdrachtregelomgeving (command line in Windows, of Terminal in Mac OS X)

What am I going to get from this course?

  • Je leert hoe je webapplicaties kunt maken met het nieuwe framework Angular 2
  • Je leert hoe je zelfstandig componenten, services, databinding en andere Angular-concepten kunt toepassen.

What is the target audience?

  • De cursus "Angular 2 - Leren en begrijpen" is voor studenten die een goede achtergrond hebben in webdevelopment en willen leren omgaan met dit nieuwe framework.
  • Voorkennis van HTML, CSS en gedegen JavaScript is vereist.
  • Specifieke voorkennis van ES6/ECMAScript 2015 en TypeScript is niet beslist nodig, maar zal wel helpen.
  • Voorkennis van AngularJS 1.x is niet vereist.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Welkom
02:14

Kennismaken met Peter Kassenaar en contactgegevens voor latere referentie

02:50

Inhoud van de training, high level overview van de onderdelen die in de verschillende secties worden besproken.

Section 2: Kennismaken met Angular 2
03:49

Het werken met Angular 2 heeft voor- en nadelen. Je bent als eerste op de hoogte van nieuwe technologie, maar houdt er ook rekening mee dat Angular 2 nog een jong framework is waarin allerlei wijzigingen zullen optreden. Dit is met name het geval in de beta-versies. Houdt altijd de site in het oog voor known bugs en -fixes en voor breaking changes ten opzichte van eerdere versies.

03:30

Leer hoe de architectuur van een SPA-applicatie met Angular verschilt van traditionele webapplicaties zoals bijvoorbeeld door een CMS worden verzorgd. Bij Angular-toepassingen is de rol van de browser erg belangrijk. Hier leeft de applicatie. De taak van de server is 'alleen' nog het versturen van data in JSON-formaat naar de browser. 

03:07

Angular 2 is de opvolger van Angular 1. Hoe verhouden de twee versies zich tot elkaar en waar kunt u het beste voor kiezen? 

06:25

Angular 2 heeft een aantal nieuwe en unieke kenmerken waarin het zich onderscheid van Angular 1. Deze video laat zien welke kenmerken dit zijn en wat er onder meer gewijzigd is in Angular 2.

03:15

Er wordt in Angular 2-apps altijd gewerkt met componenten. Maar hoe zien componenten er op high level-niveau uit en hoe vormen ze samen een applicatie? In deze video wordt dit besproken.

Section 3: Je eerste project
00:30

De inhoud van deze sectie. 

04:03

Je leert wat je moet installeren en hoe de computer ingericht moet zijn voordat je met Angular 2 aan de slag kunt. Je maakt kennis met Node.js, verschillende editors en de browser.

01:00

Praktijkoefeningen - In elke module/sectie staan een aantal praktijkoefeningen. Zo kun je het geleerde in direct in de praktijk brengen. De video bevat een korte introductie/toelichting op de praktijkoefeningen. Download de PDF die bij de video hoort!

02:22

Bij het starten van een nieuw project kun je het beste een vast stappenplan hanteren. Deze video laat zien welke stappen je moet ondernemen.

04:20

Voordat je een component kunt schrijven, moeten een aantal .json-bestanden in je project aanwezig zijn. Je leert wat tsconfig.json, package.json en typings.json doen en je installeert de benodigde libraries.

04:27

Componenten zijn een TypeScript-bestand. Ze beginnen altijd met een aantal import-statements. Daarna schrijf je de component-decorator @Component. Ten slotte geef je in een JavaScript-class aan over welke logica een component beschikt. De klasse is vergelijkbaar met de Controller uit Angular 1. Als een component nog geen logica bevat, mag de class ook leeg blijven.

02:09

We moeten Angular vertellen welke component als uitgangspunt voor de app wordt gebruikt. Dit doen we in een bootstrapper. De afspraak is dat dit bestand main.ts heet. 

05:43

In index.html komen <script>-opdrachten om de juiste libraries, in de juiste volgorde te laden. Ook wordt de module loader System.js geconfigureerd. Als dat gebeurd is, kan in de <body> van de pagina de juiste component geladen worden.

06:19

Zodra alle boilerplatecode geschreven is, kunnen we - eindelijk - de applicatie testen. Dit gebeurt in Angular 2-projecten typisch vanaf de command line. De opdracht hiervoor is npm start.

01:35

Praktijkoefeningen 02 - Beginnen met je eerste eigen component.

01:25

Overzicht van wat je hebt geleerd in deze sectie.

Section 4: Kort over ECMAScript 2015 en TypeScript
01:34

Korte inhoud van deze module.

02:51

Wat zijn ECMAScript 2015 en TypeScript? Deze video geeft een korte introductie in deze twee technieken en laat zien waarom je ze zou willen gebruiken in een Angular 2-project.

04:44

Meer details over ECMAScript 2015 (ES6), de ondersteuning door diverse browsers en een overzicht van alle mogelijkheden ES6. We sluiten af met een kort overzicht van de details die voor het werken met Angular 2 van belang zijn: block scope, classes en arrow functions.

03:42

Hoe wordt block scope gerealiseerd in ES6 en wat is de rol van de nieuwe keywords let en const? Je maakt kennis met deze keywords en ziet het verschil met de standaard JavaScript-notatie var.

05:35

Je maakt kennis met het keyword class en ziet hoe een klasse in ES6 wordt genoteerd. Ook zie je alvast kort hoe functies binnen een class (methods) worden gemaakt en wat de constructor van een class doet.

03:59

Wat zijn ES6 Arrow functions en hoe worden ze ingezet? Je leert de notatie van een arrow function en impliciete en expliciete return-statements.

06:34

Welke extra's biedt TypeScript ten opzichte van JavaScript en ECMAScript 2015? Je leert de belangrijkste kenmerken van TypeScript en waarom je dit als developer zou willen gebruiken.

05:21

Welke basistypen (of: Primitive Types) kent TypeScript? Je ziet hoe numbers, strings en booleans worden gebruikt om variabelen en parameters te typeren. 

03:35

In TypeScript kun je eigen types definiëren. Dit is vaak het 'Model' uit het MVC-principe. Je ziet hoe een class wordt gebruikt om een eigen complex type te maken en dit vervolgens te gebruiken als parameter in de constructor van een andere class.

02:47

In TypeScript kun je decorators schrijven om functies en classes te annoteren. Team Angular heeft dat bijvoorbeeld gedaan voor componenten, pipes, services en meer. Deze video laat zien hoe je decorators herkent en welke decorators er zijn. Tot slot zie je waar je meer informatie over TypeScript kunt vinden via de online handboeken.

01:21

Een samenvatting van Module 3, ECMAScript 2015 en TypeScript.

Section 5: Databinding
00:51

De inhoud van module 4 - Databinding

05:52

Je leert waaruit het principe van databinding bestaat en wat in Angular 2 de eenvoudigste manier is om gegevens te binden aan placeholders {‌{ ... }‌} in de user interface.

04:22

Angular 2 kan allerlei typen DOM-events rechtstreeks binden. Dit betekent dat wanneer een event optreedt, de bijbehorende event handler in de controller/class wordt uitgevoerd. Je leert hoe dit werkt en welke events tot je beschikking staan.

03:42

Soms wil je in de controller rechtstreeks toegang tot het gegenereerde event. In dat geval kun je vanuit de template het event doorgeven via $event. Deze video laat zien hoe dit gaat en hoe je het event vervolgens kunt verwerken in je controller.

05:05

Deze video laat zien wat Template Variables zijn en hoe je ze nuttig kunt gebruiken door waarden van HTML-elementen vanuit de view door te geven aan een controller.

06:48

Je leert werken met key bindings en pseudo-events zoals (key.enter) en je leert hoe waarden vanuit een tekstveld worden doorgegeven aan de controller, waardoor je bijvoorbeeld eenvoudige CRUD-operations kunt uitvoeren. De video laat zien hoe een waarde uit een formulier aan een array wordt toegevoegd.

01:27

Praktijkoefeningen 03 - Simple Databinding en Event binding

05:23

Je leert hoe je waarden uit je controller/class rechtstreeks bindt aan properties van HTML-elementen door de attribute binding syntaxis [...] te gebruiken.

03:14

Deze les laat meer mogelijkheden van attribute binding zien. Je leert hoe je de inhoud van het [src]-attribuut van een afbeelding dynamisch kunt aanpassen en doet allerlei ideeën voor verdere attribute binding op. 

06:31

Een van de Unique Selling Points van Angular was altijd de eenvoudige manier waarop gegevens zowel in de View als in de Controller gebonden konden worden. In Angular 2 wordt daarvoor [(ngModel)] gebruikt. Deze video laat zien hoe je dit gebruikt. 

01:33

Een korte samenvatting van de inhoud van module 4 - databinding.

01:38

Praktijkoefeningen 04 - Attribute binding en ngModel

Section 6: Directives en Models
01:30

Beknopte inhoud van module 5 - Directives en Models.

02:06

Een korte kennismaking met Angular 2-directives en de verschillen met Angular 1.

03:55

De directive *ngFor is de opvolger van ng-repeat uit Angular 1. Je leert in deze video hoe je hier mee werkt en herhaalde elementen aan het DOM toevoegt. Meestal zul je *ngFor gebruiken met arrays in je controller.

03:58

Deze video laat zien hoe je *ngFor gebruikt om een selectielijst (dropdown) samen te stellen. Het is een voorbeeld van de manier waarop je allerlei technieken voor databinding en directives kunt gebruiken in combinatie met *ngFor.

03:57

Elementen in het DOM kun je voorwaardelijk tonen of verbergen met *ngIf. Deze video laat zien hoe dat gaat.

05:14

Vaak zul je componenten van styling willen voorzien. met [ngClass] kun je bestaande CSS-klassen beheren, met [ngStyle] kun je inline stijlen aan een element toevoegen of verwijderen.

01:56

Praktijkoefeningen 05 - werken met directives, *ngFor, *ngIf en [ngClass]

08:09

Deze video laat zien hoe je een Model maakt (zoals in MVC wordt bedoeld) en hoe je dit gebruikt in je applicatie. Als je een Model gebruikt, kun je variabelen strikt typeren met TypeScript.

04:04

Wil je niet met inline HTML en CSS werken? In deze video leer je hoe je HTML- en CSS-templates extern opslaat en aanroept vanuit je component.

01:15

Praktijkoefeningen 06 - werken met Modellen en externe templates.

01:10

Een korte samenvatting van de inhoud van module 5 - Directives.

Section 7: Werken met Services
01:02

Beknopte inhoud van module 6 - Services

03:47

Korte kennismaken met data flow door je applicatie en de manier waarop services dit kunnen verbeteren.

1. Service maken - static data
04:43
03:34

Deze video laat zien hoe een service wordt geïnjecteerd en gebruikt in een component. Zo kun je gegevens binden aan data die door de service wordt geleverd.

03:50

Een service kan pas worden gebruikt als hij is toegevoegd aan de lijst met providers voor een component. Deze video laat zien hoe dat gaat. Ook maak je kennis met de lifecycle hook ngOnInit

04:22

Welke componenten van dezelfde instantie van een service gebruik kunnen maken, is afhankelijk van de plek waar een service wordt geïnstantieerd. Je kunt dit op componentniveau doen, of op app-niveau.

01:16

Praktijkoefeningen -07, Werken met Services en statische data

05:45

In echt applicaties zul je vaak communiceren met live data, afkomstig uit een database. Deze video laat zien hoe Http en observables worden gebruikt om te werken met asynchrone data.

07:31

Deze video toont de code ("show me teh codez!") om asynchrone services te schrijven. We beginnen met het ophalen van een .json-bestand vanaf de eigen webserver.

06:37

Een algemene inleiding in het werken met RxJs-operators en specifiek het gebruik van .map() om transformaties op je observable uit te voeren voordat hij wordt getoond in de user interface.

05:44

Algemene informatie over het werken met Live API's overal op internet. Specifieke informatie over Open Movie Database API (OMDb API).

10:04

Leer om Http GET-requests uit te voeren naar een live API op internet (voorbeeld met Open Movie Database).

10:44

Leer hoe je POST-requests verstuurd vanuit een component met formulier. Als voorbeeld wordt de API http://reqres.in gebruikt.

01:57

Praktijkoefeningen 08 - werken met asynchrone data en live API's.

01:41

Een korte samenvatting van de inhoud van module 6 - Services

Section 8: Werken met Componenten en data flow
00:39

Beknopte inhoud van module 7 - Componenten

02:10

Korte theoretische inleiding over componenten en uitleg van de stappen die genomen moeten worden om de app uit meerdere componenten samen te stellen.

02:46

Een nieuwe component maken als TypeScript-file, met een import-statement, @Component-decorator en een class.

2. en 3. Component insluiten en gebruiken
02:51
03:59

Leer hoe je data vanuit een parent component doorgeeft aan een child component. Hiervoor wordt de annotatie @Input() gebruikt.

04:17

Als de inhoud van een component gewijzigd wordt door de parent, moet dit worden getoond in de user interface. Hiervoor is de lifecycle hook ngOnChanges() beschikbaar.

08:00

Vaak wil je ook data vanuit een child component terugsturen naar een parent component. Hiervoor wordt de decorator @Output() gebruikt.

03:56

Wat is een event bus en hoe kun je deze in Angular-apps realiseren? Je leert hoe je componenten die geen parent-childrelatie hebben met elkaar kunt laten communiceren.

03:44

Bij het maken van een event bus kun je het beste een onafhankelijke service schrijven die events publiceert. 

03:10

De gemaakte service importeren in de component die de event moet gooien. Dit heet ook wel de Observable.

04:28

De component die zich abonneert op events die door de Observable worden gegooid, heet de Observer. Je ziet in deze video hoe je een Angular-component hiervoor geschikt maakt.

04:23

Als de losse onderdelen gereed zijn, kunnen de componenten en service worden samengevoegd tot een werkend event-systeem.

01:15

Over observables is meer (veel meer!) te vertellen dan in het bestek van deze video's mogelijk is. Je vindt hier enkele adressen om zelf verder te studeren (Engelstalig).

01:29

Praktijkoefeningen 09 - Werken met componenten en data flow tussen componenten.

01:09

Een korte samenvatting van de inhoud van module 7 - Componenten

Section 9: Routing
00:56

Beknopte inhoud van module 8 - Routing


05:59

Een korte blik op enkele achtergronden bij routing en hoe je je Angular 2-app geschikt kunt maken voor routing.

04:15

De router die in de beta-fase van Angular werd gebruikt, is inmiddels als 'deprecated' aangemerkt. We moeten het project upgraden naar angular2.0.0-rc.1 om de nieuwe component router (die ook nog niet klaar is) te kunnen gebruiken. 

05:11

De applicatie geschikt maken voor routing omvat verschillende stappen. Om te beginnen moet je index.html aanpassen.

02:19

Als je routing gebruikt in je app, bevat je startcomponent vaak een dashboard met het 'hoofdmenu' van de app. Deze video laat zien hoe je hiermee start. We noemen deze component daarom DashboardComponent.

04:47

Tot slot moet de bootstrapper main.ts worden ingesteld, zodanig dat van het nieuwe dashboard gebruik wordt gemaakt. Daarna is alles met elkaar verbonden en kun je de app testen.

02:34

De component router van Angular 2 is nog niet gereed. Hier zie je vast enkele onderdelen die in de toekomst zullen worden toegevoegd aan de router, zodat het een volwassen onderdeel van elke applicatie kan worden. 

01:20

Praktijkoefeningen 10 - Werken met routing

02:35

Een korte samenvatting van deze module en een vooruitblik naar wat Angular 2 nog meer te bieden heeft.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Peter Kassenaar, Pro level frontend trainer, author, developer

In ICT sinds 1996

Als pro-level trainer en schrijver van meer dan 100 ICT-boeken, talloze artikelen, blogposts en columns heb ik meer dan 20 jaar ervaring in het vakgebied. Ik ben ontwikkelaar van front-endtrainingen op het gebied van JavaScript, AngularJS 1.x en Angular 2, Node.js en andere frontend-technologieën (HTML, CSS, jQuery, PhoneGap, tooling en meer). 

Ik verspreid kennis via boeken, video's, en in klassikale of 1:1-trainingen. Je kunt altijd contact opnemen voor een live training of workshop in jouw bedrijf!

Ready to start learning?
Take This Course