SlideShare une entreprise Scribd logo
ANGULAR
FRAMEWORK DE DEVELOPPEMENT WEB
Qu’est-ce qu’Angular ?
C’est un framework de développement front pour créer des applications monopages, web et mobile.
Crée en 2009 par Misko Hevery, employé chez Google.
Maintenu à la fois par Google et la communauté des développeurs.
Quel type d’applications ?
 Des petits widgets interactifs
 Des sites web complet
 Des applications mobiles
 Tout en fait…
Historique
• 2009 : Sortie d’AngularJS
• 2013 : Explosion de notoriété et d’adoption
• Septembre 2014 : Annonce de la sortie d’Angular 2
• Septembre 2016 : Sortie d’Angular 2
• Mars 2017 : Angular 4
• Octobre 2017 : Angular 5
• Mars 2018 : Angular 6
• Octobre 2018 : Angular 7
Pourquoi avoir recrée Angular ?
Angular ne reprend pas le code source de base d’AngularJS, mais reprend quelques concepts.
Google a cherche à faire table rase du passé, en remettant à plat de nombreux concepts présents
dans AngularJS.
Cette stratégie a été motivée par 4 principes fondateurs :
• Augmenter les performances
• Angular se repose davantage sur les briques natives du navigateur (ex: WebComponents)
• Améliorer la productivité :
• en se basant sur le langage Typescript (Plus strict et sécurisé que Javascript)
• S’adapter au mobile :
• La conception modulaire du framework permet de réduire l’empreinte mémoire sur les terminaux mobiles
• Embrasser les nouveaux standards du Web…
• en se basant sur des technologies et nouveautés apportées par ECMAScript 6.
D’ailleurs comment on dit ? Angular ? AngularJS ?…
ANGULARJS
Version 1.7.2
C’est le framework historique (crée en 2009)
https://angularjs.org
ANGULAR
Version 7
C’est le nouveau framework (recrée en 2014)
https://angular.io
Migrer une application AngularJS vers Angular est possible mais peut nécessiter une refonte complète de l’application.
Il est possible de faire un alliage des 2 en attendant de passer de l’un vers l’autre : https://angular.io/docs/ts/latest/guide/upgrade.html
Principales caractéristiques d’Angular
• Langage de développement : TypeScript
• Complet. Inclut toutes les briques nécessaires à la création d'une application : routage,
requêtage HTTP, gestion de formulaires, internationalisation etc.
• Modulaire. Le framework lui-même est découpé en sous-paquets correspondant aux grandes
aires fonctionnelles. Les applications sont organisées en composants et en modules.
• Tout est composant. Composant = brique de base de toute appli Angular.
• Rapide. D’après les benchmarks, Angular (version 2) est 5x plus rapide que AngularJS.
• Support : tous navigateurs y compris IE 9 avec l’utilisation de polyfills. (Pas de support pour les
versions d’IE < 9)
Différences
Entre AngularJS, Angular et React
L’architecture d’Angular
Module
◦ C’est la base d’une application Angular
◦ Un module peut représenter le tout ou une partie de votre application
◦ Un module peut contenir les éléments suivants :
◦ Component
◦ Service
◦ Directive
◦ Pipe
◦ Un module peut être dépendant d’un ou plusieurs autre(s) module(s)
◦ Un module peut être partagé à d’autres modules
L’architecture d’Angular
Component
◦ Dans Angular, tout est composant
◦ Un composant est une balise HTML personnalisée (ex: app-root, app-shop, app-login etc.)
◦ Définit par :
◦ 1 sélecteur (le nom de la balise)
◦ 1 template
◦ 1 ou plusieurs fichiers de style CSS (facultatif)
◦ Représenté par :
◦ 1 fichier Typescript (.ts)
◦ 1 fichier HTML (.html)
◦ 1 ou plusieurs fichiers de style CSS (facultatif)
◦ Un component peut utiliser d’autres components
ROOT
<my-app></my-app>
MY-HOMEPAGE
<my-list elements="items"></my-list>
MY-APP
<my-navigation></my-navigation>
<my-homepage></my-homepage>
<my-profile-creator-page></my-profile-creator-page>
MY-LIST
<ul>
<li *ngFor="let item of items">
<my-listitem item="item"></my-listitem>
</li>
</ul>
MY-LIST-ITEM
<span (click)="showItem(item)">
{{ item.name }}
</span>
Outillage
Typescript
Language de programmation libre et open-source développé par Microsoft
But initial : simplifier la production de code Javascript
Permet d’utiliser tous les concepts orienté objets
(classes, interfaces, héritages, public/private etc.)
Le code écrit en Typescript est transpilé en Javascript
Site officiel : https://www.typescriptlang.org
Qu’apporte TypeScript par rapport à Javascript : http://bit.ly/2rMQups
npm install –g typescript
Outillage
IDE
La plupart des IDE proposent des extensions pour supporter Typescript
• Visual Studio Code
• WebStorm / PhpStorm
• Sublime Text
• Notepad++
• Eclipse
• …
Outillage
Angular CLI
Outil en ligne de commande pour simplifier les tâches de développement
avec Angular.
Fonctionnalités :
création d’un projet, génération de composants, exécution des
tests, lancement du serveur, déploiement en production…
npm install –g @angular/cli
DEMO
Utilisation d’Angular CLI
- Créer un site
- Lancer un site
- Créer un composant
- Utiliser les directives ngIf et ngFor
- Databinding
- Utilisation des pipes
- Créer un service
Ressources
Site officiel : https://angular.io
Tutoriel officiel (Quickstart) : https://angular.io/docs/ts/latest/quickstart.html
Vidéos Angular en français : https://www.youtube.com/watch?v=mOD2sGp4V8o
Angular CLI : Outil en ligne de commande pour développer avec Angular https://cli.angular.io/
Angular Style Guide : concentré des bonnes pratiques pour développer avec Angular https://angular.io/styleguide
@ngx-translate : module pour internationaliser votre application https://github.com/ngx-translate/core
@angular/material : module d’intégration permettant d’utiliser le style ‘flat’ de Google https://material.angular.io/

