introduction au framework angularjs

Introduction à AngularJSRADHOUENE ROUACHED

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

IntroductionAngularJS 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

ArchitecturePour 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 Whateverdésigne « whatever works for you».

4

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

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

◦ Le Service: C’est l’unité de base qui regroupe une même logique. Un service Angular est un objetsingleton créé par une usine(factory) de service. Ces factories de services sont des fonctions qui, à leurtour, sont créés par un fournisseur(provider) de services.

6

DirectivesLes 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

>>8

DirectivesCréez votre propre directive :

Restrict: • ‘E’ = Element• ‘A’ = Attribute• ‘C’ = Class• ‘M’ = Comment

9

ServicesLes 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

ServicesCréez 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 crée l'objet en utilisant unnouveau paramètre. Vous pouvezajouter des propriétés et desfonctions à un service.

Un Factory présente unefonction simple qui vous permetd'ajouter une certaine logiqueavant la création d'un objet. Elleretourne l'objet créé.

11

RoutingAngularJS 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

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