03 - Programmation Web-AngularJS_ Bases

7/25/2019 03 - Programmation Web-AngularJS_ Bases

1/32

1

M. ETTIFOURI El Hassane SUPMTI 2015/2016


2/32

Les bases dAngularJS

2


3/32

Introduction

AngularJS est n en 2009 dans les locaux de

Google. Angular est construit autour des concepts cls

suivants:

o Architecture MVVM (Modle-Vue-Vue-Modle)o Two-way data binding

o Injection de Dpendances

o Manipulation du DOM au moyen de directiveso SPA (Single Page Application)


4/32

Introduction Prcision prliminaire pour les dveloppeurs

JavaScript "old school": avec Angular, il n'y a, engnral, pas de manipulation directe du DOM.

Avec jQuery, Prototype et autres librairies JavaScript,on doit presque toujours slectionner un lment (via

pour pouvo r u ser. Avec AngularJS on peut ajouter, supprimer et modifier

la page HTML sans faire aucun appel au DOM: plusbesoin de $(), getElementByID(), ...

Note: les accros jQuery ont toutefois accs, depuisAngular, jQLite (un jQuery Lite) mais c'est souventdconseill.


5/32

SPA: Single Page Application


6/32

SPA: Single Page Application AngularJS permet de dvelopper des

applications Web de type SPA.

Une SPA (Single Page Application) estune application web accessible via une

w u u . Le but est dviter le chargement dune

nouvelle page chaque action demande

et d'amliorer ainsi lexprience utilisateur(meilleure fluidit).


7/32

SPA: Single Page Application

La diffrence entre une SPA et un site webclassique rside dans leur structure et dans larelation qu'ils tablissent entre le navigateur et leserveur:

Une SPA est donc compose dune seule page. Lerle du browser (front-end) est beaucoup plus

important : toute la logique applicative y est dporte.

Le serveur (back-end) est "seulement" responsablede la fourniture des ressources lapplication etsurtout de l'exposition des donnes.


8/32

Pourquoi le SPA ? Les frameworks JS comme AngularJS et

EmberJS participent la popularit des SPA.

Les SPA s'appuyant sur de tels frameworks onten gnral comme avantage d'tre:

fonctionnellement)

o fluides (pas de rechargement durl etc)

o bien organiseso maintenables et volutives

o ...


9/32

SPA: les piges viter Nanmoins il y a plusieurs points prendre en

compte lorsquon ralise une SPA pour viter

des problmes potentiels:1. La taille du DOM (trop gros il peut ralentir fortement le browser).

2. Les traitements (trop lourds il peuvent ralentir le browser).

'. rduite possible).

Solutions:1. Essayer de ne charger que les lments ncessaires

lutilisateur du site et dcharger les autres.

2. Ecrire et tester correctement son code.

3. Utiliser une solution base sur un "virtual DOM" (React.JS estun framework JavaScript pionnier en la matire).


10/32

SPA: les piges viter Autre sujet qui peut tre un problme avec les SPA: le

rfrencement (problmatique du "SEO" - SearchEngine Optimization).

Les moteurs de recherche ont du mal "crawler dessites dynamiquement grs par du JavaScript.

Des solutions existent pour fournir spcifiquement Google une version correspondante aux"snapshots HTML gnrs par les applications SPA.

Ces solutions sont accessibles soit en mode SAAS

(payantes et hberges) soit en mode Open- Source hberger soi-mme.


11/32

Two-way data binding Une des fonctionnalits phares dAngularJs est

letwo-way data binding qui permet de notifiertous les lments qui font rfrence unevariable, de son changement.

Ainsi sans coder explicitement du Java cript,on peut mettre jour en temps rel un titre quifait rfrence un champ texte.

Exemple :


12/32

Premier pas avec (TP 1)

Crer une page web simple (index.html)

affichant les lments suivants : Un titre (H1) : Premier pas avec AngularJs

Un formulaire ayant :

Texte Saisir votre nom suivi dune zone desaisi de texte nom

Texte Saisir votre ville suivi dune zone desaisi de texte ville

Un texte dynamique : Bonjour $nom, votreville est $ville , avec $nom et $ville sont lesvaleur saisies


13/32

Premier pas avec(TP)

Les tapes suivre :

1. Rfrencer la librairie JS :

2. Ajouter un qui regroupetous les lments de la page.

3. Utiliser le ng-model pour les variables des

champs du formulaire4. Utiliser les {{ et }} pour afficher le

contenu des variables du ng-model.


14/32

Premier pas avec (TP 2)

Crer une page web simple (index.html)

permettant deffectuer la somme de deuxentiers saisis dans un formulaire et afficher lersultat dans la mme page :

de saisi de texte valA Texte Saisir la valeur de B suivi dune zone

de saisi de texte valB

La somme de valA et valB = valA + valB


15/32

Vues

Utilisation des attributs ng (directives) sur leselements HTML

ng-app Dtermine quelle partie de la page va utiliser angularjs

Si il contient une valeur, il va charger le module d'application

ng-controller Dtermine quel contrleur Javascript doit tre utilis pour la