Contenu connexe

Tendances

Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
ENSET, Université Hassan II Casablanca
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
Antoine Rey
 
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
 
Microservices avec Spring Cloud
Microservices avec Spring CloudMicroservices avec Spring Cloud
Microservices avec Spring Cloud
Florian Beaufumé
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
marwa baich
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
ENSET, Université Hassan II Casablanca
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptx
IdrissaDembl
 
Modele mvc
Modele mvcModele mvc
Modele mvc
Soulef riahi
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
RadhoueneRouached
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Abdoulaye Dieng
 
Fondamentaux java
Fondamentaux javaFondamentaux java
Fondamentaux java
Ines Ouaz
 
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
 
Angular Avancé
Angular AvancéAngular Avancé
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
Jaouad Assabbour
 
Support POO Java Deuxième Partie
Support POO Java Deuxième PartieSupport POO Java Deuxième Partie
Support POO Java Deuxième Partie
ENSET, Université Hassan II Casablanca
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
ENSET, Université Hassan II Casablanca
 
Cours design pattern m youssfi partie 2 observer
Cours design pattern m youssfi partie 2 observerCours design pattern m youssfi partie 2 observer
Cours design pattern m youssfi partie 2 observer
ENSET, Université Hassan II Casablanca
 
Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web services
Lilia Sfaxi
 
Support Java Avancé Troisième Partie
Support Java Avancé Troisième PartieSupport Java Avancé Troisième Partie
Support Java Avancé Troisième Partie
ENSET, Université Hassan II Casablanca
 
Conception et développement d’une plateforme d'import-export avec paiement en...
Conception et développement d’une plateforme d'import-export avec paiement en...Conception et développement d’une plateforme d'import-export avec paiement en...
Conception et développement d’une plateforme d'import-export avec paiement en...
Karim Ben Alaya
 

Tendances (20)

Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
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
 
Microservices avec Spring Cloud
Microservices avec Spring CloudMicroservices avec Spring Cloud
Microservices avec Spring Cloud
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptx
 
Modele mvc
Modele mvcModele mvc
Modele mvc
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Fondamentaux java
Fondamentaux javaFondamentaux java
Fondamentaux java
 
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
 
Angular Avancé
Angular AvancéAngular Avancé
Angular Avancé
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
Support POO Java Deuxième Partie
Support POO Java Deuxième PartieSupport POO Java Deuxième Partie
Support POO Java Deuxième Partie
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
 
Cours design pattern m youssfi partie 2 observer
Cours design pattern m youssfi partie 2 observerCours design pattern m youssfi partie 2 observer
Cours design pattern m youssfi partie 2 observer
 
Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web services
 
Support Java Avancé Troisième Partie
Support Java Avancé Troisième PartieSupport Java Avancé Troisième Partie
Support Java Avancé Troisième Partie
 
Conception et développement d’une plateforme d'import-export avec paiement en...
Conception et développement d’une plateforme d'import-export avec paiement en...Conception et développement d’une plateforme d'import-export avec paiement en...
Conception et développement d’une plateforme d'import-export avec paiement en...
 

