AngularJS TP 4: Les templates - e

Transcription

AngularJS
TP 4: Les templates
Ce TP explique l’utilisation des templates dans AngularJS.
1
Mise en relation de données
Dans le TP précédent, nous avons utilisé des modèles d’Angular en utilisant ng-model et la mise en relation de
données avec {{ name }}. C’est un modèle basique de mise en relation de données. Dans cette section, nous essayons
de taire correspondre des élément d’entrée HTML dans un Angular model. Nous commençons par créer un module
appelé SimpleBinding. Créez un fichier appelé simplebinding.js contenant le script suivant :
var myApp = angular.module(’SimpleBinding’,[]);
myApp.controller(’MyControlller’, [’$scope’, function($scope) {
$scope.customer = {}
}]);
Vous pouvez constater que nous avons défini customer en tant qu’objet JSON. L’étape suivante consiste à créer un
fichier HTML, appelé simplebinding.html contenant le code suivant :
<!DOCTYPE html>
<html ng-app="SimpleBinding">
<head>
<title>Simple Module</title>
<script src="lib/angular.min.js"></script>
<script src="controllers/simplebinding.js"></script>
</head>
<body ng-controller="MyControlller">
<form>
</form>
</body>
</html>
Dans la section suivante nous allons insérer des champs dans le formulaire (à l’intérieur des balises form).
1.1
Manipuler des éléments d’entrée
Les premières données d’entrée sont name et email. On définit un modèle Angular ng-model="customer.name"
et ng-model="customer.email" .
<div>
<label
<input
</div>
<div>
<label
<input
</div>
for="name">Name: </label>
type="text" id="name" ng-model="customer.name">
for="email">Email: </label>
type="text" id="email" ng-model="customer.email">
1.2
Sélection d’élément
Concernant es éléments à sélectionner, nous définissons une liste de pays et un ng-model en tant quecustomer.country.
<div>
<label for="selectcountry">Country:</label>
<select name="selectcountry" id="selectcountry" ng-model="customer.country">
<option value="AU">Australia</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
<option value="NL">Netherlands</option>
<option value="CH">Switzerland</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
</select>
</div>
1.3
L’élément bouton radio
Concernant le groupe de bouton radio, nous définissons le même nom, appelé color. Nous définissons aussi un
modèle Angular avec le même nom: customer.color.
<div>
<label>Preference color:</label>
<input type="radio" name="color" id="radio1" value="Red" ng-model="customer.color">
<label for="radio1">Red</label>
<input type="radio" name="color" id="radio2" value="Green" ng-model="customer.color">
<label for="radio2">Green</label>
<input type="radio" name="color" id="radio3" value="Blue" ng-model="customer.color">
<label for="radio3">Blue</label>
</div>
1.4
L’entrée de la date
L’entrée correspondant à une date est un élément pour lequel nous pouvons définir un modèle Angular en tant que
customer.birthdate
<div>
<label for="birthdate">Birth Date:</label>
<input type="date" name="birthdate" id="birthdate" ng-model="customer.birthdate">
</div>
1.5
Fourchette
La fourchette de valeurs d’entrées correspond aux entrées qui peuvent être sélectionnées entre une valeur minimale
et une valeur maximale. Nous devons définir donc, un min et un max concernant l’élément en question. Pour le
modèle Angular, nous définissons ng-model="customer.skilllevel".
<div>
<label for="level">Skill level:</label>
<input type="range" name="level" id="level" min="1" max="100" alt="Level 1-100" ng-model=
"customer.skilllevel" >
</div>
1.6
CheckBox
Concernant la checkbox, nous définissons un modèle Angular customer.agree.
<div>
<label for="agree"><input type="checkbox" id="agree" ng-model="customer.agree" >
I agree to the terms & conditions</label>
</div>
1.7
Bouton Submit
nous définissons le bouton Submit sans utiliser un modèle Angular.
without Angular model.
We define submit button
<div>
<button type="submit" >Submit</button>
</div>
1.8
Résultat
Pour voir quel utilisateur a renseigné les données requises, nous pouvons utiliser {{
customer }}.
<div>
Value:
</div>
1.9
{{ customer }}
Exécution de l’application
Enregistrez votre code et exécutez le fichier simplebinding.html. Renseignez les données
en entrée et observez le résultat. Commentez le principe et l’intérêt d’un telle application.
2
Répétition de données
Vous avez des données sous la forme d’un tableau et vous voulez les montrer en HTML. AngularJS
offre ng-repeat pour effectuer des boucles concernant les élément des données. A titre
d’exemple, nous avons un contrôleur avec des données JSON. Créez un fichier intitulé repeatbind
contenant le code suivant :
var myApp = angular.module(’RepeatBinding’,[]);
$scope.customers = [
{name:’user1’,email:’[email protected]’,country:’UK’},
{name:’user2’,email:’[email protected]’,country:’NL’},
{name:’user3’,email:’[email protected]’,country:’DE’},
{name:’user4’,email:’[email protected]’,country:’UK’},
{name:’user5’,email:’[email protected]’,country:’US’},
{name:’user6’,email:’[email protected]’,country:’US’},
{name:’user7’,email:’[email protected]’,country:’CA’}
]
}]);
Comme vous pouvez le constater, customers (clients) consiste en un ensemble de données
relatives aux clients; nom, email et pays. Maintenant, ctéez le fichier HTML repeatbinding.htm
contenant le script suivant :
<!DOCTYPE html>
<html ng-app="RepeatBinding">
<head>
<title>Demo Repeat Data Binding</title>
<script src="controllers/repeatbinding.js"></script>
<style>
.item {
width: 350px;
height: 50px;
background-color: #ff6e68;
}
</style>
</head>
</body>
</html>
Maintenant, dans la section body il s’agit de pré-remplir les données répétées en utilisant
ng-repeat = "customer in customers". Ensuite, nous effectuant la liaison des données
dans le HTML.
<h2>Demo data binding with repeat data</h2>
<br>
<div ng-repeat="customer in customers">
<p class="item">{{customer.name}} | {{customer.email}} | {{customer.country}}</p>
</div>
Enregistrez le code puis exécutez le fichier repeatbinding.html.
le résultat.
3
Observez et commentez
Répétition imbriquée de données
Parfois, nous pouvons avoir une table de données avec un modèle de relation du type one-to-many
Par exemple, tableau de commandes et les détails de la commande. A chaque commande (order)
correspondent des données concernant cette commande dans orderdetails.
Maintenant, nous allons travailler avec ce modèle de données, par exemple nous avons des
commandes et des détails dans un tableau. Créez un fichier nestedrepeated.js contenant
le script suivant :
var myApp = angular.module(’NestedRepeatBinding’,[]);
$scope.orders = [
{
id:1,
transid:’123456’,
customer:’user1’,
created:’3/1/2014’,
details: [
{name:’product1’, quantity:2,
]
},
{
id:2,
created:’3/8/2014’,
details: [
]
},
{
id:3,
created:’3/15/2014’,
details: [
]
},
{
id:4,
created:’3/23/2014’,
details: [
]
}
]
}]);
price:2.5},
price:1.4},
price:3.5},
price:2.8}
price:2.5},
price:1.4},
price:2.8}
price:2.5},
price:1.4},
price:3.5},
price:2.8}
price:2.5},
price:1.4}
L’étape suivante consiste à utiliser ce contrôleur dans le HTML. Créez un fichier nestedrepeat.
contenant le script suivant :
<!DOCTYPE html>
<html ng-app="NestedRepeatBinding">
<head>
<script src="controllers/nestedrepeated.js"></script>
<style>
.item {
width: 350px;
height: 30px;
} .subitem {
margin-left: 30px;
width: 320px;
height: 30px;
background-color: #6fff90;
}
</style>
</head>
</body>
</html>
Dans la section body du HTML, il s’agit de préremplir les commandes (orders) ensuite pré-rempli
les détails concernant ces commandes (order.details).
Écrivez le script suivant :
<h2>Demo data binding with nested repeat data</h2>
<br>
<div ng-repeat="order in orders">
<p class="item">{{order.id}} | {{order.transid}} | {{order.customer}} | {{order.created}}</p>
<div ng-repeat="item in order.details">
<p class="subitem">{{item.name}} | {{item.quantity}} | {{item.price}}</p>
</div>
</div>
Enregistrez le code et exécutez le fichier nestedrepeat.html.
?
4
Quel est le résultat obtenu
Le filtrage des données
Nous pouvons filtrer les données en fonction d’un critère donné.
pour le filtrage avec AgularJS.
{{ expression | filter1 | filter2 | ...
Voici une syntaxe basique
}}
En tant qu’exemple nous utilisons le code de la section 2 mais en modifiant le fichier
HTML. Créez un fichier simplefilter.js .Ce fichier contient le même code que repeatbinding.js
mais en modifiant les données dans les entrée name et email.
Voici le contenue de simplefilter.js.
var myApp = angular.module(’SimpleFilter’,[]);
$scope.customers = [
{name:’andi’,email:’[email protected]’,country:’UK’},
{name:’brown’,email:’[email protected]’,country:’NL’},
{name:’jake’,email:’[email protected]’,country:’DE’},
{name:’jane’,email:’[email protected]’,country:’UK’},
{name:’mike’,email:’[email protected]’,country:’US’},
{name:’xemmy’,email:’[email protected]’,country:’US’},
{name:’zahra’,email:’[email protected]’,country:’CA’}
]
}]);
Coté HTML, nous devons créer un fichier simplefilter.html. Copiez le contenu du fichier
repeatbinding.html en y ajoutant une entrée concernant le filtrage. Dans ng-repeat, nous
ajoutons "..| filter:query". Ceci signifie un filtrage basé sur les données d’entrée
depuis le modèle query.
Voici le code complet pour simplefilter.html.
<!DOCTYPE html>
<html ng-app="SimpleFilter">
<head>
<script src="controllers/simplefilter.js"></script>
<style>
.item {
width: 350px;
height: 50px;
}
</style>
</head>
<h2>Demo filtering for repeated data</h2>
<br>
<p>
<label for="filter">Filter:</label>
<input type="text" id="filter" ng-model=’query’>
</p>
<div ng-repeat="customer in customers | filter:query">
<p class="item">{{customer.name}} | {{customer.email}} | {{customer.country}}</p>
</div>
</body>
</html>
Enregistrez le code et exécutez le fichier simplefilter.html.
le résultat obtenu.
Commentez et expliquez

AngularJS TP 4: Les templates - e

Transcription

Documents pareils

DOSSIER DE CANDIDATURE A Retourner par email à laurent

[IMAGE] Course Name: Solutions aux problÃ¨mes courants en matiÃ

Latvia / Lettonie Riga 64,589 km² Latvian / Letton Andris Berzins

Anibal Cavaco Silva Tower of Belem/Tour de Bélem

SCHWEIZERISCHER BEARDED - COLLIE

Paques concours dessin

Merci beaucoup - Fulton County Schools

Queen Margrethe II / Reine Margrethe II The Little Mermaid / La

Version PDF de cette étude de cas

Name of the country / Nom du pays: The Netherlands / Pays