Introduction AngularJS

RADHOUENE ROUACHED

Plan
I.

Introduction

II.

Architecture

III.

Dmonstration

IV.

Notions AngularJS

V.

Directives

VI.

Services

VII. Routage
VIII. Avantages & inconvnients
IX.

Outils utiles

X.

Bibliographie & Ntographie

Introduction
AngularJS est un Framework JavaScript open source dvelopp par Google en 2009 sous la
licence MIT.
Il assure le cration des applications web dynamiques de type SPA (Single Page Application),
permettant ainsi dvelopper ses propres balises et attributs HTML.
AngularJS est utilis dans les sites Web de:

Et encore plus.

Architecture
Pour plusieurs annes AngularJS tait proche du MVC, mais au fil du temps et grce l'amliorations de
l'API, il supporte MVW. Ce pattern est un driv du clbre modle de conception MVC dont Whatever
dsigne whatever works for you.

Dmonstration

Notions AngularJS
Le model : C'est un jeu de donnes permettant l'interaction de la page HTML et code JavaScript. Il est
dfinit par les attributs ng-model des lments du Template HTML.
Le Controller: contrle les donnes des applications angularJS. Il sagit du contrle des vnement du
Template HTML.
Le Module: peut tre considrer comme un conteneur pour les diffrentes parties d'une applications,
Controller, services, filtres, directives, etc.
Le Scope: Il s'agit du contexte incluant contrleurs, 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: Cest lunit de base qui regroupe une mme 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 crs par un fournisseur(provider) de services.

Directives
Les directives permet dtendre les capacits du langage HTML. Il existe 4 types de directives:
Elment, Attribut, Class, Commentaire
Directives

Fonction

ng-app

Dfinir llment racine dune application AngularJS.

ng-init

Affecter une valeur initiale a une application AngularJS.

ng-model

Attacher une valeur de formulaire aux donnes de lapplication. Produire ainsi

type de validation, statut et les classes CSS aux donnes.

ng-repeat

Parcourir une collection et cloner chaque lment HTML a un article.

ng-controller

Affecter un contrleur a une vue.

ng-click

Spcifier un comportement particulier quand lment est cliqu.

ng-view

Inclure le Template rendu de la route actuelle a la page principale.

https://docs.angularjs.org/guide/directive
7

>>

Directives

>>

Directives
Crez votre propre directive :

Restrict:
E = Element
A = Attribute
C = Class
M = Comment

Services
Les services sont des objets substituables qui sont lis ensemble en utilisant l'injection de
dpendance (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 dpend.
Singletons : Chaque composant dpend d'un service obtient une rfrence l'instance unique gnr
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 porte de la racine. Scopes permet une sparation entre le modle et la vue, par
l'intermdiaire d'un mcanisme pour observer le modle de modifications.

$http

permet de faire une demande au serveur, et de grer votre application la rponse.

$timeout

Il sagit dangular version de la function window.setTimeout()

10

>>

Services
Crez votre propre service
Factory:

Service:

Provider:

Un Factory prsente une

fonction simple qui vous permet
d'ajouter une certaine logique
avant la cration d'un objet. Elle
retourne l'objet cr.

Un service est une constructeur

qui cre l'objet en utilisant un
nouveau paramtre. Vous pouvez
ajouter des proprits et des
fonctions un service.

Un Provider fournit la
configuration du module
l'chelle de votre objet de
service avant de le rendre
disponible.

11

Routing
AngularJS Routes permet d'implmenter 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 contrleurs et les vues. Il surveille $location.url()
et tente de mapper le chemin une dfinition de la route existante.
$routeParams: permet de rcuprer l'ensemble des paramtres lutilisation a choisi.
ngView: est la directive qui permet d'inclure le modle rendu de la route actuelle dans la page
principale

13

Avantages & Limites

Utilisation dinjection de dpendances

Hritage Prototypal

La sparation des proccupations

Non dgradable (Si l'utilisateur dsactive

fonctionne en mode dconnect

Le code Angular est testable (unit)
Composant rutilisable

JavaScript, rien ne serait visible)

Non Scuris (Server side authentication and

authorization)

Fournir la liaison de donnes (data-binding)

aux pages HTML

14

Outils utiles
IDE (notepad++, sublime text, netbeans)

Batarang

NG Inspector

15

Bibliographie & Ntographie

(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