AngularJS l’essentiel
Un simple tutoriel qui couvre les éléments essentiels pour construire votre application web de A à Z avec un exemple concret.
Qu’est-ce que AngularJS?
AngularJS est un framework JAVASCRIPT qui permet d’étendre le vocabulaire HTML pour votre application. Il vous permet d’inventer une nouvelle syntaxe HTML, spécifique à votre application.
Pensez par exemple que vous avez une liste de tâches et vous voulez l’afficher dans votre page HTML, combien il serait facile de faire ça si vous pouvez mettre une balise <liste-taches></liste-taches> et le tour est joué.
Bien, AngularJS vous permet de faire ça et bien plus. Dans ce tutoriel, vous allez voir comment réaliser ça en utilisant AngularJS dans un exemple concret.
Remarque : Vous pouvez utiliser ATOM comme éditeur de code.
Intégration d’AngularJS
Après le téléchargement d’AngularJS d’ici, créez un fichier index.html comme ça :
Les modules AngularJS
Une application qui utilise AngularJS peut être décomposée en différents modules. Le module est un conteneur qui délimite la zone d’action d’un code AngularJS dans votre structure HTML.
Pour définir un module, utilisez le syntaxe suivant au niveau de <body>:
Par la suite, créez un fichier app.js et ajoutez le code suivant :
Les contrôleurs AngularJS
Le contrôleur définit le comportement de notre application et peut être associé à n’importe quelle balise HTML à intérieur de notre module en utilisant l’attribut ng-controller=”nomControleur as alias”. Bien sur le code JAVASCRIPT doit contenir la définition de contrôleur comme suit :
Chaque module peut contenir plusieurs contrôleurs.
A titre d’exemple, notre application permet de récupérer un objet projet et afficher ses données (nom, description, date_creation, importance).
Code JAVASCRIPT :
Code HTML :
Résultat :
Les expressions AngularJS
Évidement, vous avez remarqué le {{expression}} au niveau de code HTML. AngularJS utilise ce syntaxe pour évaluer les expressions et renvoyer les résultats exactement où l’expression est écrite (dans les attributs ou les balises).
Par exemple,
— Résultat : {{4 + 6}} → Résultat : 10
— {{“hello” + “ you”}} → hello you
Les expressions AngularJS peuvent contenir des littéraux (chaînes de caractères), des opérateurs (arithmétiques et logiques), des variables et des filtres. Mais, elles ne prennent pas en charge les conditionnels, les boucles et les exceptions.
Les filtres AngularJS
Les filtres sont des mots clés avec un syntaxe spécifique qui peuvent être utilisés pour formater les données.
Les mots clés utilisés :
— currency : Transforme un numéro en format de devise.
— date : Transforme une date à un format spécifié.
— filter : Sélection d’un sous-ensemble d’éléments à partir d’un tableau.
— json : Transforme un objet à une chaîne JSON.
— limitTo : Limite un tableau/chaîne à un nombre spécifié d’éléments/caractères.
— lowercase : Transforme une chaîne en minuscule.
— uppercase : Transforme une chaîne en majuscule.
— number : Transforme un numéro à une chaîne.
— orderBy : Ordonne un tableau par une expression.
Les filtres peuvent être appliqués en utilisant le format suivant :
{{ data | keyword:options }}
Exemples :
— {{‘1388123412323’ | date:’dd/MM/yyyy hh:mm’}} → 27/12/2013 12:50
— {{‘aymen toumi’ | uppercase}} → AYMEN TOUMI
— {{‘Bonjour’ | limitTo:3}} → Bon
AngularJS permet aussi de définir des filtres personnalisés. L’exemple suivant montre l’implémentation du filtre d’affichage stars utilisé pour la valeur d’importance.
Code JAVASCRIPT :
Les directives AngularJS
AngularJS vous permet d’étendre le HTML avec de nouveaux attributs appelés directives qui offrent plus des fonctionnalités à votre application.
Les directives prédéfinies d’AngularJS sont des attributs HTML avec le préfixe ng-. Il y a plusieurs directives en AngularJS parmi les plus importants :
La directive de répétition
— ng-repeat : Répète un ensemble de HTML, un nombre donné de fois. L’ensemble de HTML sera répété une fois par élément dans une collection. La collection doit être un tableau ou un objet.
Par exemple, l’affichage de l’ensemble de vos projets.
Code JAVASCRIPT :
Code HTML :
Résultat :
Les directives de formulaire
Un point fort d’AngularJS est la possibilité d’avoir une liaison de données bidirectionnelle entre le modèle et la vue dans l’application d’où la synchronisation immédiate entre le deux. Lorsque les données du modèle changent, la vue reflète la modification, et lorsque les données dans la vue changent, le modèle est également mis à jour. Ceci est garanti par la directive :
— ng-model : Lie la valeur des contrôles HTML (input, select, textarea) aux données de l’application.
Par exemple, vous avez un formulaire qui permet d’insérer un nouveau projet dans votre liste de projets.
Code HTML :
Code JAVASCRIPT :
Les directives d’événements
Dans l’exemple précédent vous avez déjà une fonction addProjet qui traite l’événement submit et l’attribut de formulaire ng-submit assure la liaison de l’événement avec la fonction.
En AngularJS, vous pouvez ajouter des écouteurs d’événements à vos éléments HTML en utilisant ces attributs :
— ng-blur
— ng-change
— ng-click
— ng-copy
— ng-cut
— ng-dblclick
— ng-focus
— ng-keydown
— ng-keypress
— ng-keyup
— ng-mousedown
— ng-mouseenter
— ng-mouseleave
— ng-mousemove
— ng-mouseover
— ng-mouseup
— ng-paste
Comme exemple, vous ajoutez un bouton supprimer pour chaque projet de la liste et lors de clic sur lui le projet sera enlevé.
Code HTML :
Code JAVASCRIPT :
Les directives de propriétés
AngularJS a des directives pour lier les données d’application aux attributs des éléments HTML. Parmi les plus importants on a :
— ng-class : spécifie les classes CSS de l’élément HTML.
— ng-style : spécifie l’attribut style de l’élément.
— ng-checked : spécifie l’état de l’attribut coché (checked).
— ng-disabled : spécifie l’état de l’attribut désactivé (disabled).
— ng-readonly : spécifie l’état de l’attribut lecture-seule (readonly).
— ng-maxlength : spécifie le nombre maximum de caractères autorisés dans le champ de saisie.
— ng-minlength : spécifie le nombre maximum de caractères autorisés dans le champ de saisie.
— ng-hide : cache ou affiche l’élément HTML.
— ng-show : affiche ou cache l’élément HTML.
— ng-href : spécifie une URL pour l’élément <a>.
— ng-src : spécifie l’attribut src pour l’élément <img>.
— ng-value : spécifie la valeur d’un élément de saisie.
— ng-options : spécifie les options dans une liste <select>.
Pour mettre en oeuvre les concepts déjà vus, vous ajoutez un formulaire qui permet de faire plusieurs actions sur la liste de projets.
Les actions suggérées sont :
— Le filtrage des projets suivant leurs noms.
— L’affichage de couleur d’arrière plan différent, suivant la valeur d’importance, pour chaque projet.
— Le filtrage des projets suivant la valeur d’importance.
— Le basculement d’affichage de formulaire d’actions par clique sur le label de titre.
— Le tri des projets par date de création, importance ou nom dans l’ordre croissant ou décroissant.
Code HTML :
Code javascript :
Au niveau de code, il y a quelques points que doit être clarifiés :
— ng-init : Définit les valeurs initiales. Si la variable n’existe pas auparavant, elle sera créée et associée à l’objet $scope.
— L’objet $scope contient l’ensemble des variables liées à un contrôleur.
Les directives de validation
AngularJS offre une validation de formulaire. Il surveille constamment l’état des champs de saisie de formulaire (input, textarea, select) et vous permet de connaître l’état actuel.
Les champs de saisie ont les états suivants :
— $untouched : Le champ n’a pas encore été touché.
— $touched : Le champ a été touché.
— $pristine : Le champ n’a pas encore été modifié.
— $dirty : Le champ a été modifié.
— $invalid : Le contenu du champ n’est pas valide.
— $valid : Le contenu du champ est valide.
Les formulaires ont les états suivants :
— $pristine : Aucun champ n’a encore été modifié.
— $dirty : Un ou plusieurs champs ont été modifiés.
— $invalid : Le contenu du formulaire n’est pas valide.
— $valid : Le contenu du formulaire est valide.
— $submitted : Le formulaire est soumis.
A titre d’exemple, vous modifiez le formulaire d’ajout de projet et désactiver le bouton d’ajout tant que le formulaire est invalide.
Les directives personnalisées
En plus de toutes les directives AngularJS intégrées, vous pouvez créer vos propres directives. Les directives personnalisées vous permettent d’écrire du code HTML qui exprime mieux le comportement de votre application.
Les nouvelles directives sont créées en utilisant la fonction .directive et doivent être nommée en camel case (exp. nouveauDirective). Mais lors de l’appel, vous devez utiliser un nom séparé par - (exp. nouveau-directive).
Vous devez reformuler votre code pour le rendre plus visible en utilisant les directives personnalisées
Commençant par le formulaire d’ajout qui doit être remplacé par la balise <ajout-projet-form></ajout-projet-form> dans le fichier index.html. Pour assurer ça, créez le fichier ajout-projet-form.html avec le code HTML de formulaire d’ajout.
Dans le fichier app.js, ajoutez le code suivant :
Le fichier index.html doit être modifié comme suit :
Remarque : ne mélanger pas les contrôleurs c-à-dire une directive qui a un contrôleur ne doit pas être imbriquée dans une autre directive qui a une autre contrôleur.
Exécution de l’application
Pour des raisons de sécurité au niveau des navigateurs vous devez avoir un serveur web local pour exécuter votre application. Donc, assurez-vous que node.js est installé dans votre système puis introduire une seule fois la commande suivante au niveau de terminal :
npm install -g local-web-server
Maintenant, à chaque fois vous voulez tester l‘application, accédez à la racine de votre site web (où il y a index.html), lancez la commande ws puis introduisez l’url suivant http://127.0.0.1:8000.
Pour arrêter le serveur faite Ctrl+C au niveau de terminal.
De même, le formulaire de filtrage qui sera remplacé par la balise <filtrage-projet-form></filtrage-projet-form>.
Contenu de fichier filtrage-projet-form.html :
Définition de directive :
Puis, la directive <liste-projet></liste-projet> et <projet></projet>.
Le fichier projet.html :
Le fichier liste-projet.html :
Modification dans le fichier index.html :
Modification dans le fichier app.js :
Dépendances et services en AngularJS
A un certain moment votre fichier de code source JAVASCRIPT peut devenir lourd et mélangé. Pour éviter ça, le mieux est de découpé votre application en différents modules sur différents fichiers de code. Par exemple, mettez les directives dans le module directives au niveau de fichier (directives.js) et les données dans le module datas au niveau de fichier (datas.js) puis définir les dépendance entre ces parties et tout va devenir plus clair et plus organisé.
Commençant par les données de notre application qui seront définies à travers un service dans le fichier data.js. Le service, comme indique leur nom, permet de donner des fonctionnalités additionnelles à votre contrôleur. Dans notre cas, il va fournir les fonctionnalités de la couche de données.
La deuxième partie consiste au rassemblement des directives dans le fichier directives.js et l’assurance de la liaison avec le service de données (chaque module peut déclarer ses dépendances vers d’autres modules entre []) :
Par la suite, vous modifiez le fichier app.js :
Enfin, vous appelez les différents fichiers de code JAVASCRIPT dans notre fichier index.html :
Dans une vraie application web, généralement l’interaction avec une source de données distante à travers une API RESTful est nécessaire. Une API RESTful fournit une interface de programmation d’application pour manipuler les données en utilisant des requêtes HTTP (GET, PUT, POST et DELETE) : GET pour récupérer une ressource; PUT pour modifier l’état ou mettre à jour une ressource; POST pour créer cette ressource; et DELETE pour la supprimer.
Pour mettre en oeuvre ce concept vous allez utiliser le service de sauvegarde de données (www.back4app.com) qui fournit une API RESTful pour la manipulation de données. Vous trouvez ici toutes les informations nécessaires pour accéder aux données qui seront transmises au format JSON.
Dans AngularJS, l’envoi des requêtes HTTP se fait par le bais de l’objet $http.
$http envoie une demande au serveur et reçoit une réponse. La demande spécifie la méthode (GET, PUT, POST, DELETE), l’url de service et les entêtes nécessaires. Par la suite, vous utilisez la méthode then(succesFunction, failureFunction) avec deux paramètres qui vous permettent de définir le traitement lors de la réussite ou l’échec de l’opération bien sûr dans tous les cas vous allez avoir une réponse.
Dans notre exemple, l’utilisation de $http se limite au fichier data.js qui va être modifié comme suit :
La nouvelle version de fichier directives.js :
La nouvelle version de fichier app.js :
Quelques modifications au niveau de fichier projet.html :
Changement dans le fichier index.html :
Amélioration de l’interface utilisateur
A ce stade le projet est fonctionnel mais son apparence est très médiocre. Pour améliorer l’interface utilisateur, on va utiliser un framework frontend. Parmi les frameworks d’interface utilisateurs gratuits les plus répondus on trouve Bootstrap de Twitter.
Après l’utilisation de Bootstrap l’interface de notre application web devient comme ça.
Vous pouvez récupérer la version finale du projet sur GitHub.
Bonus : Routage en AngularJS
Si vous souhaitez naviguer vers différentes pages de votre application, mais sans rechargement de page, vous pouvez utiliser le module ngRoute.
Pour préparer vos applications au routage, vous devez inclure le module AngularJS Route :
Ensuite, vous devez ajouter ngRoute comme dépendance dans le module d’application :
Utilisez $routeProvider pour configurer les différentes routes dans votre application. Avec $routeProvider, vous pouvez définir la page à afficher lorsqu’un utilisateur clique sur un lien et vous pouvez également définir un contrôleur pour chaque vue affichée.
Un nouveau fichier infos.html doit être ajouté à votre application :
Votre application nécessite un conteneur pour mettre le contenu fourni par le routage. Ce conteneur est la directive ng-view. L’application ne peut avoir qu’une seule directive ng-view, et ce sera l’espace réservé pour toutes les vues fournies par la route.
Donc le fichier index.html votre application doit contenir le lien vers la page d’infos et le conteneur ng-view :
Résultat :
C’est tout, merci pour votre patience. N’hésitez pas à posez des questions.