Introduction à AngularJS
RADHOUENE ROUACHED
Plan
I. Introduction
II. Architecture
III. Démonstration
IV. Notions AngularJS
V. Directives
VI. Services
VII. Routage
VII...
Introduction
AngularJS est un Framework JavaScript open source développé par Google en 2009 sous la
licence MIT.
Il assure...
Architecture
Pour plusieurs années AngularJS était proche du MVC, mais au fil du temps et grâce à l'améliorations de
l'API...
Démonstration
5
Notions AngularJS
◦ Le model : C'est un jeu de données permettant l'interaction de la page HTML et code JavaScript. Il est...
Directives
Les directives permet d’étendre les capacités du langage HTML. Il existe 4 types de directives:
Directives Fonc...
Directives
>>8
Directives
Créez votre propre directive :
 Restrict:
• ‘E’ = Element
• ‘A’ = Attribute
• ‘C’ = Class
• ‘M’ = Comment
9
Services
Les services sont des objets substituables qui sont liés ensemble en utilisant l'injection de
dépendance (DI) dan...
Services
Créez votre propre service
Factory: Service: Provider:
Un Provider fournit la
configuration du module à
l'échelle...
Routing
AngularJS Routes permet d'implémenter plusieurs vues SPA [Single page Applications]. Chaque
vue serait chargé dyna...
Routing
ngRoute: module fournit des services et des directives de routage et de liaison profonde pour
les applications An...
Avantages & Limites
Utilisation d’injection de dépendances
La séparation des préoccupations
fonctionne en mode déconnec...
Outils utiles
IDE (notepad++, sublime text, netbeans…)
NG Inspector
Batarang
15
Bibliographie & Nétographie
(1) https://docs.angularjs.org/guide/
(2) http://www.w3schools.com/angular/
(3) https://www.ai...
Merci pour votre
attention
/in/radrouached /radhouenerouached @__G_T_O__
17
Prochain SlideShare
Chargement dans…5
×

Introduction au Framework AngularJs

743 vues

Publié le

