SlideShare une entreprise Scribd logo
1  sur  10
Télécharger pour lire hors ligne
Angular
Réalisé par: Fatima Zahra Fagroud
Introduction
• Framework JavaScript basé sur l’architecture MVC
• Model: objets JavaScript contenant les données
• View: pages HTML accédant aux modèles exposés
• Controller: fonctions JavaScript qui exposent le modèle à travers l’objet
$scope et des méthodes utilitaires
• Version:
• Angularjs
• Angular 2
• Angular 4
• Angular 5
Expression et $scope
• Expression:
• Dynamique et le Framework qui la gère
• {{ expression }}
• $scope:
• Représente le modèle de l’application
• Peut être utilisé pour initialiser des valeurs de l’application ou récupérer
les champs modifiés par l’utilisateur
• Les valeurs peuvent être obtenue : un fichier json, un serveur, une vue,
services
Controllers
• Chargé d’initialiser les valeurs et contient les différentes fonctions à
appeler
• Nous permet de gérer la vue
• Créer un Controller dans un autre signifie que le $scope du controller
fils hérite du Controller parent
• Controller as : au lieu de $scope on met un objet
Filtres
• Permet de filtrer ou réordonner une collection
• Syntaxe: {{expression | filtre}}
• Il existe un ensemble de filtre disponibles
• Exemple: uppercase, lowercase
• Filtre dynamique: {{expression | filtre:param}}
• on peut créer nos propres filtres
Modules
• Chaque module déclare quelles dépendances il utilise
• Il est souhaitable d’utiliser plusieurs modules dans l’application
• Déclaration: angular.module(‘nom’,[])
• Exemple de module externes:
• ngRessource : pour interagir avec un serveur rest
• ngAnimate : pour animation
Services
• Fonctions ou objets avec un seul but bien précis
• Nom d’un service commence par $
• Si on change le nom du service rien ne fonctionne
• $http:
• permet de communiquer avec un serveur
• Méthodes: get, post, put, delete, head, jsonp
• Attributs: data, status, headers, config
• On peut créer nos propre services
Routes
• Permet de naviguer dans les pages de l’application
• $routeProvider: permet d’enregistrer les routes de notre application
• ngView: Pour savoir quelle partie de la page doit être remplacée par le
template
• Exemple:
$routeProvider
.when('/races', {
templateUrl: 'races.html',
controller: RacesCtrl
})
.when('/races/:raceId', {
templateUrl: 'race.html',
controller: RaceCtrl
})
Directives
• Une directive est un comportement ou un composant
réutilisable dans une application
• Types:
• les directives du framework
• les directives de templating (dont des tags HTML enrichis)
• les directives de style
• les directives de binding
• les directives d’action
Composant
• Chaque élément de l’application peut être un component
• Un component contient généralement 3 fichiers:
• component.html: vue
• component.css : code css
• component.ts : code type script
• On affiche un component web a l’aide de la balise <app-root>
• On le génére : ng generate component nom

Contenu connexe

Tendances

Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJsRadhoueneRouached
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontendyllieth
 
CocoaHeads Rennes #3 : Bien débuter sur iOS
CocoaHeads Rennes #3 : Bien débuter sur iOSCocoaHeads Rennes #3 : Bien débuter sur iOS
CocoaHeads Rennes #3 : Bien débuter sur iOSCocoaHeadsRNS
 
Débuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJSDébuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJSFrédéric DUPERIER
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partiekadzaki
 
Cours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partieCours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partiekadzaki
 
Jquery - introduction au langage
Jquery - introduction au langageJquery - introduction au langage
Jquery - introduction au langageStrasWeb
 

Tendances (10)

Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
CocoaHeads Rennes #3 : Bien débuter sur iOS
CocoaHeads Rennes #3 : Bien débuter sur iOSCocoaHeads Rennes #3 : Bien débuter sur iOS
CocoaHeads Rennes #3 : Bien débuter sur iOS
 
Débuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJSDébuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJS
 
Php4 Mysql
Php4 MysqlPhp4 Mysql
Php4 Mysql
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partie
 
Cours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partieCours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partie
 
JQuery
JQueryJQuery
JQuery
 
Jquery - introduction au langage
Jquery - introduction au langageJquery - introduction au langage
Jquery - introduction au langage
 

Similaire à Angular

Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPKristen Le Liboux
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdfimenhamada17
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon
 
Présentation de Ruby on Rails
Présentation de Ruby on RailsPrésentation de Ruby on Rails
Présentation de Ruby on RailsJulien Blin
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express jsAbdoulaye Dieng
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptxEsokia
 
Developpement web dynamique_Base de donnees.pdf
Developpement web dynamique_Base de donnees.pdfDeveloppement web dynamique_Base de donnees.pdf
Developpement web dynamique_Base de donnees.pdfrachidimstapha
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à AngularjsRossi Oddet
 
Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011Sylvain Wallez
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJSVISEO
 
Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"Nazih Heni
 
