Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 09:42, 30 Mar 2016 par EdouardAmosse
0

Introduction à Angular JS

De $1

Version de 21:19, 6 Jun 2025

cette version.

Revenir à liste des archives.

Voir la version actuelle

Résumé

Dans cette séaance, nous vous introduisons à la librairie Angular JS.  Angular JS est une librairie JavaScript qui permet de gérer des applications dynamiques côté client. Il permet détendre les composantes HTML de facon à construire des applications plus fluide.  Ceci n'est pas un cours à proprement parler mais une aide qui vous permettra de démarrer avec Angular JS. Nous allons faire ensemble un ensemble d'exercice ce qui vous permettra de voir dans la pratique comment fonctionne Angular et ce qu'il permet de faire. 

Référencer Angular 

 AngularJS est avant tout du JS, pour l'introduire dans une page il suffit d'utiliser une balise  "script".

view plainprint?
  1. En ligne        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>  
  2.   
  3. Ou en local   
  4.   
  5. <script src="js/libs/angular.min.js"></script>  

Activer Angular sur une page 

L'attribut ng-app permet d'activer Angular sur les éléments contenus dans la balise ou il est déclaré.  Cet attribut sert uniquement à indiquer à angular qu'il peut etre appelé à gérer des élements se trouvant dans la region ou il est déclaré. Il est possible d'associer une valeur à cette propriété auquel cas on indique à angular le nom du module qui definit le comportement de la page (on reviendra la dessus plus loin). 

Exemple 1.  Dans l'exemple suivant Angular a été activé sur toute la page (vu qu'il est déclaré dans la balise html) 

view plainprint?
  1. <html ng-app>  
 
Exemple 2: Dans l'exemple qui suit, Angular est activé que sur les élements compris entre les balises <body> et </body>.  
 
view plainprint?
  1. <body ng-app>  

ng-model 

La propriété ng-model permet de lier (connecter) les éléments de la vue aux models gérés par Angular (on abordera les models un peu plus loin). 

Dans l'exemple suivant, la propriété ng-model est utilisé pour lier la valeur de l'élément input à la propriété num1 du modèle. 

view plainprint?
  1. <input type="number" ng-model="num1" placeholder="Enter a number">  
 
Data-Binding
Angular utilise la notation pour faire du data-binding. Entre les deux accolades peut se trouver une propriété du modèle, une fonction, une expression... 
 
view plainprint?
  1. <h1>Vous avez entré: {{number1}}, est-ce votre ultime bafouille?</h1>  
  2.   
  3. <h1>Vous avez commandé: {{number1}} iPhones, mais comme nous sommes sympas chez Apple nous ne vous avons livré que <b>{{number1-2}}</b></h1>  

 Exercice 1 

Récupérez la page HTML se trouvant ici et changez l'extension en .html,

  • Modifiez le pour y ajouter un additionneur: 
    • Créez un second input 
    • Afficher dans un div le resulat de l'addition en respectant le format suivant "La somme de number1 et de number2 est somme" 

 Les Controlleurs

La notion de controlleur en Angular est ce qui permet de gérer le comportement des éléments dans une vue. L'utilisation d'un controlleur permet à un développeur de suivre les modifications effectuées sur les éléments du DOM sans s'abonner explicitement aux evenements comme "onchange" par exemple.  Un controlleur est un objet Javascript dans lequel le developpeur peut définir le comportement de la vue associé à ce controlleur. 

Définir un controlleur 

Il est préférable d'utiliser un fichier javascript par controlleur!

view plainprint?
  1. //Créer/Récupérer un module   
  2. angular.module('myCalculatorApp', [])  
  3. //Créer un controlleur   
  4. .controller('CalculatorController', function() {  
  5. //Définir la logique de l'application ici   
  6. var calculator = this;   
  7.   
  8. });  

Le controlleur est l'endroit ou l'on définit le comportement de l'application.  Dans l'exercie précédent nous n'avions pas eu de controlleur, donc Angular nous a associé un controlleur par défaut (géré par augular), on a pa strop la main dessus.  Nous allons reprendre la main en definissant notre propre controlleur et indiquer à Angular que c'est nous qui allons gérer le comportement de notre vue. 

