Aan de slag met Angular¶
Voor het project gaan we een webapplicatie bouwen voor het vinden van een huis. Dat ga je doen met Angular. Dit is een modern frontend framework dat veel nieuwe componenten introduceert: componenten, client-side routing, services, en nog veel meer. Maximilian Schwarzmüller loopt daar in het videomateriaal stapsgewijs doorheen.
Oudere versie Angular
De video's van Maximillian gaan over een oudere versie van Angular. Je bekijkt deze video's voor de uitleg over Angular, de concepten en achtergrondinformatie, maar soms laat hij code en commando's zien die hoort bij oudere versie van Angular. Lees daarom de teksten van de tutorial online, want de teksten gaan over de actuele versie van Angular. Dus in de tutorial staan de correcte stappen uitgeschreven.
Als je dat materiaal van voor-na-achter doorlopen duurt het lang voordat je in teamvorm met angular aan de slag gaan. Deze handleiding maakt een selectie van het videomateriaal en zet de eerste stappen met de huisvesting-applicatie (die maak je met behulp van de Angular tutorial).
Let op
De normale studiehandleiding is leidend. Als je alleen het materiaal in deze handleiding bestudeerd, leer je niet voldoende.
Wat gaan we doen?¶
Je gaat een simpele huisvestingsapplicatie maken. Bezoeker van de site kunnen een lijst met huizen inzien en inschrijven op een huis.
Als je alle stappen in dit document hebt doorlopen, navigeer je van de algemene overzichtspagina naar de huis-pagina. Op de overzichtspagina zie je een lijst met alle huizen. Als je een huis selecteert zie je de detailgegevens. Je maakt alleen de frontend en je 'faket' de backend. In het project zul je, in afstemming met de product owner, deze functionaliteit verder uitbouwen.
Je volgt de officiële Angular tutorial "Your first Angular app": https://angular.dev/tutorials/first-app/01-hello-world. Bij iedere stap staat de minimale content van Maximilian die voor deze stap relevant is.
Wederom: oudere versie
Ook is er per pagina op Angular.dev een video op YouTube bijgevoegd. Deze video gaat over een oudere versie van Angular. Je mag de video's luisteren voor de uitleg, maar lees de teksten van de tutorial online, want de teksten gaan over de actuele versie van Angular. Dus in de tutorial staan de correcte stappen uitgeschreven.
Pull Requests¶
Na elke stap maak je een Pull Request (PR) en leg je de PR voor aan een docent. Je mag alleen mergen na een 'approved' van de docent. We zullen een workshop geven hoe we willen dat jullie dit gaan doen.
De PR moet voldoen aan deze Definition-of-Done
- De code is formatted en er zijn geen lint errors of warnings
- Begin pas aan de volgende stap als je de code is gemerged.
Stap 0: Typescript¶
Angular gebruikt Typescript. Er worden ook 2 typescript features gebruikt die nog niet behandeld zijn: Generics en Decorators.
| Stap | Beschrijving |
|---|---|
| Studie | Understanding Typescript |
| Hoofdstuk 7: generics. Bekijk de video. | |
| Hoofdstuk 8: decorators. Bekijk de video. | |
| Doe | Clone je repository met jouw naam |
Stap 1: genereer de huisvestingsapplicatie¶
Angular heeft een script waar je een lege applicatie kan genereren inclusief configuratie.
| Stap | Beschrijving |
|---|---|
| Studie | Angular -- The Complete Guide |
| Hoofdstuk 1: "Welcome To The Course!" t/m "Creating A New Angular Project" (5 video's) | |
| Studie | Angular tutorial |
| Bestudeer wat de angular tutorial doet om de "Your first Angular app" te genereren | |
| Doe | Voordat je begint: npm install -g \@angular/cli |
| Maak een issue voor deze stap (alleen titel is okay) | |
| Genereer een feature branch vanuit issue | |
| Voeg prettier en eslint toe | |
| Volg de stappen uit de angular tutorial om onze "huisvestingsapplicatie" applicatie te genereren (de eerste stap, het opzetten van het environment, kun je overslaan) |
Stap 2: maak de HomeComponent¶
Maak je eerste angular component die de gegevens van een huis toont.
| Stap | Beschrijving |
|---|---|
| Studie | Angular -- The Complete Guide |
| Hoofdstuk 2: "Module Introduction" t/m "Managing and Creating Components with the Angular CLI" (8 video's) | |
| Hoofdstuk 2: "Preparing User Data" t/m "Property Binding and Outputting Computed Values" (4 video's) | |
| Hoofdstuk 2: "Using Directives and Two-Way-Binding en Signals and Two-Way-Binding" (2 video's) | |
| Studie | Angular tutorial |
| Bestudeer wat de angular tutorial doet om de HomeComponent te genereren | |
| Doe | Volg de stappen uit de angular tutorial om onze HomeComponent te genereren. |
| Wanneer je het template moet vullen, dan kan je de html-tags ook in de home.component.html zetten. | |
Let op dat je de button in de css aanpast, want de background color is white als er geen --primary-color gevonden kan worden. Kopier :root{...} in styles.css |
Stap 3: maak lijst van HousingLocation¶
Maak je eerste angular component die de gegevens van een HousingLocation toont en daarna de lijst met HousingLocations componenten.
Stap 4: maak services om data te delen¶
De componenten hebben de verantwoordelijkheid om data te presenteren. Data opvragen en aanpassen wordt gedaan via services.
| Stap | Beschrijving |
|---|---|
| Studie | Angular -- The Complete Guide |
| Hoofdstuk 2: "Getting Started with Services t/m More Service Usage and Alternative Dependency Injection Mechanism" (3 videos) | |
| Hoofdstuk 9: (alle videos) | |
| Hoofdstuk 11: (alle videos) | |
| https://www.learnrxjs.io/learn-rxjs/operators/creation/of | |
| Studie | Angular tutorial |
| Bestudeer wat de angular tutorial doet om de HeroService op te zetten | |
| Doe | Volg de stappen uit de angular tutorial om een housingService te maken. In het project moet je wel de tests genereren, want je moet alles testen. Ook in het project moet de access modifiers toevoegen. |
Stap 5: voeg een detailpagina met navigatie naar HousingLocation¶
In Angular gebruik je routing om nieuwe content te laten zien. Dat werkt heel anders dan in klassieke html websites.
| Stap | Beschrijving |
|---|---|
| Studie | Angular -- The Complete Guide |
| Hoofdstuk 14: "Module Introduction" t/m "Styling Active Navigation Links" (7 videos) | |
| Studie | Angular tutorial |
| Bestudeer wat de angular tutorial doet om te navigeren | |
| https://angular.dev/tutorials/first-app/10-routing\ | |
| https://angular.dev/tutorials/first-app/11-details-page\ | |
| https://angular.dev/tutorials/first-app/12-forms | |
| Doe | Volg de stappen uit de angular tutorial om een housinglocationpagina te maken. |
| Je moet een routerLink toevoegen in stap 11, hier is meer informatie |
DIT IS DE TEMPLATE CODE VOOR HousingLocation.ts
<a routerLink="/details/{{ housingLocation.id }}">
<section class="listing">
<img class="listing-photo" [src]="housingLocation.photo" alt="Exterior photo of {{ housingLocation.name }}" crossorigin />
<h2 class="listing-heading">{{ housingLocation.name }}</h2>
<p class="listing-location">{{ housingLocation.city }}, {{ housingLocation.state }}</p>
</section>
</a>
<router-outlet />
DIT IS DE FORM VOOR details.component.ts
applyForm = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
email: new FormControl(''),
});
DIT IS DE FUNCTIE VOOR details.component.ts
submitApplication() {
this.housingService.submitApplication(this.applyForm.value.firstName ?? '',
this.applyForm.value.lastName ?? '',
this.applyForm.value.email ?? '',);
}
Stap 6: Zoeken¶
| Stap | Beschrijving |
|---|---|
| Studie | Angular tutorial |
| Bestudeer wat de angular tutorial doet om te zoeken in de data. | |
| Doe | Voeg het zoeken toe aan je project. |
DIT IS DE CODE VOOR IN home.component.ts
private _housingLocationList: HousingLocation[] = [];
private _filteredLocationList: HousingLocation[] = [];
constructor(private housingService: HousingService) {
this.housingLocationList = this.housingService.getAllHousingLocations();
this._filteredLocationList = this.housingLocationList;
}
filterResults(text: *string*) {
if (!text) {
this._filteredLocationList =
this.housingLocationList;
} else {
this._filteredLocationList = this.housingLocationList.filter((housingLocation) =>
housingLocation?.city.toLowerCase().includes(text.toLowerCase()),
);
}
}
Stap 7: bestudeer data fetching¶
| Stap | Beschrijving |
|---|---|
| Studie | Angular -- The Complete Guide |
| Hoofdstuk 12: (alle videos) | |
| Studie | Bestudeer wat de angular tutorial doet om data van een server op te halen Je hoeft deze dus niet te implementeren. |