4D Summit Europe 2016 - Conférence d'A&C Consulting : "Stocker des données su...
4D Summit Europe 2016 - Conférence d'A&C Consulting : "Stocker des données su...4D Summit Europe 2016 - Conférence d'A&C Consulting : "Stocker des données su...
4D Summit Europe 2016 - Conférence d'A&C Consulting : "Stocker des données su...Nathalie Richomme
 
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursHoracio Gonzalez
 

Similaire à Angular (20)

Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
 
Rails 3 au Djangocong
Rails 3 au DjangocongRails 3 au Djangocong
Rails 3 au Djangocong
 
Présentation de Ruby on Rails
Présentation de Ruby on RailsPrésentation de Ruby on Rails
Présentation de Ruby on Rails
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express js
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptx
 
Developpement web dynamique_Base de donnees.pdf
Developpement web dynamique_Base de donnees.pdfDeveloppement web dynamique_Base de donnees.pdf
Developpement web dynamique_Base de donnees.pdf
 
Angular 11
Angular 11Angular 11
Angular 11
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJS
 
22462A_01.pptx
22462A_01.pptx22462A_01.pptx
22462A_01.pptx
 
Meetup laravel
Meetup laravelMeetup laravel
Meetup laravel
 
Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"
 
4D Summit Europe 2016 - Conférence d'A&C Consulting : "Stocker des données su...
4D Summit Europe 2016 - Conférence d'A&C Consulting : "Stocker des données su...4D Summit Europe 2016 - Conférence d'A&C Consulting : "Stocker des données su...
4D Summit Europe 2016 - Conférence d'A&C Consulting : "Stocker des données su...
 
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
 

Plus de Fatima Zahra Fagroud

Introduction générale au Framework Flutter
Introduction générale au Framework FlutterIntroduction générale au Framework Flutter
Introduction générale au Framework FlutterFatima Zahra Fagroud
 
Cours Algorithmique (Echange de valeurs, Expressions, structure de choix et s...
Cours Algorithmique (Echange de valeurs, Expressions, structure de choix et s...Cours Algorithmique (Echange de valeurs, Expressions, structure de choix et s...
Cours Algorithmique (Echange de valeurs, Expressions, structure de choix et s...Fatima Zahra Fagroud
 
Cours Algorithmique : Tableaux (Déclaration , Saisie, Affichage et Tri )
Cours Algorithmique : Tableaux (Déclaration , Saisie, Affichage et Tri )Cours Algorithmique : Tableaux (Déclaration , Saisie, Affichage et Tri )
Cours Algorithmique : Tableaux (Déclaration , Saisie, Affichage et Tri )Fatima Zahra Fagroud
 
Ateliers de base en Arduino (Carte Arduino Uno, Capteurs, Actionneurs))
Ateliers de base en Arduino (Carte Arduino Uno, Capteurs, Actionneurs))Ateliers de base en Arduino (Carte Arduino Uno, Capteurs, Actionneurs))
Ateliers de base en Arduino (Carte Arduino Uno, Capteurs, Actionneurs))Fatima Zahra Fagroud
 
Ateliers protypage d objets connectes via arduino
Ateliers protypage d objets connectes via arduinoAteliers protypage d objets connectes via arduino
Ateliers protypage d objets connectes via arduinoFatima Zahra Fagroud
 
Etude comparative des fournisseurs de service BI
Etude comparative des fournisseurs de service BIEtude comparative des fournisseurs de service BI
Etude comparative des fournisseurs de service BIFatima Zahra Fagroud
 
Récupération d’une Base De Données & Flashback Database
Récupération d’une Base De Données  & Flashback DatabaseRécupération d’une Base De Données  & Flashback Database
Récupération d’une Base De Données & Flashback DatabaseFatima Zahra Fagroud
 
Cycle de vie et méthodes de construction des ontologies
Cycle de vie et méthodes de construction des ontologiesCycle de vie et méthodes de construction des ontologies
Cycle de vie et méthodes de construction des ontologiesFatima Zahra Fagroud
 

Plus de Fatima Zahra Fagroud (20)

Introduction générale au Framework Flutter
Introduction générale au Framework FlutterIntroduction générale au Framework Flutter
Introduction générale au Framework Flutter
 
Cours Algorithmique (Echange de valeurs, Expressions, structure de choix et s...
Cours Algorithmique (Echange de valeurs, Expressions, structure de choix et s...Cours Algorithmique (Echange de valeurs, Expressions, structure de choix et s...
Cours Algorithmique (Echange de valeurs, Expressions, structure de choix et s...
 
Cours Algorithmique : Tableaux (Déclaration , Saisie, Affichage et Tri )
Cours Algorithmique : Tableaux (Déclaration , Saisie, Affichage et Tri )Cours Algorithmique : Tableaux (Déclaration , Saisie, Affichage et Tri )
Cours Algorithmique : Tableaux (Déclaration , Saisie, Affichage et Tri )
 
Ateliers de base en Arduino (Carte Arduino Uno, Capteurs, Actionneurs))
Ateliers de base en Arduino (Carte Arduino Uno, Capteurs, Actionneurs))Ateliers de base en Arduino (Carte Arduino Uno, Capteurs, Actionneurs))
Ateliers de base en Arduino (Carte Arduino Uno, Capteurs, Actionneurs))
 
