Présentation technique de Laurent Duveau au Meetup AixJS du 12 Juillet 2018 à Aix-En-Provence, France. https://www.meetup.com/aixjs-org/events/252276528/

1. ANGULAR 6
CLI 6
MATERIAL 6
Laurent Duveau, 12 Juillet 2018
AixJS Meetup, Aix-en-Provence, France

2. =???

3. =666

4. Laurent Duveau
@LaurentDuveau
à Montréal!
Microsoft MVP
Fondateur de l’Académie Angular
Formation en classe de 2 jours
118 workshops en 2 ans et demi!
Montréal, Boston, Québec,Toronto,
Vancouver, Ottawa, Calgary,Winnipeg,
London, Copenhague, Helsinki…

7. Angular 6
Alignement des librairies!

8. Angular 6
PWA : ProgressiveWeb Apps
« Application web au comportement natif »
Angular supporte PWA et la CLI nous permet de
l’activer en 1 commande.
> ng add @angular/pwa

9. Ivy renderer
Nom de code du nouveau moteur de rendu qui va
réduire la taille des applications et accélérer la
compilation
Une app HelloWorld en seulement 2.7Ko
compressée!!
100% compatible avec les apps existantes!
Note: Ivy sera disponible plus tard cette année

10. Ivy renderer

11. Angular Elements
Créez un composant Angular et publiez-le en tant
que composantWeb standard, qui peut être
utilisé dans n'importe quelle page HTML.
Hoster Angular partout!
Vieux site web en Js et jQuery
Mixer les frameworks ensemble (React, …)
Wordpress
https://angular.io/guide/elements

12. Angular 6
RxJS 6: Nouvelle syntaxe d'importation!
import { Observable } from 'rxjs/observable';
import { of } from 'rxjs/observable/of';
mport { map, filter } from 'rxjs/operators';
avant
import { Observable, of } from 'rxjs';
import { map, filter } from 'rxjs/operators';
après
https://update.angular.io/

14. Mise en route rapide!
+ génération de composants, services, routes, …
> npm install -g @angular/cli
> ng new DemoApp
> cd DemoApp
> ng serve
cli.angular.io
> ng g c products/product-list

15. Mettre à jour votre app Angular!
Ajouter et configurer des librairies
15
> ng update
> ng add @angular/pwa
> ng add @angular/elements
> ng add @angular/material
> ng add @ng-bootstrap/schematics
> ng add @clr/angular
> ng add @nativescript/schematics

18. Schematics!
Flexible Overlays
Tree: données hiérarchiques
Badge
> ng g @angular/material:material-nav --name=home
https://material.angular.io/

19. Component Dev Kit (CDK)
https://material.angular.io/cdk/categories

21. Angular 7 ??

22. Angular 7
https://angular.io/guide/releases

23. Merci!