Bouw een Basis CRUD App met Angular en Node

De laatste jaren zijn single page applications (SPA’s) steeds populairder geworden. Een SPA is een website die uit slechts één pagina bestaat. Die ene pagina fungeert als een container voor een JavaScript applicatie. Het JavaScript is verantwoordelijk voor het verkrijgen van de inhoud en het renderen ervan binnen de container. De inhoud wordt meestal verkregen van een webservice en RESTful API’s zijn in veel situaties de eerste keuze geworden. Het deel van de toepassing dat de SPA vormt, staat algemeen bekend als de client of front-end, terwijl het deel dat verantwoordelijk is voor de REST API bekend staat als de server of back-end. In deze tutorial ontwikkel je een eenvoudige Angular single page app met een REST backend, gebaseerd op Node en Express.

Je gebruikt Angular omdat het het MVC pattern volgt en op een nette manier de View van de Models scheidt. Het is eenvoudig om HTML templates te maken die dynamisch worden gevuld met gegevens en automatisch worden bijgewerkt wanneer de gegevens veranderen. Ik ben van dit framework gaan houden omdat het erg krachtig is, een enorme gemeenschap heeft en uitstekende documentatie.

Voor de server zul je Node met Express gebruiken. Express is een framework dat het makkelijk maakt om REST API’s te maken door het mogelijk te maken om code te definiëren die voor verschillende verzoeken op de server draait. Extra diensten kunnen globaal worden toegevoegd, of afhankelijk van het verzoek. Er zijn een aantal frameworks die bovenop Express bouwen en de taak automatiseren om je database modellen in een API om te zetten. Deze tutorial maakt hier geen gebruik van om de focus te behouden.

Angular moedigt het gebruik van TypeScript aan. TypeScript voegt type-informatie toe aan JavaScript en is, naar mijn mening, de toekomst van het ontwikkelen van grootschalige toepassingen in JavaScript. Om deze reden zul je zowel de client als de server ontwikkelen met TypeScript.

Hier volgen de bibliotheken die je zult gebruiken voor de client en de server:

• Angular: Het framework dat gebruikt wordt om de client applicatie te bouwen
• Okta voor Autorisatie: Een plugin die single sign-on autorisatie beheert met behulp van Okta, zowel op de client als op de server
• Angular Material: Een angular plugin die out-of-the-box Material Design biedt
• Node: De eigenlijke server waarop de JavaScript-code wordt uitgevoerd
• Express: Een routing library voor het reageren op serververzoeken en het bouwen van REST API’s
• TypeORM: Een database ORM bibliotheek voor TypeScript

Start je basis Angular Client Applicatie

Laten we beginnen met het implementeren van een basis client met Angular. Het doel is om een product catalogus te ontwikkelen waarmee je producten, hun prijzen, en hun voorraadniveau kunt beheren. Aan het eind van dit hoofdstuk heb je een eenvoudige applicatie bestaande uit een bovenbalk en twee views, Home en Products. De Producten-weergave zal nog geen inhoud hebben en niets zal met een wachtwoord worden beschermd. Dit zal worden behandeld in de volgende secties.

Om te beginnen moet u Angular installeren. Ik ga ervan uit dat u Node al op uw systeem heeft geïnstalleerd en u kunt het npm commando gebruiken. Typ het volgende commando in een terminal.

npm install -g @angular/[email protected]

Afhankelijk van je systeem, moet je dit commando misschien uitvoeren met sudo omdat het pakket dan globaal wordt geïnstalleerd. Het angular-cli pakket levert het ng commando dat wordt gebruikt om Angular applicaties te beheren. Ga na de installatie naar een map naar keuze en maak uw eerste Angular-toepassing met het volgende commando.

ng new MyAngularClient

Als u Angular 7 gebruikt, krijgt u twee vragen. De eerste vraagt je of je routing wilt opnemen. Antwoord hierop met ja. De tweede vraag gaat over het type stylesheets dat u wilt gebruiken. Laat dit op de standaard CSS staan.

ng new zal een nieuwe directory aanmaken genaamd MyAngularClient en deze vullen met een applicatie-skelet. Laten we even de tijd nemen om enkele van de bestanden te bekijken die het vorige commando heeft aangemaakt. In de src directory van de app, vindt u een bestand index.html dat de hoofdpagina is van de toepassing. Het bevat niet veel en speelt gewoon de rol van een container. U zult ook een style.css bestand zien. Dit bevat het globale stijlblad dat in de hele toepassing wordt toegepast. Als u door de mappen bladert, ziet u misschien een directory src/app die vijf bestanden bevat.

