Introduction au Framework AngularJs

Introduction à AngularJS
RADHOUENE ROUACHED

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

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

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

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

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

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) 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

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

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

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

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

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.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

Merci pour votre
attention
/in/radrouached /radhouenerouached @__G_T_O__
17

Introduction au Framework AngularJs

Contenu connexe

Tendances (20)

En vedette (20)

Similaire à Introduction au Framework AngularJs (20)

Dernier (8)

Introduction au Framework AngularJs

Notes de l'éditeur