 |
Vous n'êtes pas connecté. Connexion |
 |
Page modifiée à 12:33, 30 Mar 2016 par EdouardAmosse
Introduction à Angular JSDe $1Table des matières
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". /div[2]/pre, reference to undefined name 'syntax'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) /div[2]/pre, reference to undefined name 'syntax'Exemple 2: Dans l'exemple qui suit, Angular est activé que sur les élements compris entre les balises <body> et </body>.
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. /div[2]/pre, reference to undefined name 'syntax'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...
Exercice 1 Récupérez la page HTML se trouvant ici et changez l'extension en .html,
Les ControlleursLa 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! /div[2]/div[8]/pre, reference to undefined name 'syntax'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. /div[2]/div[8]/pre, reference to undefined name 'syntax'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}). /div[2]/div[8]/pre, reference to undefined name 'syntax'Définir des comportements dans un controlleur Les comportements sont définis via des fonctions dans les controlleurs (comme en JS). /div[2]/div[8]/pre, reference to undefined name 'syntax'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é. /div[2]/div[8]/pre, reference to undefined name 'syntax'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 /div[2]/div[8]/pre, reference to undefined name 'syntax'Il est aussi possible de passer des paramètres à la fonction qui répond à un événement du dom /div[2]/div[8]/pre, reference to undefined name 'syntax'En dans la vue <input type="button" ng-click="calculator.save(2)" value="Save" />
|
Powered by MindTouch Deki Open Source Edition v.8.08 |