Blog

Front-end developer worden: starten met Angular in 5 stappen

Je bent geïnteresseerd in Front-end, maar hebt nog weinig Javascript en typescript kennis en weet niet zo goed waar je moet beginnen? Hier een paar simpele stappen om binnen 30 minuten je eerste Angular applicatie te bouwen. 

Wat is Angular?
Angular is een platform/framework dat je in staat stelt om eenvoudig web applicaties te bouwen voor zowel web, mobiel of desktop. Meer informatie over Angular vind je hier: angular.io.

Wat gaan we bouwen?
In deze tutorial gaan we een simpele Hello World applicatie bouwen. Deze Angular applicatie maakt gebruik van een web-API om data op te halen, en deze vervolgens te presenteren in de browser.

Stap 1: Installeer NodeJS

Voordat we kunnen beginnen, zorg dat je NodeJS geïnstalleerd hebt (recommended version). Samen met NodeJS wordt ook een package manager (NPM) geïnstalleerd. Zorg ook dat je jouw Command Prompt (Windows) of Terminal (Mac) opstart.

Stap 2: Installeer Angular CLI

Een Angular CLI (Command Line Interface) stelt je o.a. in staat om een nieuw project te genereren, de ontwikkelomgeving te starten, unit testen te draaien, enzovoort. Om de CLI te installeren open je de Terminal (Mac) of Command Prompt (Windows), bepaal je de juiste locatie (bijvoorbeeld C:\Users\Documenten) en geef je het volgende commando:

          npm install -g @angular/cli

Je hebt nu Angular geïnstalleerd en kunt je eigen project gaan starten.

Stap 3: Genereer een nieuw project

Dankzij de CLI kunnen we heel eenvoudig een nieuw project laten genereren. Ga eerst in je Command Prompt of Terminal naar de juiste directory toe waar je het project wilt aanmaken (bijvoorbeeld weer C:\Users\Anoniem\Documenten).  We noemen het project hello-world-app. Geef nu het volgende commando:

          ng new hello-world-app

Er komen nu een tweetal vragen. Beantwoord de eerste vraag met N , kies bij de tweede vraag voor CSS. Je hebt nu je eerste project aangemaakt!

Stap 4: Start de ontwikkel omgeving

Alles is geïnstalleerd en we hebben een Angular applicatie om verder te ontwikkelen. Om ook daadwerkelijk aan de voorkant te zien wat we doen, starten we de ontwikkelomgeving met het volgende commando (zorg dat je in de hello-world-app directory zit, dit doe je door het commando cd hello-world-app te geven):

          ng serve --open

Er zou een browser moeten openen en we zien onze applicatie draaien op localhost:4200. Wanneer we tijdens het ontwikkelen iets wijzigen en opslaan, wordt de pagina in de browser automatisch herladen. Als het goed is zie je onderstaande afbeelding verschijnen.

 

Stap 5: Pas de pagina aan


Om deze pagina aan te passen ga je in je verkenner naar de locatie van deze app. Je ziet in de Hello world map onder src -> app de volgende bestanden staan:

html:
Dit is de uiteindelijke webpagina waaraan we bouwen
TS:
Hierin kunnen we de opbouw en tekst van de pagina veranderen
CSS:
Hierin kunnen we de opmaak van de pagina aanpassen

Open het TS en CSS bestand met het programma ‘Kladblok’ en html in je ‘Browser’.

Tekst aanpassen:
In het CSS bestand zie je de volgende code staan:

          import { Component } from '@angular/core';
          @Component({
             selector: 'app-root',
             templateUrl: './app.component.html',
             styleUrls: ['./app.component.css']
          })

          export class AppComponent {
            title = 'hello-world-app';
         }

Achter title = kun je vervolgens de titel aanpassen. Wanneer je de browser opnieuw laadt zie je de aanpassingen staan.

Lay-out aanpassen:
Open het TS bestand (met Kladblok). Je ziet nu de volgende code:

h1 {
 background-color: white;
}

We kunnen nu white aanpassen naar iedere kleur die je wilt, bijvoorbeeld yellow;

Door Aico - front-end developer bij Conspect  -  27 maart 2019