En ligne        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>

Ou en local 

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

<html ng-app>

Exemple 2: Dans l'exemple qui suit, Angular est activé que sur les élements compris entre les balises <body> et </body>.

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

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

<h1>Vous avez entré: {{number1}}, est-ce votre ultime bafouille?</h1>

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

//Créer/Récupérer un module 
angular.module('myCalculatorApp', [])
//Créer un controlleur 
.controller('CalculatorController', function() {
//Définir la logique de l'application ici 
var calculator = this; 

});

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.

<!doctype html>
<html ng-app="myCalculatorApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <script src="page.js"></script>
  </head>
  <body ng-controller="CalculatorController as calculator">
<!-- --!>
</body>
</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}).

//Créer/Récupérer un module 
angular.module('myCalculatorApp', [])
//Créer un controlleur 
.controller('CalculatorController', function() {
//Définir la logique de l'application ici 
var calculator = this; 
calculator.operation = { number1: 0,  number2: 0, };
});

Définir des comportements dans un controlleur

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

//Créer/Récupérer un module 
angular.module('myCalculatorApp', [])
//Créer un controlleur 
.controller('CalculatorController', function() {
//Définir la logique de l'application ici 
var calculator = this; 
calculator.operation = {
number1: 0, 
number2: 0,
};
calculator.result = function(op){   op = op || calculator.operation;    return op.number1 + op.number2; };
});

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

//Créer/Récupérer un module 
angular.module('myCalculatorApp', [])
//Créer un controlleur 
.controller('CalculatorController', function() {
//Définir la logique de l'application ici 
var calculator = this; 
calculator.data = [];
calculator.operation = {
number1: 0, 
number2: 0,
};
calculator.result = function(op){
  op = op || calculator.operation;
   return op.number1 + op.number2;
};
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

<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

//Créer/Récupérer un module 
angular.module('myCalculatorApp', [])
//Créer un controlleur 
.controller('CalculatorController', function() {
//Définir la logique de l'application ici 
var calculator = this; 
calculator.data = [];
calculator.operation = {
number1: 0, 
number2: 0,
};
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);  }});

En dans la vue

Les éléments de groupe

Angular définit la propriété ng-repeat qui permet de faire du data-binding entre les collections et les éléments de groupe (table, ul).

Supposons qu'on veuille afficher dans un tableau les derniers calculs effectués par le calculateur.

<table class="table">
       <thead>
       <tr>
         <th>Nombre 1</th>
         <th>Nombre 2</th>
         <th>Resultat</th>
       </tr>
       </thead>
       <tbody>
          <tr ng-repeat="data in calculator.data">
          <td>{{data.number1}}</td>
          <td>{{data.number2}}</td>
          <td>{{calculator.result(data)}}</td>
          </tr>
        </tbody>
        </table>

Exercices 2

Récupérez la page HTMl se trouvant ici ainsi que le Javascript associé ici, changez l'extension du fichier .ang en .html.

Vérifiez que le code récupé fonctionne
Ajouter les fonctionnalité necessaires permettant à un utilisateur de choisir le type d'opération qu'il souhaite effectuer sur les valeurs rentrées, les operations peuvent etre Addition, Soustraction, Multiplication et Division. Sentez-vous à l'aise d'en ajouter d'autres si vous avez envie. Gérer les cas de division par zéro.
Pour faire simple, définissez une liste d'opération dans le controller; puis utiliser la propriété ng-repeat pour ajouter autant de boutons que d'opérations. Quand un bonton est clické, appeler la méthode save du controller en lui passant en paramètre le type d'opération à effectuer.
Faites en sorte que le message qui affiche le résultat soit renvoyé par le controlleur et le texte doit correspondre au type d'opération effectué

Exercice 3

Ajoutez une fonction de quiz à votre application. Utilisez les résultats stockés dans le tableau pour créer un quize en affichant les deux nombres et un type d'opération; l'utilisateur doit déviner le resultat. Définir une fonction qui comparera la réponse de l'utilisateur et la réponse calculée par l'ordinateur, si les deux correspondent l'utilisateur à gagné sinon il a perdu et proposez lui une autre question. Pour les plus courageux vous pouvez calculer le score moyen de l'utilisateur ou meme le temps de réponse moyen.

Récupéré depuis "http://miageprojet2.unice.fr/index.php?title=User:EdouardAmosse/MBDS_France_2015_-_2016/Introduction_%C3%A0_Angular_JS"

Mots clés:

Attacher fichier ou image

Fichiers (3)

	Taille	Date	Attaché par
additionneur.ang Aucune description	541 octets	07:55, 30 Mar 2016	EdouardAmosse	Actions
additionneur_2.ang Aucune description	1152 octets	12:32, 30 Mar 2016	EdouardAmosse	Actions
page.js Aucune description	752 octets	12:29, 30 Mar 2016	EdouardAmosse	Actions

Images (0)

Commentaires (0)

Vous devez être connecté pour poster un commentaire.