• De Angular CLI hoef je maar éénmalig te installeren.
• Voer in de terminal volgende instructie uit:
  

  $ npm install -g @angular/cli@6

• Met de Angular CLI maakt je snel en eenvoudig een volledig werkende applicatie aan.
• Verder bevat de CLI commando's om extra componenten, services, pipes, enz. aan te maken. Hierover later meer.

$ npm remove -g @angular/cli
$ npm install -g @angular/cli@6

De Angular CLI is geïnstalleerd, dus hoog tijd om een eerste project aan te maken.

• Maak op je data-schijf een nieuwe map LesAngular6. In deze map komen later alle projecten te staan.
• Verwijs het pad in de terminal naar deze map.
• Maak een nieuw Angular-project. Voer onderstaande instructies één-na-één uit:
  

  $ ng new mijn-eerste-app
  $ cd mijn-eerste-app
  $ ng serve -o

Merk op dat de titel van de pagina de naam van het project krijgt, maar dan in CamelCase geschreven. Het project mijn-eerste-app krijgt als titel MijnEersteApp.

• Het laatste commando, ng serve, start een lokale webserver.
  De site is nu bereikbaar via http://localhost:4200.
• Met de optie -o achter het commando ng serve opent de site zich automatisch in de browser.
• Je kan de server stoppen door Ctrl+C te klikken.

We gaan voorlopig nog niet te diep in op de structuur van een Angular-project, maar we gaan toch al even de inhoud van de getoonde pagina aanpassen.

Best dat je eerst de server stopt (Ctrl+C) omdat we vanaf nu de geïntegreede terminal van WebStorm gebruiken.

• Sluit de terminal.
• Open het project in WebStorm.

Een Angular-project bevat heel wat bestanden. De meeste bestanden in de rootfolder zijn voor de interne werking van Angular bedoeld en daar hoeven we ons voorlopig niets van aan te trekken.

• Open de terminal binnen WebStorm (Zie tabblad onderaan links).
• Start de webserver met het commando: ng serve -o
• Open de indexpagina src/index.html

Als je de site in de browser bekijkt, zal je merken dat de body van het document totaal niet overeenstemt met de body-tag van de indexpagina. Enkel het head-gedeelte klopt wel.

• Pas de titel van de pagina aan. Alle wijzigingen worden dadelijk in de browser zichtbaar.

Binnen de body-tag staat een speciale tag, namelijk <app-root></app-root>.
Angular werkt namelijk met componenten. Elke component heeft een eigen selector in de vorm van <app-xxx>.

Hoe componenten tot stand komen en hoe deze met elkaar communiceren, bespreken we later. Voorlopig hoef je enkel te weten dat deze tag verwijst naar het document src/app/app.component.ts.

• Open de pagina's src/app/app.component.ts en src/app/app.component.html

Op app.component.ts vind je de selector terug waar op de homepage naar verwijst. Angular gaat nu deze selector vervangen door de HTML-code die bij deze component hoort, namelijk de inhoud van app.component.html.

De HTML-pagina bevat hoofdzakelijk statische informatie, maar ook één woord tussen dubbele aanhalingstekens. {{ titel }}.

Deze speciale notatie noemen we databinding. Titel is namelijk een variabele die wordt opgehaald uit het ts-bestand.

• Experimenteer met de statische inhoud van het html-bestand.
• Maak ook enkele nieuwe variabelen aan in het ts-bestand en integreer deze op de pagina.
• Tracht de bijhorende pagina na te bouwen.