SlideShare une entreprise Scribd logo
ANGULAR 6
CLI 6
MATERIAL 6
Laurent Duveau, 12 Juillet 2018
AixJS Meetup, Aix-en-Provence, France
=???
=666
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…
Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)
Angular 6
Alignement des librairies!
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
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
Ivy renderer
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
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/
Angular 6, CLI 6, Material 6 (french)
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
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
Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)
Schematics!
Flexible Overlays
Tree: données hiérarchiques
Badge
> ng g @angular/material:material-nav --name=home
https://material.angular.io/
Component Dev Kit (CDK)
https://material.angular.io/cdk/categories
Angular 6, CLI 6, Material 6 (french)
Angular 7 ??
Angular 7
https://angular.io/guide/releases
Merci!

Contenu connexe

Tendances

Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Jean-Baptiste Vigneron
 
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014
Yves-Emmanuel Jutard
 
Comparatif des frameworks js mv
Comparatif des frameworks js mvComparatif des frameworks js mv
Comparatif des frameworks js mv
Mael Monnier
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
SOAT
 
Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)
Clément Dubois
 
Intro à angular
Intro à angularIntro à angular
Intro à angular
Pierric Cistac
 
J'ai fait une app native en React Native
J'ai fait une app native en React NativeJ'ai fait une app native en React Native
J'ai fait une app native en React Native
CocoaHeads France
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
RadhoueneRouached
 
Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2
Jean David Olekhnovitch
 
Débuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJSDébuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJS
Frédéric DUPERIER
 
De Google+ à twitter en passant par le Cloud
De Google+ à twitter en passant par le CloudDe Google+ à twitter en passant par le Cloud
De Google+ à twitter en passant par le Cloud
Nicolas FRANCOIS
 
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Bilel ZEGHAD
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
∞ François CHERPION ∞
 
Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the future
Ouadie LAHDIOUI
 
AngularJS
AngularJSAngularJS
AngularJS
Ouadie LAHDIOUI
 
Comment créer une application Angular performante ?
Comment créer une application Angular performante ?Comment créer une application Angular performante ?
Comment créer une application Angular performante ?
Sébastien Ollivier
 
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
guicara
 
Ionic, react native, native script
Ionic, react native, native scriptIonic, react native, native script
Ionic, react native, native script
Stéphanie MOALLIC
 
Agile Tour 2016 @ Lille
Agile Tour 2016 @ LilleAgile Tour 2016 @ Lille
Agile Tour 2016 @ Lille
Jean-Baptiste Vigneron
 

Tendances (20)

Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014
 
Comparatif des frameworks js mv
Comparatif des frameworks js mvComparatif des frameworks js mv
Comparatif des frameworks js mv
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
 
Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)
 
Intro à angular
Intro à angularIntro à angular
Intro à angular
 
J'ai fait une app native en React Native
J'ai fait une app native en React NativeJ'ai fait une app native en React Native
J'ai fait une app native en React Native
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2
 
Débuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJSDébuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJS
 
Introduction à Vaadin
Introduction à VaadinIntroduction à Vaadin
Introduction à Vaadin
 
De Google+ à twitter en passant par le Cloud
De Google+ à twitter en passant par le CloudDe Google+ à twitter en passant par le Cloud
De Google+ à twitter en passant par le Cloud
 
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
 
Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the future
 
AngularJS
AngularJSAngularJS
AngularJS
 
Comment créer une application Angular performante ?
Comment créer une application Angular performante ?Comment créer une application Angular performante ?
Comment créer une application Angular performante ?
 
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
 
Ionic, react native, native script
Ionic, react native, native scriptIonic, react native, native script
Ionic, react native, native script
 
Agile Tour 2016 @ Lille
Agile Tour 2016 @ LilleAgile Tour 2016 @ Lille
Agile Tour 2016 @ Lille
 

Similaire à Angular 6, CLI 6, Material 6 (french)

Developpement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache CordovaDeveloppement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache Cordova
Microsoft
 