Algorithmique
AlgorithmiqueAlgorithmique
Algorithmique
 
Ateliers protypage d objets connectes via arduino
Ateliers protypage d objets connectes via arduinoAteliers protypage d objets connectes via arduino
Ateliers protypage d objets connectes via arduino
 
Feu tricolore tuto
Feu tricolore tutoFeu tricolore tuto
Feu tricolore tuto
 
Etude comparative des fournisseurs de service BI
Etude comparative des fournisseurs de service BIEtude comparative des fournisseurs de service BI
Etude comparative des fournisseurs de service BI
 
Récupération d’une Base De Données & Flashback Database
Récupération d’une Base De Données  & Flashback DatabaseRécupération d’une Base De Données  & Flashback Database
Récupération d’une Base De Données & Flashback Database
 
Rapid miner
Rapid miner Rapid miner
Rapid miner
 
Ibm bigsheets
Ibm bigsheetsIbm bigsheets
Ibm bigsheets
 
Cycle de vie et méthodes de construction des ontologies
Cycle de vie et méthodes de construction des ontologiesCycle de vie et méthodes de construction des ontologies
Cycle de vie et méthodes de construction des ontologies
 
Processus d’indexation
Processus d’indexationProcessus d’indexation
Processus d’indexation
 
Spring social
Spring socialSpring social
Spring social
 
Rapport TP Corrélation
Rapport TP CorrélationRapport TP Corrélation
Rapport TP Corrélation
 
Ionic
Ionic Ionic
Ionic
 
Ibm bluemix
Ibm bluemixIbm bluemix
Ibm bluemix
 
ATL et SVG
ATL et SVGATL et SVG
ATL et SVG
 
Rapport Projet Module Complexité
Rapport Projet Module ComplexitéRapport Projet Module Complexité
Rapport Projet Module Complexité
 
Rapport pfe licence
Rapport pfe licenceRapport pfe licence
Rapport pfe licence
 

Angular

  • 2. Introduction • Framework JavaScript basé sur l’architecture MVC • Model: objets JavaScript contenant les données • View: pages HTML accédant aux modèles exposés • Controller: fonctions JavaScript qui exposent le modèle à travers l’objet $scope et des méthodes utilitaires • Version: • Angularjs • Angular 2 • Angular 4 • Angular 5
  • 3. Expression et $scope • Expression: • Dynamique et le Framework qui la gère • {{ expression }} • $scope: • Représente le modèle de l’application • Peut être utilisé pour initialiser des valeurs de l’application ou récupérer les champs modifiés par l’utilisateur • Les valeurs peuvent être obtenue : un fichier json, un serveur, une vue, services
  • 4. Controllers • Chargé d’initialiser les valeurs et contient les différentes fonctions à appeler • Nous permet de gérer la vue • Créer un Controller dans un autre signifie que le $scope du controller fils hérite du Controller parent • Controller as : au lieu de $scope on met un objet
  • 5. Filtres • Permet de filtrer ou réordonner une collection • Syntaxe: {{expression | filtre}} • Il existe un ensemble de filtre disponibles • Exemple: uppercase, lowercase • Filtre dynamique: {{expression | filtre:param}} • on peut créer nos propres filtres
  • 6. Modules • Chaque module déclare quelles dépendances il utilise • Il est souhaitable d’utiliser plusieurs modules dans l’application • Déclaration: angular.module(‘nom’,[]) • Exemple de module externes: • ngRessource : pour interagir avec un serveur rest • ngAnimate : pour animation
  • 7. Services • Fonctions ou objets avec un seul but bien précis • Nom d’un service commence par $ • Si on change le nom du service rien ne fonctionne • $http: • permet de communiquer avec un serveur • Méthodes: get, post, put, delete, head, jsonp • Attributs: data, status, headers, config • On peut créer nos propre services
  • 8. Routes • Permet de naviguer dans les pages de l’application • $routeProvider: permet d’enregistrer les routes de notre application • ngView: Pour savoir quelle partie de la page doit être remplacée par le template • Exemple: $routeProvider .when('/races', { templateUrl: 'races.html', controller: RacesCtrl }) .when('/races/:raceId', { templateUrl: 'race.html', controller: RaceCtrl })
  • 9. Directives • Une directive est un comportement ou un composant réutilisable dans une application • Types: • les directives du framework • les directives de templating (dont des tags HTML enrichis) • les directives de style • les directives de binding • les directives d’action
  • 10. Composant • Chaque élément de l’application peut être un component • Un component contient généralement 3 fichiers: • component.html: vue • component.css : code css • component.ts : code type script • On affiche un component web a l’aide de la balise <app-root> • On le génére : ng generate component nom