03 - programmation web-angularjs_ bases
Post on 25-Feb-2018
221 Views
Preview:
TRANSCRIPT
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
1/32
1
M. ETTIFOURI El Hassane SUPMTI 2015/2016
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
2/32
Les bases dAngularJS
2
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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)
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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.
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
5/32
SPA: Single Page Application
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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/25/2019 03 - Programmation Web-AngularJS_ Bases
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.
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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 ...
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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).
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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.
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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 :
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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.
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
20/32
Template ng-repeat
add{{ e }}
______________________________functionListCtrl($scope) {$scope.items = [];$scope.add = function() {
$scope.items.push($scope.item);}}
20
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
22/32
Template style
Il est possible de modifier la classe et le style des lments :
RougeNoirzadza
_______________________________Rouge
Noirzadza
22
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
23/32
Template formulaire
Envoyer
Ncessaire
3 6 lettres miniscules
23
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
24/32
Template vnements
click
downupenterleave
over
___________________________
functionMyCtrl($scope) {$scope.onEvent = function(s) { console.log(s); }}
24
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
26/32
Template utilisation des filtres
add{{ e }}
________________________________functionListCtrl($scope) {
$scope.items = [];$scope.add = function() {$scope.items.push($scope.item);
}}
26
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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
-
7/25/2019 03 - Programmation Web-AngularJS_ Bases
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
top related