partie de la page

ng-model Dtermine quel modle d'un champ de saisie sera li la valeur Utilis pour la liaison bidirectionnelle (Used for two-way binding)

15


16/32

Contrleurs et Data Binding

Data Binding : les vues sont automatiquement modifies lors dunchangement du modle par un contrleur.

Les contrleurs sont attachs aux lments du DOM et font voluer lemodle en fonction des actions de lutilisateurs ou dvnements.

< -- ... -->

Copier{{dst}}

16


17/32

Contrleurs et Data Binding

Data Binding : les vues sont automatiquement modifies lorsdun

changement du modle par un contrleur. Les contrleurs sont attachs aux lments du DOM et font

voluerle modle en fonction des actions de lutilisateurs ou dvnements.

functionMyCtrl($scope) {$scope.copy = function() {

$scope.dst = $scope.src;}

}La variable $scope rfrence un objet qui correspond la partie dumodle attache llment du DOM contrle.

17


18/32

Scopes et RootScope

La variable $RootScope contient lintgralit du modle alors que lavariable $scope contient uniquement la partie du modle attache

llment du DOM :

- " "

{{dst}}

______________________________________

functionMyCtrl($scope, $rootScope) {$scope.copy = function() { $rootScope.dst = $scope.src; }}

18


19/32

Scopes et RootScope

Porte des scopes :

{{ dst }}{{ dst }}

_______________________________functionMyCtrl($scope, $rootScope) {$rootScope.dst = "rootScope";$scope.dst = "scope";

}Chaque contrleur peut donc avoir une partie du modle comme

contexte.

19


20/32

Template ng-repeat

add{{ e }}

______________________________functionListCtrl($scope) {$scope.items = [];$scope.add = function() {

$scope.items.push($scope.item);}}

20


21/32

Template visibilit

Il est possible de masquer ou dafficher certainslments :

coch

non coc < span>

data==totodata==truc

data!=toto and data!=truc

21


22/32

Template style

Il est possible de modifier la classe et le style des lments :

RougeNoirzadza

_______________________________Rouge

Noirzadza

22


23/32

Template formulaire

Envoyer

Ncessaire

3 6 lettres miniscules

23


24/32

Template vnements

click

downupenterleave

over

___________________________

functionMyCtrl($scope) {$scope.onEvent = function(s) { console.log(s); }}

24


25/32

Template les liens et les images

< o y>

______________________________functionMyCtrl($scope) {$scope.items = [

{img : "a.jpg", rimg : "ra.jpg" },

{img : "b.jpg", rimg : "rb.jpg" }];}

25


26/32

Template utilisation des filtres

add{{ e }}

________________________________functionListCtrl($scope) {

$scope.items = [];$scope.add = function() {$scope.items.push($scope.item);

}}

26


27/32

TP 3

Crer un fichier indexTP3.html et un ficheir

app.js pour tester exemples offerts dans lesslides prcdents pour valider lesfonctionnalits offertes par AngularJs :

parer es mos par es t tres exp quant afonctionnalit teste (utiliser la balise H1 ).

Le fichier app.js doit contenir les contrleurs etles traitements des diffrentes dmonstrations.

Noublier pas dimporter les fichiers JSdAngularJS ainsi le app.js dans la pageindexTP3.hml

27


28/32

TP 4 (Gestions des emails)

Crer une application (GestEmail)permettant la ralisation des oprationssuivantes CRUD : crations des emails via un formulaire,

messages derreur. Sil y a des emails crs, les affichage dans un

tableau; sinon, afficher le message aucunemail ni trouv ,

modifications dun email donn. Suppressions dun email donn.

28


29/32

Les modules

La faon de construire lapplication est spcifie par desmodules.

Dans les modules, on spcifie ce qui est partag danslapplication. Un module peut dpendre dautres modules. La lication a un module rinci al.

Dans le code HTML :

Ct JavaScript :var myApp= angular.module('myApp', [ ]);

29


30/32

Les modules

Un exemple avec la dfinition dun nouveau contrleur :

var myApp= angular.module('myApp', [ ]);myApp.controller('MyCtrl', function MyCtrl($scope) {

$scope.copy = function() {$scope.dst = $scope.src;}

});

Utilisation du filtre ct HTML :< oc ype m >

Copier{{dst}}

30


31/32

Les modules

Trois sortes dlments peuvent tre dfinis dans un module : Un service (un objet partageable); Une directive (nouvel lment ct HTML); Un filtre (voir le transparent prcdent).

var myAppService= angular.module('myApp.service', []); var myAppDirective= angular.module('myApp.directive',

[]);

var myAppFilter= angular.module('myApp.filter', []); var myApp= angular.module('myApp', ['myApp.service','myApp.directive', 'myApp.filter']);

31


32/32

Les modules

Il est possible dexcuter du code au lancement de lapplication :var myApp= angular.module('myApp', []);

myApp.run(function($rootScope) {$rootScope.message = "Mon message";});

___________________________< >

{{ message }}

32

Documents

03 - Programmation Web-AngularJS_ Bases