SlideShare une entreprise Scribd logo
Angular 2
Le Plan
 Inroduction (TypeScript)
 Présentation de Angular 2
 Les Avantages de Angular 2
 Architecture
 Exemple Complet d’une application
Angular
 Workshop
Introduction :
TypeScript
 Langage créé par Anders Hejlsberg en 2012
 Projet open-source maintenu par Microsoft
 Ajout de nouvelles fonctionnalités au langage
JavaScript
 Support d'ES3 / ES5 / ES2015
 Tout programme JavaScript est un programme
TypeScript
Présentation de
Angular 2
 Mobiles Framework créé par Google et annoncé en 2014
 Réécriture total du framework
 Reprend certains concepts d'AngularJS
 1e version beta annoncée le 23/10/2014
 Version officielle sortie en 2016
 Programmation orientée Composant
 Framework conçu pour être plus performant et optimisé
pour les mobiles
Les Avantages de
Angular
Augmenter les performances
Améliorer la productivité
S’adapter au mobile
Embrasser les nouveaux standards du Web
Architecture
Architecture :
regroupement d'un ensemble de fonctionnalités sous un même
Namespace.
 Les composants :
 Library Modules (barrels):
 Modules :
@angular/core, @angular/http... .
Elément graphique composé d'un template et d'une classe
 Directives composants sans template (ngFor, ngIf, ...)
Architecture :
 Pipe :
Métadata: Moyen d'indiquer à Angular comment utiliser la classe
Code métier implémenté dans des classes qui seront injectées
dans les différents composants.
 Services :
Elément permettant de formatter une donnée (équivalent au filter
d'AngularJS).
Exemple Complet
Workshop (15 minutes)
MERCI POUR
VOTRE ATTENTION !

Contenu connexe

Tendances

Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptx
IdrissaDembl
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
Jaouad Assabbour
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
Laurent Duveau
 
Fondamentaux java
Fondamentaux javaFondamentaux java
Fondamentaux java
Ines Ouaz
 
Angular Avancé
Angular AvancéAngular Avancé
DART.pptx
DART.pptxDART.pptx
DART.pptx
IdrissaDembl
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
marwa baich
 
Angular 2
Angular 2Angular 2
Angular 2
Zoubir REMILA
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
Antoine Rey
 
Angular
AngularAngular
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
ENSET, Université Hassan II Casablanca
 
Angular 9
Angular 9 Angular 9
Angular 9
Raja Vishnu
 
Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
ENSET, Université Hassan II Casablanca
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
ENSET, Université Hassan II Casablanca
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
ENSET, Université Hassan II Casablanca
 
Modele mvc
Modele mvcModele mvc
Modele mvc
Soulef riahi
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
ENSET, Université Hassan II Casablanca
 
Appalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSPAppalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSP
Youness Boukouchi
 
Angular 8
Angular 8 Angular 8
Angular 8
Sunil OS
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
ENSET, Université Hassan II Casablanca
 

Tendances (20)

Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptx
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Fondamentaux java
Fondamentaux javaFondamentaux java
Fondamentaux java
 
Angular Avancé
Angular AvancéAngular Avancé
Angular Avancé
 
DART.pptx
DART.pptxDART.pptx
DART.pptx
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
 
Angular 2
Angular 2Angular 2
Angular 2
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
Angular
AngularAngular
Angular
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
 
Angular 9
Angular 9 Angular 9
Angular 9
 
Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
 
Modele mvc
Modele mvcModele mvc
Modele mvc
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
Appalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSPAppalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSP
 
Angular 8
Angular 8 Angular 8
Angular 8
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 

Similaire à Présentation Angular 2

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
 
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
 
Oracle Developer adf
Oracle Developer adfOracle Developer adf
Oracle Developer adf
Bacely YoroBi
 
Angular 11
Angular 11Angular 11
Angular 11
PapaDjadjigueye
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
Safwen Chibeni
 
Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)
Laurent Duveau
 
Intro aurelia js-typescript
Intro aurelia js-typescriptIntro aurelia js-typescript
Intro aurelia js-typescript
Philippe Beroucrry
 
Formation gwt
Formation gwtFormation gwt
Formation gwt
Francois ANDRE
 
Frontend Operations
Frontend OperationsFrontend Operations
Frontend Operations
Philippe Antoine
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
Aymen Sellaouti
 
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
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas
 
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
 
TP GWT JDEV 2015
TP GWT JDEV 2015TP GWT JDEV 2015
TP GWT JDEV 2015
Francois ANDRE
 
Challenge Exakis - Visual studio 2015
Challenge Exakis - Visual studio 2015Challenge Exakis - Visual studio 2015
Challenge Exakis - Visual studio 2015
Jonathan Le Guellec
 
