Introduction à AngularJs

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 va vous plaîre.
Radhouene Rouached
https://www.linkedin.com/in/radrouached
Plan :
* Introduction
* Architecture
* Démonstration
* Notions AngularJS
* Directives
* Services
* Routage
* Avantages & Limites
* Outils utiles
* Documentation

Transcript

1. Introduction à AngularJS RADHOUENE ROUACHED
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. 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. 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. Démonstration 5
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. 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. Directives >> 8
9. Directives Créez votre propre directive :  Restrict: • ‘E’ = Element • ‘A’ = Attribute • ‘C’ = Class • ‘M’ = Comment 9
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. 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. 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. 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. 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. Outils utiles IDE (notepad++, sublime text, netbeans…) NG Inspector Batarang 15
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. Merci pour votre attention /in/radrouached /radhouenerouached @__G_T_O__ 17