app-routing.module.tsapp.component.cssapp.component.htmlapp.component.tsapp.component.spec.tsapp.module.ts

Deze bestanden definiëren de belangrijkste toepassingscomponent die in de index.html zal worden ingevoegd. Hier volgt een korte beschrijving van elk van de bestanden:

• app.component.css bestand bevat de stylesheets van de belangrijkste app component. Stijlen kunnen lokaal voor elke component worden gedefinieerd
• app.component.html bevat het HTML-sjabloon van de component
• app.component.ts bestand bevat de code die de view regelt
• app.module.ts definieert welke modules uw app zal gebruiken
• app-routing.module.ts is opgezet om de routes voor je applicatie te definiëren
• app.component.spec.ts bevat een skelet voor unit testing van de app component

Ik zal het testen in deze tutorial niet behandelen, maar in het echte leven zou je gebruik moeten maken van deze functie. Voordat je aan de slag kunt, moet je nog een paar pakketten installeren. Deze zullen u helpen om snel een mooi ontworpen responsive layout te maken. Navigeer naar de basismap van de client, MyAngularClient, en type het volgende commando.

npm i @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected]

<mat-toolbar color="primary" class="expanded-toolbar"> <button mat-button routerLink="/">{{title}}</button> <div fxLayout="row" fxShow="false" fxShow.gt-sm> <button mat-button routerLink="/"><mat-icon>home</mat-icon></button> <button mat-button routerLink="/products">Products</button> <button mat-button *ngIf="!isAuthenticated" (click)="login()"> Login </button> <button mat-button *ngIf="isAuthenticated" (click)="logout()"> Logout </button> </div> <button mat-button ="menu" fxHide="false" fxHide.gt-sm> <mat-icon>menu</mat-icon> </button></mat-toolbar><mat-menu x-position="before" #menu="matMenu"> <button mat-menu-item routerLink="/"><mat-icon>home</mat-icon> Home</button> <button mat-menu-item routerLink="/products">Products</button>; <button mat-menu-item *ngIf="!isAuthenticated" (click)="login()"> Login </button> <button mat-menu-item *ngIf="isAuthenticated" (click)="logout()"> Logout </button></mat-menu><router-outlet></router-outlet>

import { Component } from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: })export class AppComponent { public title = 'My Angular App'; public isAuthenticated: boolean; constructor() { this.isAuthenticated = false; } login() { } logout() { }}

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import { FlexLayoutModule } from '@angular/flex-layout';import { MatButtonModule, MatDividerModule, MatIconModule, MatMenuModule, MatProgressSpinnerModule, MatTableModule, MatToolbarModule} from '@angular/material';import { HttpClientModule } from '@angular/common/http';import { FormsModule } from '@angular/forms';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component';@NgModule({ declarations: , imports: , providers: , bootstrap: })export class AppModule { }

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { ProductsComponent } from './products/products.component';import { HomeComponent } from './home/home.component';const routes: Routes = ;@NgModule({ imports: , exports: })export class AppRoutingModule { }

ng generate component Productsng generate component Home

<div class="hero"> <div> <h1>Hello World</h1> <p class="lead">This is the homepage of your Angular app</p> </div></div>

.hero { text-align: center; height: 90vh; display: flex; flex-direction: column; justify-content: center; font-family: sans-serif;}

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";body { margin: 0; font-family: sans-serif;}.expanded-toolbar { justify-content: space-between;}h1 { text-align: center;}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

ng serve

npm install @okta/[email protected] --save-exact

import { OktaAuthModule } from '@okta/okta-angular';

OktaAuthModule.initAuth({ issuer: 'https://{yourOktaDomain}/oauth2/default', redirectUri: 'http://localhost:4200/implicit/callback', clientId: '{YourClientId}'})

import { OktaAuthService } from '@okta/okta-angular';

constructor(public oktaAuth: OktaAuthService) { this.oktaAuth.$authenticationState.subscribe( (isAuthenticated: boolean) => this.isAuthenticated = isAuthenticated );}

import { Component, OnInit } from '@angular/core';...export class AppComponent implements OnInit { ... async ngOnInit() { this.isAuthenticated = await this.oktaAuth.isAuthenticated(); }}

login() { this.oktaAuth.loginRedirect();}logout() { this.oktaAuth.logout('/');}

