Création de l'application

Génération avec Angular CLI

Installer Angular CLI

npm install -g @angular/cli

Générer l'application avec Angular CLI

ng new astro-demo --routing --style=scss

Ajouter Angular Material

Utiliser "ng add" (nouveauté Angular 6)

ng add @angular/material@6.2.1

Importer les composants via un fichier material.module.ts

/src/app/material.module.ts

SNIPPET aa-material-module

Importer HammerJS pour les gestures

npm install --save hammerjs
Ajouter import 'hammerjs'; dans src/main.ts.

Générer un template de navigation

ng generate @angular/material:material-nav --name sidemenu --module app

Déplacer le <router-outlet> dans le composant de navigation (<mat-sidenav>)

Page liste

Créer une page liste avec Angular CLI

ng generate component pages/planet-list --module app

Routing

Ajouter les routes dans le fichier app-routing.module.ts

SNIPPET aa-routing-paths

Chargement des données (Web Service)

Ajouter HttpClientModule dans les imports de app.module.ts

Créer un "service" Angular

ng g service services/planet

SNIPPET aa-planet-service

Suite écran de liste

Appeler le service pour charger les données

SNIPPET aa-call-getplanets-observer-subscribe SNIPPET aa-call-getplanets-async-await

Créer le template HTML de la liste

SNIPPET aa-page-list-html

Page détail

Ajouter un attribut routerLink aux items de la liste

routerLink="/planets/{{p.id}}"

Créer une page détail avec Angular CLI

ng g component pages/planet-detail --module app

Ajouter la route de la page de détail

{path: 'planets/:id', component: PlanetDetailComponent},

Récupérer le paramètre d'URL "id" pour charger les données correspondantes

1. Manière statique (n'est pas rappelé si les paramètres de la page changent)

SNIPPET aa-get-url-param-1-statique

1. Manière dynamique (souscription à un Observable)

SNIPPET aa-get-url-param-2-dynamique

1. En retournant un Observable

this.planet$ = this.route.paramMap.pipe(
  switchMap((params: ParamMap) => this.planetService.getPlanet(params.get('id')))
);

Contenu HTML de la page Détail

SNIPPET aa-page-detail-html

Ajouter quelques styles...

SNIPPET aa-styles