Similaire à Introduction à Angular

Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
imenhamada17
 
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 11
Angular 11Angular 11
Angular 11
PapaDjadjigueye
 
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
 
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
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
Vincent Caillierez
 
Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?
Maxime Bernard
 
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
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
Stéphane Traumat
 
Angular 2
Angular 2Angular 2
Angular 2
Zoubir REMILA
 
Conférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG Montpellier
Damien Laureaux
 
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
 
Introduction webextensions
Introduction webextensionsIntroduction webextensions
Introduction webextensions
Christophe Villeneuve
 
1er atelier technique - IGO2 - 17 mai 2017
1er atelier technique - IGO2 - 17 mai 20171er atelier technique - IGO2 - 17 mai 2017
1er atelier technique - IGO2 - 17 mai 2017
igouverte
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
Aymen Sellaouti
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
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
 

Similaire à Introduction à Angular (20)

Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
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 11
Angular 11Angular 11
Angular 11
 
CV REBAI Hamida
CV REBAI HamidaCV REBAI Hamida
CV REBAI Hamida
 
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
 
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
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?
 
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)
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
 
Angular 2
Angular 2Angular 2
Angular 2
 
Conférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG Montpellier
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
 
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)
 
Introduction webextensions
Introduction webextensionsIntroduction webextensions
Introduction webextensions
 
1er atelier technique - IGO2 - 17 mai 2017
1er atelier technique - IGO2 - 17 mai 20171er atelier technique - IGO2 - 17 mai 2017
1er atelier technique - IGO2 - 17 mai 2017
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
 
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 ?
 

Plus de Jean-Baptiste Vigneron

Une introduction à Javascript et ECMAScript 6
Une introduction à Javascript et ECMAScript 6Une introduction à Javascript et ECMAScript 6
Une introduction à Javascript et ECMAScript 6
Jean-Baptiste Vigneron
 
Université du soir - TDD
Université du soir - TDDUniversité du soir - TDD
Université du soir - TDD
Jean-Baptiste Vigneron
 
Agile Tour 2016 @ Lille
Agile Tour 2016 @ LilleAgile Tour 2016 @ Lille
Agile Tour 2016 @ Lille
Jean-Baptiste Vigneron
 
Compte-rendu Agile Tour 2014 à Lille
Compte-rendu Agile Tour 2014 à LilleCompte-rendu Agile Tour 2014 à Lille
Compte-rendu Agile Tour 2014 à Lille
Jean-Baptiste Vigneron
 
Initiation à ASP.NET 4.0
Initiation à ASP.NET 4.0Initiation à ASP.NET 4.0
Initiation à ASP.NET 4.0
Jean-Baptiste Vigneron
 
Atelier initiation Windows Phone 7
Atelier initiation Windows Phone 7Atelier initiation Windows Phone 7
Atelier initiation Windows Phone 7
Jean-Baptiste Vigneron
 
Pattern MVVM avec MVVM Light Toolkit
Pattern MVVM avec MVVM Light ToolkitPattern MVVM avec MVVM Light Toolkit
Pattern MVVM avec MVVM Light Toolkit
Jean-Baptiste Vigneron
 
Langage C#
Langage C#Langage C#
.NET Framework
.NET Framework.NET Framework
.NET Framework
Jean-Baptiste Vigneron
 
Versioning avec Git
Versioning avec GitVersioning avec Git
Versioning avec Git
Jean-Baptiste Vigneron
 

Plus de Jean-Baptiste Vigneron (10)

Une introduction à Javascript et ECMAScript 6
Une introduction à Javascript et ECMAScript 6Une introduction à Javascript et ECMAScript 6
Une introduction à Javascript et ECMAScript 6
 
Université du soir - TDD
Université du soir - TDDUniversité du soir - TDD
Université du soir - TDD
 
Agile Tour 2016 @ Lille
Agile Tour 2016 @ LilleAgile Tour 2016 @ Lille
Agile Tour 2016 @ Lille
 
Compte-rendu Agile Tour 2014 à Lille
Compte-rendu Agile Tour 2014 à LilleCompte-rendu Agile Tour 2014 à Lille
Compte-rendu Agile Tour 2014 à Lille
 
Initiation à ASP.NET 4.0
Initiation à ASP.NET 4.0Initiation à ASP.NET 4.0
Initiation à ASP.NET 4.0
 
Atelier initiation Windows Phone 7
Atelier initiation Windows Phone 7Atelier initiation Windows Phone 7
Atelier initiation Windows Phone 7
 
Pattern MVVM avec MVVM Light Toolkit
Pattern MVVM avec MVVM Light ToolkitPattern MVVM avec MVVM Light Toolkit
Pattern MVVM avec MVVM Light Toolkit
 