Cours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrrCours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrr
inesrdissi60
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
imenhamada17
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
Jaouad Assabbour
 
Microservice LabsZoom.pptx.pdf
Microservice LabsZoom.pptx.pdfMicroservice LabsZoom.pptx.pdf
Microservice LabsZoom.pptx.pdf
François Berthault
 
Challenge Exakis - Visual studio 2015
Challenge Exakis - Visual studio 2015Challenge Exakis - Visual studio 2015
Challenge Exakis - Visual studio 2015
Jonathan Le Guellec
 
Docker, Pierre angulaire du continuous delivery ?
Docker, Pierre angulaire du continuous delivery ?Docker, Pierre angulaire du continuous delivery ?
Docker, Pierre angulaire du continuous delivery ?
Adrien Blind
 
Framework JavaScript Web - Brief techno
Framework JavaScript Web - Brief technoFramework JavaScript Web - Brief techno
Framework JavaScript Web - Brief techno
JEAN-GUILLAUME DUJARDIN
 
Gwt présentation-jug-14avr2011
Gwt présentation-jug-14avr2011Gwt présentation-jug-14avr2011
Gwt présentation-jug-14avr2011
Montreal JUG
 
Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011
Claude Coulombe
 
Calculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stackCalculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stack
Calculus System SARL
 
JavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppJavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To App
Sébastien Ollivier
 
Native script
Native scriptNative script
Native script
Neticoa Sénégal
 
Angular 11
Angular 11Angular 11
Angular 11
PapaDjadjigueye
 
React Native - Développez vos application native en JS
React Native - Développez vos application native en JSReact Native - Développez vos application native en JS
React Native - Développez vos application native en JS
Yann Duval
 
Investir sur son API web (in French)
Investir sur son API web (in French)Investir sur son API web (in French)
Investir sur son API web (in French)
Restlet
 
Demarrer ionic en 5 etape
Demarrer ionic en 5 etapeDemarrer ionic en 5 etape
Demarrer ionic en 5 etape
Zaïd BOUDAMOUZ
 
Calculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stackCalculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stack
Calculus System SARL
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
Horacio Gonzalez
 

Similaire à Angular 6, CLI 6, Material 6 (french) (20)

Developpement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache CordovaDeveloppement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache Cordova
 
Cours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrrCours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrr
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
CV REBAI Hamida
CV REBAI HamidaCV REBAI Hamida
CV REBAI Hamida
 
Microservice LabsZoom.pptx.pdf
Microservice LabsZoom.pptx.pdfMicroservice LabsZoom.pptx.pdf
Microservice LabsZoom.pptx.pdf
 
Challenge Exakis - Visual studio 2015
Challenge Exakis - Visual studio 2015Challenge Exakis - Visual studio 2015
Challenge Exakis - Visual studio 2015
 
Docker, Pierre angulaire du continuous delivery ?
Docker, Pierre angulaire du continuous delivery ?Docker, Pierre angulaire du continuous delivery ?
Docker, Pierre angulaire du continuous delivery ?
 
Framework JavaScript Web - Brief techno
Framework JavaScript Web - Brief technoFramework JavaScript Web - Brief techno
Framework JavaScript Web - Brief techno
 
Gwt présentation-jug-14avr2011
Gwt présentation-jug-14avr2011Gwt présentation-jug-14avr2011
Gwt présentation-jug-14avr2011
 
Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011
 
Calculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stackCalculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stack
 
JavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppJavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To App
 
Native script
Native scriptNative script
Native script
 
Angular 11
Angular 11Angular 11
Angular 11
 
React Native - Développez vos application native en JS
React Native - Développez vos application native en JSReact Native - Développez vos application native en JS
React Native - Développez vos application native en JS
 
Investir sur son API web (in French)
Investir sur son API web (in French)Investir sur son API web (in French)
Investir sur son API web (in French)
 
Demarrer ionic en 5 etape
Demarrer ionic en 5 etapeDemarrer ionic en 5 etape
Demarrer ionic en 5 etape
 
Calculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stackCalculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stack
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
 

Plus de Laurent Duveau

Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.
Laurent Duveau
 
8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!
Laurent Duveau
 
Angular Advanced Routing
Angular Advanced RoutingAngular Advanced Routing
Angular Advanced Routing
Laurent Duveau
 
Debugging an Angular App
Debugging an Angular AppDebugging an Angular App
Debugging an Angular App
Laurent Duveau
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
Laurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
Laurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersIntroduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET Developers
Laurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??Angular 2... so can I use it now??
Angular 2... so can I use it now??
Laurent Duveau
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs web
Laurent Duveau
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs web
Laurent Duveau
 
Introduction to SPAs with AngularJS
Introduction to SPAs with AngularJSIntroduction to SPAs with AngularJS
Introduction to SPAs with AngularJS
Laurent Duveau
 
Xamarin.Forms [french]
Xamarin.Forms [french]Xamarin.Forms [french]
Xamarin.Forms [french]
Laurent Duveau
 
Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014
Laurent Duveau
 
Windows App Studio
Windows App StudioWindows App Studio
Windows App Studio
Laurent Duveau
 
Windows 8: Live tiles, badges et notifications toasts [french]
Windows 8: Live tiles, badges et notifications toasts [french]Windows 8: Live tiles, badges et notifications toasts [french]
Windows 8: Live tiles, badges et notifications toasts [french]
Laurent Duveau
 
L'opportunité Windows 8 pour les développeurs
L'opportunité Windows 8 pour les développeursL'opportunité Windows 8 pour les développeurs
L'opportunité Windows 8 pour les développeurs
Laurent Duveau
 

Plus de Laurent Duveau (20)

Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.
 
8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!
 
Angular Advanced Routing
Angular Advanced RoutingAngular Advanced Routing
Angular Advanced Routing
 
Debugging an Angular App
Debugging an Angular AppDebugging an Angular App
Debugging an Angular App
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersIntroduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET Developers
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??Angular 2... so can I use it now??
Angular 2... so can I use it now??
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs web
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs web
 
Introduction to SPAs with AngularJS
Introduction to SPAs with AngularJSIntroduction to SPAs with AngularJS
Introduction to SPAs with AngularJS
 
Xamarin.Forms [french]
Xamarin.Forms [french]Xamarin.Forms [french]
Xamarin.Forms [french]
 
Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014
 
Windows App Studio
Windows App StudioWindows App Studio
Windows App Studio
 
Windows 8: Live tiles, badges et notifications toasts [french]
Windows 8: Live tiles, badges et notifications toasts [french]Windows 8: Live tiles, badges et notifications toasts [french]
Windows 8: Live tiles, badges et notifications toasts [french]
 
L'opportunité Windows 8 pour les développeurs
L'opportunité Windows 8 pour les développeursL'opportunité Windows 8 pour les développeurs
L'opportunité Windows 8 pour les développeurs
 

Dernier

Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)
Adrien Blind
 
Lae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdfLae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdf
djelloulbra
 
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Maalik Jallo
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
Sébastien Le Marchand
 
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
InnovaSter-Trade Ltd.
 
procede de fabrication mecanique et industriel
procede de fabrication mecanique et industrielprocede de fabrication mecanique et industriel
procede de fabrication mecanique et industriel
saadbellaari
 
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptxCours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Jacques KIZA DIMANDJA
 

Dernier (7)

Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)
 
Lae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdfLae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdf
 
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
 
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
 
procede de fabrication mecanique et industriel
procede de fabrication mecanique et industrielprocede de fabrication mecanique et industriel
procede de fabrication mecanique et industriel
 
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptxCours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
 

Angular 6, CLI 6, Material 6 (french)

  • 1. ANGULAR 6 CLI 6 MATERIAL 6 Laurent Duveau, 12 Juillet 2018 AixJS Meetup, Aix-en-Provence, France
  • 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…
  • 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
  • 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