import { OktaCallbackComponent, OktaAuthGuard } from '@okta/okta-angular';

{ path: 'implicit/callback', component: OktaCallbackComponent}

{ path: 'products', component: ProductsComponent, canActivate: }

npm init

npm install --save-exact [email protected] @types/[email protected] @okta/[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] @types/[email protected]

{ "compilerOptions": { "target": "es6", "module": "commonjs", "outDir": "dist", "experimentalDecorators": true, "emitDecoratorMetadata": true }, "include": , "exclude": }

import {Entity, PrimaryGeneratedColumn, Column, createConnection, Connection, Repository} from 'typeorm';@Entity()export class Product { @PrimaryGeneratedColumn() id: number; @Column() name: string; @Column() sku: string; @Column('text') description: string; @Column() price: number; @Column() stock: number;}

let connection:Connection;export async function getProductRepository(): Promise<Repository<Product>> { if (connection===undefined) { connection = await createConnection({ type: 'sqlite', database: 'myangularapp', synchronize: true, entities: , }); } return connection.getRepository(Product);}

import { NextFunction, Request, Response, Router } from 'express';import { getProductRepository, Product } from './model';export const router: Router = Router();router.get('/product', async function (req: Request, res: Response, next: NextFunction) { try { const repository = await getProductRepository(); const allProducts = await repository.find(); res.send(allProducts); } catch (err) { return next(err); }});router.get('/product/:id', async function (req: Request, res: Response, next: NextFunction) { try { const repository = await getProductRepository(); const product = await repository.find({id: req.params.id}); res.send(product); } catch (err) { return next(err); }});router.post('/product', async function (req: Request, res: Response, next: NextFunction) { try { const repository = await getProductRepository(); const product = new Product(); product.name = req.body.name; product.sku = req.body.sku; product.description = req.body.description; product.price = Number.parseFloat(req.body.price); product.stock = Number.parseInt(req.body.stock); const result = await repository.save(product); res.send(result); } catch (err) { return next(err); }});router.post('/product/:id', async function (req: Request, res: Response, next: NextFunction) { try { const repository = await getProductRepository(); const product = await repository.findOne({id: req.params.id}); product.name = req.body.name; product.sku = req.body.sku; product.description = req.body.description; product.price = Number.parseFloat(req.body.price); product.stock = Number.parseInt(req.body.stock); const result = await repository.save(product); res.send(result); } catch (err) { return next(err); }});router.delete('/product/:id', async function (req: Request, res: Response, next: NextFunction) { try { const repository = await getProductRepository(); await repository.delete({id: req.params.id}); res.send('OK'); } catch (err) { return next(err); }});

import { Request, Response, NextFunction} from 'express';const OktaJwtVerifier = require('@okta/jwt-verifier');const oktaJwtVerifier = new OktaJwtVerifier({ clientId: '{YourClientId}', issuer: 'https://{yourOktaDomain}/oauth2/default'});export async function oktaAuth(req:Request, res:Response, next:NextFunction) { try { const token = (req as any).token; if (!token) { return res.status(401).send('Not Authorised'); } const jwt = await oktaJwtVerifier.verifyAccessToken(token); req.user = { uid: jwt.claims.uid, email: jwt.claims.sub }; next(); } catch (err) { return res.status(401).send(err.message); }}

import * as express from 'express';import * as cors from 'cors';import * as bodyParser from 'body-parser';const bearerToken = require('express-bearer-token');import {router as productRouter} from './product'import {oktaAuth} from './auth'const app = express() .use(cors()) .use(bodyParser.json()) .use(bearerToken()) .use(oktaAuth) .use(productRouter);app.listen(4201, (err) => { if (err) { return console.log(err); } return console.log('My Node App listening on port 4201');});

npx tsc

node dist/server.js

export class Product { id?: string; name: string; sku: string; description: string; price: number; stock: number;}

ng generate service products/Products