Associer une page à un controlleur 

Angular définit la balise ng-controller qui permet d'associer un controlleur à une vue, la valeur de cette propriété correspond au nom du controlleur (sur cette exemple CalculatorController) il est possible de renommer la variable en utilisant le mot clef as (CalculatorController as calculator). Etant donné qu'un controlleur se trouve dans un module, donc il faut indiquer à Angular le nom du module en associant une valeur à la propriété ng-app. 

view plainprint?
  1. <!doctype html>  
  2. <html ng-app="myCalculatorApp">  
  3.   <head>  
  4.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>  
  5.     <script src="page.js"></script>  
  6.   </head>  
  7.   <body ng-controller="CalculatorController as calculator">  
  8. <!-- --!>  
  9. </body>  
  10. </html>  

Définir des modèles dans un controlleur.

Un controlleur comme dans le pattern MVC est destiné à gérer des modèles.  En Angular il est aussi possible de définir des modèles, qui peuvent etre des objets simples (number1, number2) ou des objets complexes ({number1:0, number2:0}). 

view plainprint?
  1. //Créer/Récupérer un module   
  2. angular.module('myCalculatorApp', [])  
  3. //Créer un controlleur   
  4. .controller('CalculatorController', function() {  
  5. //Définir la logique de l'application ici   
  6. var calculator = this;   
  7. calculator.operation = { number1: 0,  number2: 0, };  
  8. });  

Définir des comportements dans un controlleur

Les comportements sont définis via des fonctions dans les controlleurs (comme en JS).  

view plainprint?
  1. //Créer/Récupérer un module   
  2. angular.module('myCalculatorApp', [])  
  3. //Créer un controlleur   
  4. .controller('CalculatorController', function() {  
  5. //Définir la logique de l'application ici   
  6. var calculator = this;   
  7. calculator.operation = {  
  8. number1: 0,   
  9. number2: 0,  
  10. };  
  11. calculator.result = function(op){   op = op || calculator.operation;    return op.number1 + op.number2; };  
  12. });  

Gestion des événements 

Anglular permet aussi de s'abonner aux événements des éléments du DOM. Les événements sont interceptés par angular et mappé à des fonctions du controller. Voyons l'eévénement click, la propriété angular correspondant est ng-click, qui permet d'appeler une fonction du controlleur quand l'action click d'un élément est déclenché. 

view plainprint?
  1. //Créer/Récupérer un module   
  2. angular.module('myCalculatorApp', [])  
  3. //Créer un controlleur   
  4. .controller('CalculatorController', function() {  
  5. //Définir la logique de l'application ici   
  6. var calculator = this;   
  7. calculator.data = [];  
  8. calculator.operation = {  
  9. number1: 0,   
  10. number2: 0,  
  11. };  
  12. calculator.result = function(op){  
  13.   op = op || calculator.operation;  
  14.    return op.number1 + op.number2;  
  15. };  
  16. calculator.save = function(){ //On enregistre la dernière opération dans une liste calculator.data.push(calculator.operation);  });  

L'association entre l'événement d'un élément du DOM et un méthode du controlleur se fait via la propriété ng-click 

view plainprint?
  1. <input type="button" ng-click="calculator.save()"  value="Save" />  

Il est aussi possible de passer des paramètres à la fonction qui répond à un événement du dom

view plainprint?
  1. //Créer/Récupérer un module   
  2. angular.module('myCalculatorApp', [])  
  3. //Créer un controlleur   
  4. .controller('CalculatorController', function() {  
  5. //Définir la logique de l'application ici   
  6. var calculator = this;   
  7. calculator.data = [];  
  8. calculator.operation = {  
  9. number1: 0,   
  10. number2: 0,  
  11. };  
  12. calculator.result = function(op) {   op = op || calculator.operation;    switch (op.type){      case 1:       return op.number1 + op.number2;      default:       return op.number1 - op.number2;    } };    calculator.save = function(type){    calculator.operation.type = type;     calculator.operation.result = result();    calculator.data.push(calculator.operation);  }});  

 

 

 
Powered by MindTouch Deki Open Source Edition v.8.08