Angular

Volledige implementatiehandleiding voor Angular op NStrim

Overzicht

Angular is een op TypeScript gebaseerd webapplicatieframework ontwikkeld door Google. Het biedt een uitgebreide oplossing voor het bouwen van dynamische single-page applicaties met een componentgebaseerde architectuur.

Voordat je begint
Zorg ervoor dat je dashboard geopend is - je hebt de daar getoonde Git-inloggegevens nodig. Dit sjabloon bevat Tailwind CSS voor styling.

Snelstart

1

Repository aanmaken vanuit sjabloon

Ga in je dashboard naar het tabblad Tools & Deployment. Klik op de knop "New Repository", selecteer het Angular-sjabloon uit het dropdownmenu, voer een repository-naam en subdomein in en klik vervolgens op "Create Repository".

2

Je repository klonen

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>
3

Afhankelijkheden installeren

npm install
4

Ontwikkelingsserver starten

npm start

Open http://localhost:4200 in je browser.

5

Bouwen & pushen

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Elke push naar Git implementeert automatisch je applicatie. Bekijk je Module Work URL op het dashboard om je live site te zien.

Lokale ontwikkeling met Docker

Als je geen Node.js lokaal hebt geïnstalleerd, kun je Docker gebruiken om Angular-commando's uit te voeren. Het project bevat een Dockerfile voor productie-builds.

Wat is Docker?
Docker maakt geïsoleerde "containers" met alle software die je nodig hebt (Node.js, npm) zonder ze op je computer te installeren. Zie het als een lichtgewicht virtuele machine.

Vereisten

Installeer Docker Desktop voor jouw besturingssysteem (Windows, Mac of Linux).

Commando's uitvoeren met Docker

# Run npm install
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm install

# Run development server (accessible at localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm start

# Build for production
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build
Opmerking
Docker is optioneel voor lokale ontwikkeling. Het NStrim-platform handelt de implementatie automatisch af - je hebt Docker alleen nodig als je commando's lokaal wilt uitvoeren zonder Node.js geïnstalleerd te hebben.

Projectstructuur

Begrijpen waar bestanden zich bevinden:

├── src/
│   ├── app/
│   │   ├── app.component.ts      # Hoofdcomponent
│   │   ├── app.component.html    # Hoofdtemplate
│   │   ├── app.component.css     # Componentstijlen
│   │   ├── app.config.ts         # App-configuratie
│   │   └── app.routes.ts         # Routing-configuratie
│   ├── index.html                # Hoofd-HTML-bestand
│   ├── main.ts                   # Applicatie-startpunt
│   └── styles.css                # Globale stijlen (Tailwind)
├── public/                       # Statische assets
├── angular.json                  # Angular CLI-configuratie
├── package.json                  # Afhankelijkheden en scripts
├── tailwind.config.js            # Tailwind CSS-configuratie
├── tsconfig.json                 # TypeScript-configuratie
└── Dockerfile                    # Docker build-configuratie

Veelvoorkomende taken

Een nieuwe component aanmaken

ng generate component components/my-component

Een nieuwe service aanmaken

ng generate service services/my-service

Een route toevoegen

Bewerk src/app/app.routes.ts:

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

Tailwind CSS gebruiken

Tailwind is vooraf geconfigureerd. Gebruik klassen direct in je templates:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

Handige commando's

npm start Ontwikkelingsserver starten (poort 4200)
npm run build Bouwen voor productie
npm test Unit-tests uitvoeren
ng generate component Een nieuwe component aanmaken
ng generate service Een nieuwe service aanmaken
ng generate --help Alle beschikbare generators opsommen

Probleemoplossing

npm install fails with permission errors

Oorzaak: Permissieproblemen met de npm-cache of node_modules.

Oplossing: Verwijder de map node_modules en package-lock.json, en voer dan npm install opnieuw uit.

Port 4200 already in use

Oorzaak: Een ander proces gebruikt poort 4200.

Oplossing: Gebruik een andere poort: ng serve --port 4201 of stop het andere proces.

Module not found errors

Oorzaak: Afhankelijkheden zijn niet geïnstalleerd of beschadigd.

Oplossing: Voer npm install uit om alle afhankelijkheden te installeren.

Changes not reflecting in browser

Oorzaak: Browser-cache of live reload werkt niet.

Oplossing: Hard refresh (Ctrl+Shift+R of Cmd+Shift+R) of herstart de dev-server.

Build fails after deployment

Oorzaak: Build-fouten of ontbrekende afhankelijkheden.

Oplossing: Voer eerst lokaal npm run build uit om op fouten te controleren voordat je pusht.

Implementatie-workflow

Elke keer dat je code naar Git pusht, wordt je applicatie automatisch gebouwd en geïmplementeerd:

Codewijziging git push npm run build Implementeren naar nginx Live!

De URL van je geïmplementeerde applicatie volgt dit formaat: 

https://<your-subdomain>-<repo-name>.<session-domain>

Voorbeeld: https://student01-module-a.demo.nstrim.app

Voor meer informatie kun je de officiële Angular-documentatie raadplegen.