Les premiers pas
AngularJS est un cadre d'application JavaScript open source développé par Google, conçu pour faciliter la création d'applications Web dynamiques. Il repose sur le principe de l'architecture MVC (Modèle-Vue-Contrôleur) pour organiser le code et séparer les différentes couches de l'application. Cette approche permet de structurer les applications de manière modulaire, rendant le développement plus maintenable et évolutif. AngularJS utilise un concept de liaison bidirectionnelle des données (two-way data binding), synchronisant automatiquement l'état des données entre le modèle et la vue, réduisant ainsi la quantité de code nécessaire pour gérer les interactions utilisateur.
L'un des aspects clefs d'AngularJS est son système de directives, permettant d'enrichir le HTML standard avec de nouvelles fonctionnalités. Ces directives peuvent être utilisées pour manipuler le DOM, gérer les événements ou intégrer des comportements spécifiques à l'application, tout en restant déclaratives. En plus de cela, AngularJS fournit une gestion robuste des dépendances via un mécanisme d'injection de dépendances. Ce mécanisme simplifie l'ajout de services tels que l'accès aux données, la gestion de l'état ou la communication avec des API externes, tout en rendant le code plus facilement testable.
Enfin, AngularJS offre une gestion puissante des routages, permettant de créer des applications monopages (SPA - Single Page Applications). Cette fonctionnalité permet de charger dynamiquement les vues et de naviguer entre elles sans recharger la page complète, offrant ainsi une expérience utilisateur fluide. Avec son ensemble riche de fonctionnalités et son approche modulaire, AngularJS a révolutionné le développement Web en permettant aux développeurs de concevoir des applications interactives et réactives avec un minimum de complexité.
Suivez la page pour voir comment AngularJS rend les navigateurs plus intelligents, sans utiliser d'extensions ou de plugiciels natifs :
- Découvrez des exemples d'utilisation de la liaison de données côté client pour créer des vues dynamiques de données changeant immédiatement en réponse aux actions de l'utilisateur.
- Découvrez comment AngularJS maintient vos vues synchronisées avec vos données sans avoir besoin de manipulation DOM.
- Découvrez une manière plus efficace et plus simple de tester vos applications Web, avec Karma et Protractor.
- Apprenez à utiliser l'injection de dépendances et les services pour faciliter les tâches Web courantes, telles que l'insertion de données dans votre application.
Une fois le tutoriel terminé, vous serez en mesure de :
- Créer une application dynamique fonctionnant dans tous les navigateurs modernes.
- Utiliser la liaison de données pour connecter votre modèle de données à vos vues.
- Créer et exécuter des tests unitaires, avec Karma.
- Créer et exécuter des tests de bout en bout, avec Protractor.
- Déplacez la logique d'application hors du modèle et dans les composantes et les contrôleurs.
- Obtenez des données à partir d'un serveur à l'aide des services AngularJS.
- Appliquez des animations à votre application à l'aide du module ngAnimate.
- Structurez vos applications AngularJS de manière modulaire et évolutive pour les projets de plus grande envergure.
Configuration de l'environnement
AngularJS utilise normalement Git et Node.js pour sa configuration d'environnement.
Installer Git
Vous pouvez télécharger et installer Git depuis https://git-scm.com/download. Une fois installé, vous devriez avoir accès à l'outil de ligne de commande git. Les principales commandes que vous devrez utiliser sont :
- git clone : cloner un dépôt distant sur votre machine locale.
- git checkout : extraire une branche particulière ou une version balisée du code à pirater.
Téléchargez angular-phonecat
Clonez le dépôt angular-phonecat situé sur GitHub en exécutant la commande suivante :
| git clone --depth=16 https://github.com/angular/angular-phonecat.git |
Cette commande crée un sous-répertoire angular-phonecat dans votre répertoire actuel.
L'option --depth=16 indique à Git de récupérer uniquement les 16 derniers commits. Cela rend le téléchargement beaucoup plus petit et plus rapide.
Changez votre répertoire actuel en angular-phonecat.
| cd angular-phonecat |
Les instructions de cette pager supposent désormais que vous exécutez toutes les commandes à partir du répertoire angular-phonecat.
Installer Node.js
Pour installer les dépendances (comme les outils de test et AngularJS lui-même) et exécuter le serveur Web local préconfiguré, vous aurez également besoin de Node.js v6+.
Vous pouvez télécharger un programme d'installation Node.js pour votre système d'exploitation à partir de https://nodejs.org/en/download/.
Vérifiez la version de Node.js que vous avez installée en exécutant la commande suivante :
| node --version |
Dans les distributions basées sur Debian, il peut y avoir un conflit de nom avec un autre utilitaire appelé node. La solution suggérée est d'installer également le paquet apt nodejs-legacy, renommant node en nodejs.
|
apt-get install nodejs-legacy npm nodejs --version npm --version |
Si vous devez exécuter différentes versions de Node.js dans votre environnement local, envisagez d'installer Node Version Manager (nvm) ou Node Version Manager (nvm) for Windows.
En installant Node.js, vous obtenez également npm, étant un exécutable en ligne de commande pour télécharger et gérer les paquets Node.js. Nous l'utilisons pour télécharger le cadre d'application AngularJS ainsi que les outils de développement et de test.
Une fois Node.js installé sur votre machine, vous pouvez télécharger ces dépendances en exécutant :
| npm install |
Cette commande lit le fichier package.json d'angular-phonecat et télécharge les dépendances suivantes dans le répertoire node_modules :
| Dépendance | Description |
|---|---|
| Http-Server | Serveur Web statique local simple |
| Karma | Exécuteur de tests unitaires |
| Protractor | Exécuteur de tests de bout en bout (E2E) |
L'exécution de npm install copiera également automatiquement le cadre d'application AngularJS et les autres dépendances nécessaires au fonctionnement de l'application dans le répertoire app/lib/.
Notez que le projet angular-phonecat est configuré pour installer et exécuter ces utilitaires via des scripts npm. Cela signifie que vous n'avez pas besoin d'installer l'un de ces utilitaires globalement sur votre système pour suivre la page.
Le projet est préconfiguré avec un certain nombre de scripts d'aide npm pour faciliter l'exécution des tâches courantes dont vous aurez besoin lors du développement :
| Commande | Description |
|---|---|
| npm start | Démarrer un serveur Web de développement local. |
| npm test | Démarrez le lanceur de tests unitaire Karma. |
| npm run protractor | Exécutez les tests de bout en bout (E2E) du Protractor. |
| npm run update-webdriver | Installez les pilotes nécessaires à Protractor. |
Installer les outils d'aide (facultatif)
Les modules Http-Server, Karma et Protractor sont également des exécutables, pouvant être installés globalement et exécutés directement à partir d'un terminal/prompt de commande. Vous n'avez pas besoin de le faire pour suivre la page, mais si vous décidez de les exécuter directement, vous pouvez installer ces modules globalement en utilisant sudo npm install --global ....
Par exemple, pour installer l'exécutable de ligne de commande http-server, vous devez procéder comme suit :
| sudo npm install --global http-server |
(Omettez le sudo si vous utilisez Windows.)
Vous pouvez ensuite exécuter directement l'outil http-server, par exemple :
| http-server ./app |
Exécution du serveur Web de développement
Bien que les applications AngularJS soient constituées uniquement de code côté client et qu'il soit possible de les ouvrir dans un navigateur Web directement à partir du système de fichiers, il est préférable de les diffuser à partir d'un serveur Web HTTP. En particulier, pour des raisons de sécurité, la plupart des navigateurs modernes n'autoriseront pas JavaScript à effectuer des requêtes serveur si la page est chargée directement à partir du système de fichiers.
Le projet angular-phonecat est configuré avec un simple serveur Web statique pour héberger l'application pendant le développement. Démarrez le serveur Web en exécutant :
| npm start |
Cela créera un serveur Web local écoutant le port 8000 sur votre machine locale. Vous pouvez maintenant accéder à l'application à l'adresse http://localhost:8000/index.html.
Pour servir l'application Web sur une adresse IP ou un port différent, modifiez le script «start» dans package.json. Vous pouvez utiliser -a pour définir l'adresse et -p pour définir le port. Vous devez également mettre à jour la propriété de configuration baseUrl dans e2e-test/protractor.conf.js.
Exécution de tests unitaires
On utilise des tests unitaires pour nous assurer que le code JavaScript de l'application fonctionne correctement. Les tests unitaires se concentrent sur le test de petites parties isolées de l'application. Les tests unitaires sont conservés dans des fichiers de test (spécifications) côte à côte avec le code de l'application. De cette façon, il est plus facile de les trouver et de les maintenir à jour avec le code testé. Cela facilite également la refactorisation de la structure de notre application, car les tests sont déplacés avec le code source.
Le projet angular-phonecat est configuré pour utiliser Karma pour exécuter les tests unitaires de l'application. Démarrez Karma en exécutant :
| npm test |
Cela va démarrer le lanceur de tests unitaires Karma. Karma va lire le fichier de configuration karma.conf.js, situé à la racine du répertoire du projet. Ce fichier de configuration indique à Karma de :
- Ouvrir les instances des navigateurs Web Chrome et Firefox et les connecter à Karma.
- Exécuter tous les tests unitaires dans ces navigateurs Web.
- Rapporter les résultats de ces tests dans la fenêtre du terminal/ligne de commande.
- Surveiller tous les fichiers JavaScript du projet et réexécuter les tests chaque fois que l'un d'entre eux change.
Il est préférable de laisser cette fonction s'exécuter en permanence, en arrière-plan, car elle vous fournira un retour immédiat sur la réussite ou non des tests unitaires de vos modifications pendant que vous travaillez sur le code.
Exécution de tests E2E
Nous utilisons des tests E2E (de bout en bout) pour garantir que l'application dans son ensemble fonctionne comme prévu. Les tests E2E sont conçus pour tester l'ensemble de l'application côté client, en particulier pour s'assurer que les vues s'affichent et se comportent correctement. Pour ce faire, il simule une interaction réelle de l'utilisateur avec l'application réelle exécutée dans le navigateur Web.
Les tests E2E sont conservés dans le répertoire e2e-tests.
Le projet angular-phonecat est configuré pour utiliser Protractor pour exécuter les tests E2E de l'application. Protractor s'appuie sur un ensemble de pilotes pour lui permettre d'interagir avec le navigateur. Vous pouvez installer ces pilotes en exécutant :
| npm run update-webdriver |
Vous n'avez pas besoin d'exécuter manuellement cette commande. Nos scripts npm sont configurés de manière à ce qu'ils soient automatiquement exécutés dans le cadre de la commande qui exécute les tests E2E.
Étant donné que Protractor fonctionne en interagissant avec une application en cours d'exécution, nous devons démarrer notre serveur Web :
| npm start |
Ensuite, dans une fenêtre de terminal/ligne de commande distincte, nous pouvons exécuter les scripts de test Protractor sur l'application en exécutant :
| npm run protractor |
Protractor lira le fichier de configuration dans e2e-tests/protractor.conf.js. Ce fichier de configuration indique à Protractor de :
- Ouvrir un navigateur Chrome et le connecter à l'application.
- Exécuter tous les tests E2E dans ce navigateur Web.
- Afficher les résultats de ces tests dans la fenêtre du terminal/ligne de commande.
- Fermer le navigateur et quitter.
Il est conseillé d'exécuter les tests E2E chaque fois que vous apportez des modifications aux vues HTML ou que vous souhaitez vérifier que l'application dans son ensemble s'exécute correctement. Il est très courant d'exécuter des tests E2E avant de transmettre une nouvelle validation de modifications à un dépôt à distance.
Chaque version de Protractor est compatible avec des versions de navigateur spécifiques. Si vous lisez ceci dans le futur, il est possible que la version Protractor spécifiée ne soit plus compatible avec la dernière version de Chrome que vous utilisez.
Si tel est le cas, vous pouvez essayer de mettre à niveau Protractor vers une version plus récente. Pour obtenir des instructions sur la mise à niveau des dépendances, consultez Mise à jour des dépendances.
Mise à jour des dépendances
Afin d'éviter les surprises, toutes les dépendances répertoriées dans package.json sont épinglées à des versions spécifiques (c'est à cela que sert le fichier package-lock.json). Cela garantit que la même version d'une dépendance est installée à chaque fois.
Étant donné que toutes les dépendances sont acquises via npm, vous pouvez également utiliser le même outil pour les mettre à jour facilement. Exécutez simplement le script préconfiguré :
| npm run update-deps |
Cela mettra à jour tous les paquets vers la dernière version qui correspond à leurs intervalles de versions (comme spécifié dans package.json) et copiera également les fichiers nécessaires dans app/lib/. Par exemple, si package.json contient "some-package": "1.2.x", il sera mis à jour vers la dernière version 1.2.x (par exemple 1.2.99), mais pas vers 1.3.x (par exemple 1.3.0).
Si vous souhaitez mettre à jour une dépendance vers une version plus récente que celle autorisée par l'intervalle spécifiée, vous pouvez modifier l'intervalle de versions dans package.json, puis exécuter npm run update-deps comme d'habitude.
Problèmes courants
Problèmes de pare-feu/proxy
Git et d'autres outils utilisent souvent le protocole git: pour accéder aux fichiers dans les dépôt à distances. Certaines configurations de pare-feu bloquent les URL git://, ce qui entraîne des erreurs lors de la tentative de clonage de référentiels ou de téléchargement de dépendances. (Par exemple, les pare-feu d'entreprise sont «connus» pour bloquer git:.)
Si vous rencontrez ce problème, vous pouvez forcer l'utilisation de https: à la place, en exécutant la commande suivante :
| git config --global url."https://".insteadOf git:// |
La mise à jour de WebDriver prend trop de temps
L'exécution de update-webdriver pour la première fois peut prendre de quelques secondes à quelques minutes (selon votre matériel et votre connexion réseau). Si vous annulez l'opération (par exemple en utilisant Ctrl+C), vous risquez d'obtenir des erreurs lorsque vous tenterez d'exécuter Protractor ultérieurement.
Dans ce cas, vous pouvez supprimer le répertoire node_modules/ et exécuter à nouveau npm install.
Dépendances de Protractor
Protractor utilise le serveur autonome Selenium, nécessitant à son tour l'installation du kit de développement Java (JDK) sur votre machine locale. Vérifiez cela en exécutant java -version à partir de la ligne de commande.
Erreur lors de l'exécution du serveur Web
Le serveur Web est configuré pour utiliser le port 8000. Si le port est déjà utilisé (par exemple par une autre instance d'un serveur Web en cours d'exécution), vous obtiendrez une erreur EADDRINUSE. Assurez-vous que le port est disponible avant d'exécuter npm start.
Amorçage
Dans cette section, vous vous familiariserez avec les fichiers de code source les plus importants de l'application AngularJS Phonecat. Vous apprendrez également à démarrer les serveurs de développement fournis avec angular-seed et à exécuter l'application dans le navigateur Web.
Avant de continuer, assurez-vous d'avoir configuré votre environnement de développement et installé toutes les dépendances nécessaires.
Dans le répertoire angular-phonecat, exécutez cette commande :
| git checkout -f step-0 |
Cela réinitialise votre espace de travail.
Vous devez répéter cette opération pour chaque étape ultérieure de cette page. Cela entraînera la perte de toutes les modifications que vous avez apportées dans votre répertoire de travail.
Si vous ne l'avez pas déjà fait, vous devez installer les dépendances en exécutant :
| npm install |
Pour voir l'application s'exécuter dans un navigateur, ouvrez un onglet ou une fenêtre de terminal/ligne de commande distinct, puis exécutez npm start pour démarrer le serveur Web. Ouvrez maintenant une fenêtre de navigateur pour l'application et accédez à http://localhost:8000/index.html.
Notez que si vous avez déjà exécuté l'application de branche principale, vous pouvez voir la version principale mise en cache de l'application dans la fenêtre de votre navigateur à ce stade. Appuyez simplement sur Actualiser (ou généralement Ctrl+F5) pour recharger la page.
Vous pouvez maintenant voir la page dans votre navigateur Web.
La page HTML affichant «Nothing here yet!» a été construite avec le code HTML ci-dessous. Le code contient certains éléments AngularJS clefs dont nous aurons besoin à mesure que nous progresserons.
Voici le code de app/index.html :
Que fait le code ?
L'attribut ng-app :
- <html ng-app>
L'attribut ng-app représente une directive AngularJS, nommée ngApp (AngularJS utilise kebab-case pour ses attributs personnalisés et camelCase pour les directives correspondantes les implémentant). Cette directive est utilisée pour marquer l'élément HTML qu'AngularJS doit considérer comme l'élément racine de l'application. Cela donne aux développeurs d'applications la liberté d'indiquer à AngularJS si la page HTML entière ou seulement une partie de celle-ci doit être traitée comme l'application AngularJS.
Balise de script angular.js :
Ce code télécharge le script angular.js enregistrant un rappel étant exécuté par le navigateur lorsque la page HTML contenant le fichier sera entièrement téléchargée. Lorsque le rappel est exécuté, AngularJS recherche la directive ngApp. Si AngularJS trouve la directive, il amorcera l'application avec la racine du DOM de l'application comme élément sur lequel la directive ngApp a été définie.
Reliure double bouclée avec une expression :
- Nothing here {{'yet' + '!'}}
Cette ligne démontre deux fonctionnalités principales des capacités de modèle AngularJS :
- Une liaison, indiquée par des doubles boucles : {{ }}
- Une expression simple utilisée dans cette liaison : 'yet' + '!'
La liaison indique à AngularJS qu'il doit évaluer une expression et insérer le résultat dans le DOM à la place de la liaison. Comme nous le verrons dans les étapes suivantes, plutôt qu'une insertion unique, une liaison entraînera des mises à jour continues efficaces chaque fois que le résultat de l'évaluation de l'expression change.
Les expressions AngularJS sont des extraits de code de type JavaScript étant évalués par AngularJS dans le contexte de la portée actuelle du modèle, plutôt que dans le cadre du contexte global (fenêtre).
Comme prévu, une fois ce modèle traité par AngularJS, la page HTML contient le texte :
Nothing here yet!Amorçage des applications AngularJS
L'amorçage automatique des applications AngularJS à l'aide de la directive ngApp est très simple et convient à la plupart des cas. Dans les cas avancés, comme lors de l'utilisation de chargeurs de scripts, vous pouvez utiliser la méthode impérative/manuelle pour amorcer l'application.
Trois choses importantes se produisent pendant la phase d'amorçage :
- L'injecteur étant utilisé pour l'injection de dépendances est créé.
- L'injecteur créera ensuite la portée racine qui deviendra le contexte du modèle de notre application.
- AngularJS «compile» ensuite le DOM à partir de l'élément racine ngApp, en traitant toutes les directives et liaisons trouvées en cours de route.
Une fois qu'une application est démarrée, elle attend alors les événements entrants du navigateur (tels que les clics de souris, les appuis sur les touches ou les réponses HTTP entrantes) pouvant modifier le modèle. Une fois qu'un tel événement se produit, AngularJS détecte s'il a provoqué des modifications du modèle et si des modifications sont trouvées, AngularJS les reflétera dans la vue en mettant à jour toutes les liaisons affectées.
La structure de notre application est actuellement très simple. Le modèle ne contient qu'une seule directive et une seule liaison statique, et notre modèle est vide.
Quels sont tous ces fichiers dans mon répertoire de travail ?
La plupart des fichiers de votre répertoire de travail proviennent du projet angular-seed, étant généralement utilisé pour démarrer de nouveaux projets AngularJS. Le projet seed est préconfiguré pour installer le cadre d'application AngularJS (via npm dans le répertoire app/lib/) et les outils de développement et de test d'une application Web classique (via npm).
Expériences
Essayez d'ajouter une nouvelle expression à index.html qui fera quelques calculs :