Construire une application CRUD de base avec Angular et Node

Ces dernières années, les applications à page unique (SPA) sont devenues de plus en plus populaires. Une SPA est un site web qui se compose d’une seule page. Cette page unique agit comme un conteneur pour une application JavaScript. Le JavaScript est chargé d’obtenir le contenu et de le rendre dans le conteneur. Le contenu est généralement obtenu à partir d’un service Web et les API RESTful sont devenues le meilleur choix dans de nombreuses situations. La partie de l’application qui constitue le SPA est communément appelée client ou front-end, tandis que la partie responsable de l’API REST est appelée serveur ou back-end. Dans ce tutoriel, vous allez développer une simple application monopage Angular avec un back-end REST, basée sur Node et Express.

Vous utiliserez Angular car il suit le modèle MVC et sépare proprement la vue des modèles. Il est simple de créer des modèles HTML qui sont dynamiquement remplis de données et automatiquement mis à jour lorsque les données changent. J’en suis venu à aimer ce framework car il est très puissant, possède une énorme communauté et une excellente documentation.

Pour le serveur, vous utiliserez Node avec Express. Express est un framework qui facilite la création d’API REST en permettant de définir le code qui s’exécute pour différentes requêtes sur le serveur. Des services supplémentaires peuvent être ajoutés de manière globale ou en fonction de la demande. Il existe un certain nombre de frameworks qui s’appuient sur Express et automatisent la transformation de vos modèles de base de données en API. Ce tutoriel ne fera usage d’aucun d’entre eux afin de rester concentré.

Angular encourage l’utilisation de TypeScript. TypeScript ajoute des informations de typage à JavaScript et, à mon avis, est l’avenir du développement d’applications à grande échelle en JavaScript. Pour cette raison, vous allez développer à la fois le client et le serveur en utilisant TypeScript.

Voici les bibliothèques que vous utiliserez pour le client et le serveur :

• Angular : Le framework utilisé pour construire l’application client
• Okta for Authorisation : Un plugin qui gère l’autorisation d’authentification unique en utilisant Okta, à la fois sur le client et le serveur
• Angular Material : Un plugin angulaire qui fournit un Material Design prêt à l’emploi
• Node : Le serveur réel qui exécute le code JavaScript
• Express : Une bibliothèque de routage pour répondre aux demandes du serveur et construire des API REST
• TypeORM : Une bibliothèque ORM de base de données pour TypeScript

Démarrez votre application client Angular de base

Démarrons en mettant en œuvre un client de base à l’aide d’Angular. L’objectif est de développer un catalogue de produits qui vous permet de gérer les produits, leurs prix et leurs niveaux de stock. À la fin de cette section, vous disposerez d’une application simple composée d’une barre supérieure et de deux vues, Accueil et Produits. La vue Produits n’aura pas encore de contenu et rien ne sera protégé par un mot de passe. Cela sera couvert dans les sections suivantes.

Pour commencer, vous devrez installer Angular. Je vais supposer que vous avez déjà Node installé sur votre système et que vous pouvez utiliser la commande npm. Tapez la commande suivante dans un terminal.

npm install -g @angular/[email protected]

Selon votre système, vous devrez peut-être exécuter cette commande en utilisant sudo car elle installera le paquet globalement. Le paquet angular-cli fournit la commande ng qui est utilisée pour gérer les applications Angular. Une fois installé, allez dans un répertoire de votre choix et créez votre première application Angular à l’aide de la commande suivante.

ng new MyAngularClient

En utilisant Angular 7, cela vous demandera deux requêtes. La première vous demande si vous voulez inclure le routage. Répondez par l’affirmative à cette question. La deuxième requête concerne le type de feuilles de style que vous voulez utiliser. Laissez cela au CSS par défaut.

ng new va créer un nouveau répertoire appelé MyAngularClient et le peupler d’un squelette d’application. Prenons un peu de temps pour examiner certains des fichiers créés par la commande précédente. Dans le répertoire src de l’application, vous trouverez un fichier index.html qui est la page principale de l’application. Il ne contient pas grand-chose et joue simplement le rôle de conteneur. Vous verrez également un fichier style.css. Il contient la feuille de style globale qui est appliquée à l’ensemble de l’application. Si vous parcourez les dossiers, vous pourriez remarquer un répertoire src/app contenant cinq fichiers.

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

Ces fichiers définissent le composant principal de l’application qui sera inséré dans le index.html. Voici une brève description de chacun de ces fichiers :

• Le fichier app.component.css contient les feuilles de style du composant principal app. Les styles peuvent être définis localement pour chaque composant
• app.component.html contient le modèle HTML du composant
• app.component.ts fichier contient le code contrôlant la vue
• app.module.ts définit quels modules votre app utilisera
• app-routing.module.ts est mis en place pour définir les routes de votre application
• app.component.spec.ts contient un squelette pour le test unitaire du app composant

Je ne couvrirai pas les tests dans ce tutoriel, mais dans les applications de la vie réelle, vous devriez faire usage de cette fonctionnalité. Avant de pouvoir commencer, vous devrez installer quelques paquets supplémentaires. Ceux-ci vous aideront à créer rapidement une mise en page réactive bien conçue. Naviguez dans le répertoire de base du client, MyAngularClient, et tapez la commande suivante.

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