Softfluent speig mdday2010
Softfluent speig mdday2010Softfluent speig mdday2010
Softfluent speig mdday2010
MD DAY
 

Similaire à Présentation Angular 2 (20)

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
 
CV REBAI Hamida
CV REBAI HamidaCV REBAI Hamida
CV REBAI Hamida
 
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)
 
Oracle Developer adf
Oracle Developer adfOracle Developer adf
Oracle Developer adf
 
Angular 11
Angular 11Angular 11
Angular 11
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
 
Objecteering
ObjecteeringObjecteering
Objecteering
 
Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)
 
Intro aurelia js-typescript
Intro aurelia js-typescriptIntro aurelia js-typescript
Intro aurelia js-typescript
 
Formation gwt
Formation gwtFormation gwt
Formation gwt
 
Frontend Operations
Frontend OperationsFrontend Operations
Frontend Operations
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
 
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
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
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
 
TP GWT JDEV 2015
TP GWT JDEV 2015TP GWT JDEV 2015
TP GWT JDEV 2015
 
Challenge Exakis - Visual studio 2015
Challenge Exakis - Visual studio 2015Challenge Exakis - Visual studio 2015
Challenge Exakis - Visual studio 2015
 
Softfluent speig mdday2010
Softfluent speig mdday2010Softfluent speig mdday2010
Softfluent speig mdday2010
 

Plus de Cynapsys It Hotspot

Présentation data warehouse etl et olap
Présentation data warehouse etl et olapPrésentation data warehouse etl et olap
Présentation data warehouse etl et olap
Cynapsys It Hotspot
 
Introduction à la Business Intelligence
Introduction à la Business Intelligence Introduction à la Business Intelligence
Introduction à la Business Intelligence
Cynapsys It Hotspot
 
Catalogue pfe cynapsys_2016_2017
Catalogue pfe cynapsys_2016_2017Catalogue pfe cynapsys_2016_2017
Catalogue pfe cynapsys_2016_2017
Cynapsys It Hotspot
 
Présentation noura baccar " Innovation on Indoor GeoLocalization Applications...
Présentation noura baccar " Innovation on Indoor GeoLocalization Applications...Présentation noura baccar " Innovation on Indoor GeoLocalization Applications...
Présentation noura baccar " Innovation on Indoor GeoLocalization Applications...
Cynapsys It Hotspot
 
Comment manager une équipe de 100 ingénieurs
Comment manager une équipe de 100 ingénieurs Comment manager une équipe de 100 ingénieurs
Comment manager une équipe de 100 ingénieurs
Cynapsys It Hotspot
 
Exposé 1 brevet med truki (1)
Exposé 1  brevet  med truki (1)Exposé 1  brevet  med truki (1)
Exposé 1 brevet med truki (1)
Cynapsys It Hotspot
 
Exposé 2 brevet med truki (2)
Exposé 2  brevet  med truki (2)Exposé 2  brevet  med truki (2)
Exposé 2 brevet med truki (2)
Cynapsys It Hotspot
 
Présentation nouveauté java7
Présentation nouveauté java7Présentation nouveauté java7
Présentation nouveauté java7
Cynapsys It Hotspot
 
Cloud presentation
Cloud  presentationCloud  presentation
Cloud presentation
Cynapsys It Hotspot
 
Présentation cloud computing
Présentation cloud computingPrésentation cloud computing
Présentation cloud computing
Cynapsys It Hotspot
 
Présentation banc_ test
Présentation banc_ testPrésentation banc_ test
Présentation banc_ test
Cynapsys It Hotspot
 
Automotive : Domaine & applications
Automotive : Domaine & applicationsAutomotive : Domaine & applications
Automotive : Domaine & applications
Cynapsys It Hotspot
 
PRESENTATION CYN APSYS/MANTIS
PRESENTATION CYN APSYS/MANTISPRESENTATION CYN APSYS/MANTIS
PRESENTATION CYN APSYS/MANTIS
Cynapsys It Hotspot
 
Informatique Quantique
Informatique QuantiqueInformatique Quantique
Informatique Quantique
Cynapsys It Hotspot
 
Informatique Quantique
Informatique QuantiqueInformatique Quantique
Informatique Quantique
Cynapsys It Hotspot
 
Présentation Cryptographie
Présentation CryptographiePrésentation Cryptographie
Présentation Cryptographie
Cynapsys It Hotspot
 
Presentaion fpga µc µp quelles est la solution
Presentaion  fpga µc µp quelles est la solutionPresentaion  fpga µc µp quelles est la solution
Presentaion fpga µc µp quelles est la solution
Cynapsys It Hotspot
 
Comminucation v&nv
Comminucation v&nvComminucation v&nv
Comminucation v&nv
Cynapsys It Hotspot
 
