 |
Vous n'êtes pas connecté. Connexion |
 |
Page modifiée à 08:08, 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". 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 n'as pas de valeur, il sert uniquement à indiquer à angular qu'il peut etre appelé à gérer des élements se trouvant dans la region ou il est déclaré. 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,
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! //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
});
|
Powered by MindTouch Deki Open Source Edition v.8.08 |