Langage C#
Langage C#Langage C#
Langage C#
 
.NET Framework
.NET Framework.NET Framework
.NET Framework
 
Versioning avec Git
Versioning avec GitVersioning avec Git
Versioning avec Git
 

Dernier

Note agro-climatique et prairies n°5 - Juillet 2024
Note agro-climatique et prairies n°5 - Juillet 2024Note agro-climatique et prairies n°5 - Juillet 2024
Note agro-climatique et prairies n°5 - Juillet 2024
idelewebmestre
 
Webinaire BL 28_06_01_robots de traite.pdf
Webinaire BL 28_06_01_robots de traite.pdfWebinaire BL 28_06_01_robots de traite.pdf
Webinaire BL 28_06_01_robots de traite.pdf
Institut de l'Elevage - Idele
 
cours-sur-les-stations-de-pompageen génie civil.pdf
cours-sur-les-stations-de-pompageen génie civil.pdfcours-sur-les-stations-de-pompageen génie civil.pdf
cours-sur-les-stations-de-pompageen génie civil.pdf
afigloria194
 
Webinaire BL 28_06_03_Transmissibilité.pdf
Webinaire BL 28_06_03_Transmissibilité.pdfWebinaire BL 28_06_03_Transmissibilité.pdf
Webinaire BL 28_06_03_Transmissibilité.pdf
Institut de l'Elevage - Idele
 
Shimla Girls call Service 000XX00000 Provide Best And Top Girl Service And No...
Shimla Girls call Service 000XX00000 Provide Best And Top Girl Service And No...Shimla Girls call Service 000XX00000 Provide Best And Top Girl Service And No...
Shimla Girls call Service 000XX00000 Provide Best And Top Girl Service And No...
manalishivani8
 
Webinaire BL 28_06_02_Consommation Energie.pdf
Webinaire BL 28_06_02_Consommation Energie.pdfWebinaire BL 28_06_02_Consommation Energie.pdf
Webinaire BL 28_06_02_Consommation Energie.pdf
Institut de l'Elevage - Idele
 

Dernier (6)

Note agro-climatique et prairies n°5 - Juillet 2024
Note agro-climatique et prairies n°5 - Juillet 2024Note agro-climatique et prairies n°5 - Juillet 2024
Note agro-climatique et prairies n°5 - Juillet 2024
 
Webinaire BL 28_06_01_robots de traite.pdf
Webinaire BL 28_06_01_robots de traite.pdfWebinaire BL 28_06_01_robots de traite.pdf
Webinaire BL 28_06_01_robots de traite.pdf
 
cours-sur-les-stations-de-pompageen génie civil.pdf
cours-sur-les-stations-de-pompageen génie civil.pdfcours-sur-les-stations-de-pompageen génie civil.pdf
cours-sur-les-stations-de-pompageen génie civil.pdf
 
Webinaire BL 28_06_03_Transmissibilité.pdf
Webinaire BL 28_06_03_Transmissibilité.pdfWebinaire BL 28_06_03_Transmissibilité.pdf
Webinaire BL 28_06_03_Transmissibilité.pdf
 
Shimla Girls call Service 000XX00000 Provide Best And Top Girl Service And No...
Shimla Girls call Service 000XX00000 Provide Best And Top Girl Service And No...Shimla Girls call Service 000XX00000 Provide Best And Top Girl Service And No...
Shimla Girls call Service 000XX00000 Provide Best And Top Girl Service And No...
 
Webinaire BL 28_06_02_Consommation Energie.pdf
Webinaire BL 28_06_02_Consommation Energie.pdfWebinaire BL 28_06_02_Consommation Energie.pdf
Webinaire BL 28_06_02_Consommation Energie.pdf
 

