-
Notifications
You must be signed in to change notification settings - Fork 27
Tutorial Etape 0
Dans ce tutorial, je vous invite à développer une simple application Web avec le framework AngularJS. Vous aller passé en revue les concepts clés d'AngularJS et les mettre en pratique pas à pas.
- installer nodejs sur votre poste
git checkout -f step-0
Problématique :
Nous partons d'un simple site statique avec une page d'acceuil index.html et une page pour la liste des films index-movies.html. Pour info, le site est désigné avec Bootstrap Twitter
Vous remarquerez dans le fichier index.html que le nom de l'utilisateur est en dur dans le code HTML.
Nous allons rendre actif AngularJS sur cette page et afficher ce nom avec la notation {{ }} d'AngularJS.
Solution :
- Inclure le script angular.js dans le fichier
index.html - Ajouter l'attribut
ng-appsur l'élément<html>. Vous indiquer ainsi avecng-appsur quelle portion de votre page doit être actif AngularJS. - Dans le fichier
index.html, remplacerThierry LAUpar{{ 'Thierry LAU' }} - Rafraichir la page.
- Mhhhh, j'obtiens la même chose ? Qu'est ce qui a changé ?
Explications :
En incluant le script angular.js dans le fichier index.html, AngularJS va rechercher un attribut ng-app sur votre page HTML pour savoir où il doit être actif sur votre page. En effet, vous pouvez décider si AngularJS doit analyser une portion de votre page HTML ou la page entière.
Pour cela, vous placez l'attribut ng-app sur l'élément HMTL de votre choix. AngularJS analysera donc la portion définie à l'intérieur de cet élément. Ici, nous décidons qu'AngularJS doit analyser toute notre page en placant l'attribut ng-app sur l'élément <html>.
AngularJS, étant actif, va pouvoir évaluer l'expression {{ 'Thierry LAU' }} qui retourne un String.
Voici les différents cas d'utilisation de la notation {{ }} possible :
-
{{1+1}}affiche 2 -
{{name}}peut afficher 'Thierry LAU' -
{{person.name}}peut afficher 27
Bonnes pratiques :
Placer l'expression {{1+1}} dans dans votre page HTML et vérifier dans le navigateur que la valeur 2 est affichée est un bon moyen de savoir si AngularJS est actif la où vous le souhaitez (avez-vous importer le fichier angular.js ?, avez vous placer l'attribut ng-app au bon endroit ?)