Presentation mantis
Presentation mantisPresentation mantis
Presentation mantis
Cynapsys It Hotspot
 

Plus de Cynapsys It Hotspot (20)

Présentation data warehouse etl et olap
Présentation data warehouse etl et olapPrésentation data warehouse etl et olap
Présentation data warehouse etl et olap
 
Introduction à la Business Intelligence
Introduction à la Business Intelligence Introduction à la Business Intelligence
Introduction à la Business Intelligence
 
Catalogue pfe cynapsys_2016_2017
Catalogue pfe cynapsys_2016_2017Catalogue pfe cynapsys_2016_2017
Catalogue pfe cynapsys_2016_2017
 
Présentation noura baccar " Innovation on Indoor GeoLocalization Applications...
Présentation noura baccar " Innovation on Indoor GeoLocalization Applications...Présentation noura baccar " Innovation on Indoor GeoLocalization Applications...
Présentation noura baccar " Innovation on Indoor GeoLocalization Applications...
 
Comment manager une équipe de 100 ingénieurs
Comment manager une équipe de 100 ingénieurs Comment manager une équipe de 100 ingénieurs
Comment manager une équipe de 100 ingénieurs
 
Exposé 1 brevet med truki (1)
Exposé 1  brevet  med truki (1)Exposé 1  brevet  med truki (1)
Exposé 1 brevet med truki (1)
 
Exposé 2 brevet med truki (2)
Exposé 2  brevet  med truki (2)Exposé 2  brevet  med truki (2)
Exposé 2 brevet med truki (2)
 
Présentation nouveauté java7
Présentation nouveauté java7Présentation nouveauté java7
Présentation nouveauté java7
 
Cloud presentation
Cloud  presentationCloud  presentation
Cloud presentation
 
Présentation cloud computing
Présentation cloud computingPrésentation cloud computing
Présentation cloud computing
 
Présentation banc_ test
Présentation banc_ testPrésentation banc_ test
Présentation banc_ test
 
Automotive : Domaine & applications
Automotive : Domaine & applicationsAutomotive : Domaine & applications
Automotive : Domaine & applications
 
PRESENTATION CYN APSYS/MANTIS
PRESENTATION CYN APSYS/MANTISPRESENTATION CYN APSYS/MANTIS
PRESENTATION CYN APSYS/MANTIS
 
Formation traitement d_images
Formation traitement d_imagesFormation traitement d_images
Formation traitement d_images
 
Informatique Quantique
Informatique QuantiqueInformatique Quantique
Informatique Quantique
 
Informatique Quantique
Informatique QuantiqueInformatique Quantique
Informatique Quantique
 
Présentation Cryptographie
Présentation CryptographiePrésentation Cryptographie
Présentation Cryptographie
 
Presentaion fpga µc µp quelles est la solution
Presentaion  fpga µc µp quelles est la solutionPresentaion  fpga µc µp quelles est la solution
Presentaion fpga µc µp quelles est la solution
 
Comminucation v&nv
Comminucation v&nvComminucation v&nv
Comminucation v&nv
 
Presentation mantis
Presentation mantisPresentation mantis
Presentation mantis
 

Présentation Angular 2

  • 2. Le Plan  Inroduction (TypeScript)  Présentation de Angular 2  Les Avantages de Angular 2  Architecture  Exemple Complet d’une application Angular  Workshop
  • 3. Introduction : TypeScript  Langage créé par Anders Hejlsberg en 2012  Projet open-source maintenu par Microsoft  Ajout de nouvelles fonctionnalités au langage JavaScript  Support d'ES3 / ES5 / ES2015  Tout programme JavaScript est un programme TypeScript
  • 4. Présentation de Angular 2  Mobiles Framework créé par Google et annoncé en 2014  Réécriture total du framework  Reprend certains concepts d'AngularJS  1e version beta annoncée le 23/10/2014  Version officielle sortie en 2016  Programmation orientée Composant  Framework conçu pour être plus performant et optimisé pour les mobiles
  • 5. Les Avantages de Angular Augmenter les performances Améliorer la productivité S’adapter au mobile Embrasser les nouveaux standards du Web
  • 7. Architecture : regroupement d'un ensemble de fonctionnalités sous un même Namespace.  Les composants :  Library Modules (barrels):  Modules : @angular/core, @angular/http... . Elément graphique composé d'un template et d'une classe  Directives composants sans template (ngFor, ngIf, ...)
  • 8. Architecture :  Pipe : Métadata: Moyen d'indiquer à Angular comment utiliser la classe Code métier implémenté dans des classes qui seront injectées dans les différents composants.  Services : Elément permettant de formatter une donnée (équivalent au filter d'AngularJS).