Introduction à Angular

  • 2. Qu’est-ce qu’Angular ? C’est un framework de développement front pour créer des applications monopages, web et mobile. Crée en 2009 par Misko Hevery, employé chez Google. Maintenu à la fois par Google et la communauté des développeurs. Quel type d’applications ?  Des petits widgets interactifs  Des sites web complet  Des applications mobiles  Tout en fait…
  • 3. Historique • 2009 : Sortie d’AngularJS • 2013 : Explosion de notoriété et d’adoption • Septembre 2014 : Annonce de la sortie d’Angular 2 • Septembre 2016 : Sortie d’Angular 2 • Mars 2017 : Angular 4 • Octobre 2017 : Angular 5 • Mars 2018 : Angular 6 • Octobre 2018 : Angular 7
  • 4. Pourquoi avoir recrée Angular ? Angular ne reprend pas le code source de base d’AngularJS, mais reprend quelques concepts. Google a cherche à faire table rase du passé, en remettant à plat de nombreux concepts présents dans AngularJS. Cette stratégie a été motivée par 4 principes fondateurs : • Augmenter les performances • Angular se repose davantage sur les briques natives du navigateur (ex: WebComponents) • Améliorer la productivité : • en se basant sur le langage Typescript (Plus strict et sécurisé que Javascript) • S’adapter au mobile : • La conception modulaire du framework permet de réduire l’empreinte mémoire sur les terminaux mobiles • Embrasser les nouveaux standards du Web… • en se basant sur des technologies et nouveautés apportées par ECMAScript 6.
  • 5. D’ailleurs comment on dit ? Angular ? AngularJS ?… ANGULARJS Version 1.7.2 C’est le framework historique (crée en 2009) https://angularjs.org ANGULAR Version 7 C’est le nouveau framework (recrée en 2014) https://angular.io Migrer une application AngularJS vers Angular est possible mais peut nécessiter une refonte complète de l’application. Il est possible de faire un alliage des 2 en attendant de passer de l’un vers l’autre : https://angular.io/docs/ts/latest/guide/upgrade.html
  • 6. Principales caractéristiques d’Angular • Langage de développement : TypeScript • Complet. Inclut toutes les briques nécessaires à la création d'une application : routage, requêtage HTTP, gestion de formulaires, internationalisation etc. • Modulaire. Le framework lui-même est découpé en sous-paquets correspondant aux grandes aires fonctionnelles. Les applications sont organisées en composants et en modules. • Tout est composant. Composant = brique de base de toute appli Angular. • Rapide. D’après les benchmarks, Angular (version 2) est 5x plus rapide que AngularJS. • Support : tous navigateurs y compris IE 9 avec l’utilisation de polyfills. (Pas de support pour les versions d’IE < 9)
  • 8. L’architecture d’Angular Module ◦ C’est la base d’une application Angular ◦ Un module peut représenter le tout ou une partie de votre application ◦ Un module peut contenir les éléments suivants : ◦ Component ◦ Service ◦ Directive ◦ Pipe ◦ Un module peut être dépendant d’un ou plusieurs autre(s) module(s) ◦ Un module peut être partagé à d’autres modules
  • 9. L’architecture d’Angular Component ◦ Dans Angular, tout est composant ◦ Un composant est une balise HTML personnalisée (ex: app-root, app-shop, app-login etc.) ◦ Définit par : ◦ 1 sélecteur (le nom de la balise) ◦ 1 template ◦ 1 ou plusieurs fichiers de style CSS (facultatif) ◦ Représenté par : ◦ 1 fichier Typescript (.ts) ◦ 1 fichier HTML (.html) ◦ 1 ou plusieurs fichiers de style CSS (facultatif) ◦ Un component peut utiliser d’autres components
  • 11. Outillage Typescript Language de programmation libre et open-source développé par Microsoft But initial : simplifier la production de code Javascript Permet d’utiliser tous les concepts orienté objets (classes, interfaces, héritages, public/private etc.) Le code écrit en Typescript est transpilé en Javascript Site officiel : https://www.typescriptlang.org Qu’apporte TypeScript par rapport à Javascript : http://bit.ly/2rMQups npm install –g typescript
  • 12. Outillage IDE La plupart des IDE proposent des extensions pour supporter Typescript • Visual Studio Code • WebStorm / PhpStorm • Sublime Text • Notepad++ • Eclipse • …
  • 13. Outillage Angular CLI Outil en ligne de commande pour simplifier les tâches de développement avec Angular. Fonctionnalités : création d’un projet, génération de composants, exécution des tests, lancement du serveur, déploiement en production… npm install –g @angular/cli
  • 14. DEMO Utilisation d’Angular CLI - Créer un site - Lancer un site - Créer un composant - Utiliser les directives ngIf et ngFor - Databinding - Utilisation des pipes - Créer un service
  • 15. Ressources Site officiel : https://angular.io Tutoriel officiel (Quickstart) : https://angular.io/docs/ts/latest/quickstart.html Vidéos Angular en français : https://www.youtube.com/watch?v=mOD2sGp4V8o Angular CLI : Outil en ligne de commande pour développer avec Angular https://cli.angular.io/ Angular Style Guide : concentré des bonnes pratiques pour développer avec Angular https://angular.io/styleguide @ngx-translate : module pour internationaliser votre application https://github.com/ngx-translate/core @angular/material : module d’intégration permettant d’utiliser le style ‘flat’ de Google https://material.angular.io/