import { Injectable } from '@angular/core';import { HttpClient } from '@angular/common/http';import { OktaAuthService } from '@okta/okta-angular';import { Product } from './product';const baseUrl = 'http://localhost:4201';@Injectable({ providedIn: 'root'})export class ProductsService { constructor(public oktaAuth: OktaAuthService, private http: HttpClient) { } private async request(method: string, url: string, data?: any) { const token = await this.oktaAuth.getAccessToken(); console.log('request ' + JSON.stringify(data)); const result = this.http.request(method, url, { body: data, responseType: 'json', observe: 'body', headers: { Authorization: `Bearer ${token}` } }); return new Promise<any>((resolve, reject) => { result.subscribe(resolve as any, reject as any); }); } getProducts() { return this.request('get', `${baseUrl}/product`); } getProduct(id: string) { return this.request('get', `${baseUrl}/product/${id}`); } createProduct(product: Product) { console.log('createProduct ' + JSON.stringify(product)); return this.request('post', `${baseUrl}/product`, product); } updateProduct(product: Product) { console.log('updateProduct ' + JSON.stringify(product)); return this.request('post', `${baseUrl}/product/${product.id}`, product); } deleteProduct(id: string) { return this.request('delete', `${baseUrl}/product/${id}`); }}

import { Component, OnInit } from '@angular/core';import { MatTableDataSource } from '@angular/material';import { ProductsService } from './products.service';import { Product } from './product';@Component({ selector: 'app-products', templateUrl: './products.component.html', styleUrls: })export class ProductsComponent implements OnInit { displayedColumns: string = ; dataSource = new MatTableDataSource<any>(); selectedProduct: Product = new Product(); loading = false; constructor(public productService: ProductsService) { } ngOnInit() { this.refresh(); } async refresh() { this.loading = true; const data = await this.productService.getProducts(); this.dataSource.data = data; this.loading = false; } async updateProduct() { if (this.selectedProduct.id !== undefined) { await this.productService.updateProduct(this.selectedProduct); } else { await this.productService.createProduct(this.selectedProduct); } this.selectedProduct = new Product(); await this.refresh(); } editProduct(product: Product) { this.selectedProduct = product; } clearProduct() { this.selectedProduct = new Product(); } async deleteProduct(product: Product) { this.loading = true; if (confirm(`Are you sure you want to delete the product ${product.name}. This cannot be undone.`)) { this.productService.deleteProduct(product.id); } await this.refresh(); }}

<h1 class="h1">Product Inventory</h1><div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between stretch" class="products"> <table mat-table fxFlex="100%" fxFlex.gt-sm="66%" ="dataSource" class="mat-elevation-z1"> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name</th> <td mat-cell *matCellDef="let product"> {{product.name}}</td> </ng-container> <ng-container matColumnDef="sku"> <th mat-header-cell *matHeaderCellDef> SKU</th> <td mat-cell *matCellDef="let product"> {{product.sku}}</td> </ng-container> <ng-container matColumnDef="description"> <th mat-header-cell *matHeaderCellDef> Description</th> <td mat-cell *matCellDef="let product"> {{product.description}}</td> </ng-container> <ng-container matColumnDef="price"> <th mat-header-cell *matHeaderCellDef> Price</th> <td mat-cell *matCellDef="let product"> {{product.price}}</td> </ng-container> <ng-container matColumnDef="stock"> <th mat-header-cell *matHeaderCellDef> Stock Level</th> <td mat-cell *matCellDef="let product"> {{product.stock}}</td> </ng-container> <ng-container matColumnDef="edit"> <th mat-header-cell *matHeaderCellDef></th> <td mat-cell *matCellDef="let product"> <button mat-icon-button (click)="editProduct(product)"> <mat-icon>edit</mat-icon> </button> </td> </ng-container> <ng-container matColumnDef="delete"> <th mat-header-cell *matHeaderCellDef></th> <td mat-cell *matCellDef="let product"> <button mat-icon-button (click)="deleteProduct(product)"> <mat-icon>delete</mat-icon> </button> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> <mat-divider fxShow="false" fxShow.gt-sm ="true"></mat-divider> <div> <h2>Selected Product</h2> <label>Name <input type="text" ="selectedProduct.name"> </label> <label>SKU <input type="text" ="selectedProduct.sku"> </label> <label>Description <input type="text" ="selectedProduct.description"> </label> <label>Price <input type="text" ="selectedProduct.price"> </label> <label>Stock Level <input type="text" ="selectedProduct.stock"> </label> <button mat-flat-button color="primary" (click)="updateProduct()">{{(selectedProduct.id!==undefined)?'Update':'Create'}}</button> <button mat-flat-button color="primary" (click)="clearProduct()">Clear</button> </div> <div class="loading" *ngIf="loading"> <mat-spinner></mat-spinner> </div></div>

.products { padding: 2rem;}label, input { display: block;}label { margin-bottom: 1rem;}.loading { position: absolute; display: flex; justify-content: center; align-content: center; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8);}

node dist/server.js

ng serve