Introduction AngularJSRADHOUENE ROUACHED

PlanI. Introduction

II. Architecture

III. Dmonstration

IV. Notions AngularJS

V. Directives

VI. Services

VII. Routage

VIII. Avantages & inconvnients

IX. Outils utiles

X. Bibliographie & Ntographie

2

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

3

ArchitecturePour 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 Whateverdsigne whatever works for you.

4

Dmonstration

5

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 duTemplate 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 accessibledepuis la vue. Chaque application a un seul rootScope. Tous les autres sont des scopes descendant durootScope.

Le Service: Cest lunit de base qui regroupe une mme logique. Un service Angular est un objetsingleton cr par une usine(factory) de service. Ces factories de services sont des fonctions qui, leurtour, sont crs par un fournisseur(provider) de services.

6

DirectivesLes directives permet dtendre les capacits du langage HTML. Il existe 4 types de directives:

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

>>

Elment, Attribut, Class, Commentaire

7

Directives

>>8

DirectivesCrez votre propre directive :

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

9

ServicesLes 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

ServicesCrez votre propre service

Factory: Service: Provider:

Un Provider fournit laconfiguration du module l'chelle de votre objet deservice avant de le rendredisponible.

Un service est une constructeurqui cre l'objet en utilisant unnouveau paramtre. Vous pouvezajouter des proprits et desfonctions un service.

Un Factory prsente unefonction simple qui vous permetd'ajouter une certaine logiqueavant la cration d'un objet. Elleretourne l'objet cr.

11

RoutingAngularJS Routes permet d'implmenter plusieurs vues SPA [Single page Applications]. Chaque vue serait charg dynamiquement la suite de l'action de l'utilisateur.

12

RoutingngRoute: 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

La sparation des proccupations

fonctionne en mode dconnect

Le code Angular est testable (unit)

Composant rutilisable

Fournir la liaison de donnes (data-binding)aux pages HTML

Hritage Prototypal

Non dgradable (Si l'utilisateur dsactive

JavaScript, rien ne serait visible)

Non Scuris (Server side authentication and

authorization)

14

Outils utiles

IDE (notepad++, sublime text, netbeans)

NG Inspector

Batarang

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