Dans cette présentation, je vais mettre l'accent sur les fondamentaux du fameux Framework Javascript AngularJs. Ainsi partager avec vous, certaines de mes expériences avec AngularJs .Enfin j'espère que ça vous plaît.
Radhouene Rouached
https://www.linkedin.com/in/radrouached
Plan :
* Introduction
* Architecture
* Démonstration
* Notions AngularJS
* Directives
* Services
* Routage
* Avantages & Limites
* Outils utiles
* Documentation

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
743
Sur SlideShare
0
Issues des intégrations
0
Intégrations
47
Actions
Partages
0
Téléchargements
14
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Radhouene Rouached
  • Introduction au Framework AngularJs

    1. 1. Introduction à AngularJS RADHOUENE ROUACHED
    2. 2. Plan I. Introduction II. Architecture III. Démonstration IV. Notions AngularJS V. Directives VI. Services VII. Routage VIII. Avantages & inconvénients IX. Outils utiles X. Bibliographie & Nétographie 2
    3. 3. Introduction AngularJS est un Framework JavaScript open source développé par Google en 2009 sous la licence MIT. Il assure le création des applications web dynamiques de type SPA (Single Page Application), permettant ainsi développer ses propres balises et attributs HTML. AngularJS est utilisé dans les sites Web de: Et encore plus. 3
    4. 4. Architecture Pour plusieurs années AngularJS était proche du MVC, mais au fil du temps et grâce à l'améliorations de l'API, il supporte MVW. Ce pattern est un dérivé du célèbre modèle de conception MVC dont Whatever désigne « whatever works for you». 4
    5. 5. Démonstration 5
    6. 6. Notions AngularJS ◦ Le model : C'est un jeu de données permettant l'interaction de la page HTML et code JavaScript. Il est définit par les attributs ng-model des éléments du Template HTML. ◦ Le Controller: contrôle les données des applications angularJS. Il s’agit du contrôle des évènement du Template HTML. ◦ Le Module: peut être considérer comme un conteneur pour les différentes parties d'une applications, Controller, services, filtres, directives, etc. ◦ Le Scope: Il s'agit du contexte incluant contrôleurs, variables, module, services qui sont accessible depuis la vue. Chaque application a un seul rootScope. Tous les autres sont des scopes descendant du rootScope. ◦ Le Service: C’est l’unité de base qui regroupe une même logique. Un service Angular est un objet singleton créé par une usine(factory) de service. Ces factories de services sont des fonctions qui, à leur tour, sont créés par un fournisseur(provider) de services. 6
    7. 7. Directives Les directives permet d’étendre les capacités du langage HTML. Il existe 4 types de directives: Directives Fonction ng-app Définir l’élément racine d’une application AngularJS. ng-init Affecter une valeur initiale a une application AngularJS. ng-model Attacher une valeur de formulaire aux données de l’application. Produire ainsi type de validation, statut et les classes CSS aux données. ng-repeat Parcourir une collection et cloner chaque élément HTML a un article. ng-controller Affecter un contrôleur a une vue. ng-click Spécifier un comportement particulier quand élément est cliqué. ng-view Inclure le Template rendu de la route actuelle a la page principale. https://docs.angularjs.org/guide/directive >> Elément, Attribut, Class, Commentaire 7
    8. 8. Directives >>8
    9. 9. Directives Créez votre propre directive :  Restrict: • ‘E’ = Element • ‘A’ = Attribute • ‘C’ = Class • ‘M’ = Comment 9
    10. 10. Services Les services sont des objets substituables qui sont liés ensemble en utilisant l'injection de dépendance (DI) dans le but d'organiser et de partager le code dans application. Les services sont: ◦ Lazy: Angular seulement instancie un service quand un composant d'application dépend. ◦ Singletons : Chaque composant dépend d'un service obtient une référence à l'instance unique généré par l'usine(factory) de service. Les services natifs Services Fonction $scope Chaque application a une seule racine rootScope. Tous les autres scopes sont descendants de la portée de la racine. Scopes permet une séparation entre le modèle et la vue, par l'intermédiaire d'un mécanisme pour observer le modèle de modifications. $http permet de faire une demande au serveur, et de gérer votre application la réponse. $timeout Il s’agit d’angular version de la function window.setTimeout() >>10
    11. 11. Services Créez votre propre service Factory: Service: Provider: Un Provider fournit la configuration du module à l'échelle de votre objet de service avant de le rendre disponible. Un service est une constructeur qui crée l'objet en utilisant un nouveau paramètre. Vous pouvez ajouter des propriétés et des fonctions à un service. Un Factory présente une fonction simple qui vous permet d'ajouter une certaine logique avant la création d'un objet. Elle retourne l'objet créé. 11
    12. 12. Routing AngularJS Routes permet d'implémenter plusieurs vues SPA [Single page Applications]. Chaque vue serait chargé dynamiquement à la suite de l'action de l'utilisateur. 12
    13. 13. Routing ngRoute: module fournit des services et des directives de routage et de liaison profonde pour les applications AngularJS. $route: est utilisé pour faire la liaison entre les contrôleurs et les vues. Il surveille $location.url() et tente de mapper le chemin à une définition de la route existante. $routeParams: permet de récupérer l'ensemble des paramètres l’utilisation a choisi. ngView: est la directive qui permet d'inclure le modèle rendu de la route actuelle dans la page principale 13
    14. 14. Avantages & Limites Utilisation d’injection de dépendances La séparation des préoccupations fonctionne en mode déconnecté Le code Angular est testable (unit) Composant réutilisable Fournir la liaison de données (data-binding) aux pages HTML  Héritage Prototypal  Non dégradable (Si l'utilisateur désactive JavaScript, rien ne serait visible)  Non Sécurisé (Server side authentication and authorization) 14
    15. 15. Outils utiles IDE (notepad++, sublime text, netbeans…) NG Inspector Batarang 15
    16. 16. Bibliographie & Nétographie (1) https://docs.angularjs.org/guide/ (2) http://www.w3schools.com/angular/ (3) https://www.airpair.com/javascript/posts/services-in-angularjs-simplified-with-examples (4) http://cdsweb.u-strasbg.fr/~landais/presentations/INFUSION_angular.pdf (5) http://www.techaltair.com/5-best-javascript-ide-for-front-end-and-web-engineers/ (6) http://javascript.developpez.com/cours/outils-vraiment-utiles-pour-developpeurs-javascript/ 16
    17. 17. Merci pour votre attention /in/radrouached /radhouenerouached @__G_T_O__ 17

    ×