 |
Vous n'êtes pas connecté. Connexion |
 |
Page modifiée à 07:45, 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}}</b></h1>
|
Powered by MindTouch Deki Open Source Edition v.8.08 |