Tutoriel de démarrage d'AngularJS (2) : AngularJS Template_AngularJS

Il est temps de donner à ces pages Web des fonctionnalités dynamiques - utilisez AngularJS ! Nous avons ajouté ici un test pour le contrôleur qui sera ajouté ultérieurement.

Il existe de nombreux types de structures de code pour une application. Pour les applications AngularJS, nous encourageons l'utilisation du modèle Model-View-Controller (MVC) pour découpler le code et séparer les préoccupations. Dans cet esprit, nous utilisons AngularJS pour ajouter des modèles, des vues et des contrôleurs à notre application.

Veuillez réinitialiser le répertoire de travail :

Copier le code Le code est le suivant :

git checkout -f étape 2

Notre application dispose désormais d'une liste de trois téléphones.

Les différences les plus importantes entre l'étape 1 et l'étape 2 sont répertoriées ci-dessous. Vous pouvez accéder à GitHub pour voir les différences complètes.

Vues et modèles

Dans AngularJS, une vue est un mappage d'un modèle rendu via un modèle HTML. Cela signifie que chaque fois que le modèle change, AngularJS mettra à jour le point de jointure en temps réel et mettra à jour la vue en conséquence.

Par exemple, les composants de vue sont construits par AngularJS à l'aide du modèle suivant :

Copier le code Le code est le suivant :

...

• 
  {{phone.name}}
  

  {{phone.snippet}}

  
  

Nous venons de remplacer la liste téléphonique codée statiquement, car ici nous utilisons la directive ngRepeat et deux expressions AngularJS entourées d'accolades - {{phone.name}} et {{phone.snippet}} ——peuvent obtenir le même effet .

1. L'instruction ng-repeat="phone in phones" dans la balise

est un itérateur AngularJS. Cet itérateur demande à AngularJS de créer un élément

pour chaque téléphone de la liste, en utilisant la première balise

2. Comme nous l'avons appris à l'étape 0, les accolades entourant phone.name et phone.snippet identifient la liaison de données. Différente du calcul constant, l'expression ici est en fait une référence de modèle de données de notre application, que nous avons définie dans le contrôleur PhoneListCtrl.

Modèles et contrôleurs

Le modèle de données est initialisé dans le contrôleur PhoneListCtrl (il s'agit simplement d'une fonction contenant un tableau, et l'objet stocké dans le tableau est la liste de données du téléphone mobile) :

app/js/controller.js :

Copier le code Le code est le suivant :

fonction PhoneListCtrl ($ scope) {
$scope.phones = [
{"nom": "Nexus S",
"snippet": "La rapidité est encore plus rapide avec le Nexus S."},
{"name": "Motorola XOOM™ avec Wi-Fi",
"snippet": "La tablette nouvelle génération."},
{"name": "MOTOROLA XOOM™",
"snippet": "La tablette nouvelle génération."}
];
>

Bien que le contrôleur ne semble pas jouer un rôle de contrôle, il joue ici un rôle essentiel. Les contrôleurs nous permettent d'établir des liaisons de données entre les modèles et les vues en leur donnant le contexte de notre modèle de données. C'est ainsi que nous connectons la couche de présentation, les données et les composants logiques :

1.PhoneListCtrl - Le nom de la méthode du contrôleur (dans le fichier JS controllers.js) correspond à la valeur de la directive ngController dans la balise

2. Les données du téléphone sont désormais associées au scope ($scope) injecté dans notre fonction contrôleur. Lorsque l'application démarre, une étendue racine est créée et l'étendue du contrôleur est un successeur typique de l'étendue racine. La portée de ce contrôleur est valide pour toutes les liaisons de données à l'intérieur de la balise

La théorie de la portée d'AngularJS est très importante : une portée peut être considérée comme un outil de collage permettant aux modèles, aux modèles et aux contrôleurs de travailler ensemble. AngularJS utilise des étendues, ainsi que des informations contenues dans des modèles, des modèles de données et des contrôleurs. Ceux-ci peuvent aider à séparer le modèle et la vue, mais les deux sont vraiment synchronisés ! Toute modification apportée au modèle est immédiatement reflétée dans la vue ; toute modification apportée à la vue est immédiatement reflétée dans le modèle.

Pour une compréhension plus approfondie de la portée d'AngularJS, veuillez vous référer au Document sur la portée d'AngularJS.

Test

La « méthode AngularJS » rend les tests de code pendant le développement très simples. Jetons un coup d'œil au test unitaire nouvellement ajouté suivant pour le contrôleur :

test/unit/controllersSpec.js :

Copier le code Le code est le suivant :

décrire('Contrôleurs PhoneCat', function() {

décrire('PhoneListCtrl', function(){

it('devrait créer un modèle "téléphones" avec 3 téléphones', function() {
var portée = {},
ctrl = nouveau PhoneListCtrl(scope);

expect(scope.phones.length).toBe(3);
});
});
});

Ce test vérifie qu'il y a trois enregistrements dans notre réseau de téléphones mobiles (pas besoin de comprendre ce script de test pour l'instant). Cet exemple montre à quel point il est facile de créer un test unitaire pour le code AngularJS. Les tests étant une partie essentielle du développement logiciel, nous facilitons la création de tests dans AngularJS pour encourager les développeurs à en écrire davantage.

Lors de l'écriture de tests, les développeurs AngularJS ont tendance à utiliser la syntaxe du framework Jasmine Behavior-Driven Development (BBD). Bien qu'AngularJS ne vous oblige pas à utiliser Jasmine, tous nos tests du didacticiel sont écrits en utilisant Jasmine. Vous pouvez obtenir des connaissances pertinentes sur la page d'accueil officielle de Jasmine ou sur le Wiki Jasmine.

Les projets basés sur AngularJS sont préconfigurés pour utiliser le JsTestDriver pour exécuter des tests unitaires.

Vous pouvez exécuter le test comme ceci :

1. Sur un terminal séparé, entrez dans le répertoire angulaire-phonecat et exécutez ./scripts/test-server.sh pour démarrer le test (veuillez saisir .scriptstest-server.bat sur la ligne de commande Windows pour exécuter le script, suivi de La commande de script s'exécute de la même manière);
2. Ouvrez une nouvelle fenêtre de navigateur et accédez à http://localhost:9876
3. Sélectionnez "Capturer ce navigateur en mode strict".

En ce moment, vous pouvez mettre votre fenêtre de côté et l'oublier. JsTestDriver exécutera le test par lui-même et affichera les résultats dans votre terminal.

4. Exécutez ./scripts/test.sh pour tester.

Vous devriez voir des résultats similaires à ceux-ci :

Copier le code Le code est le suivant :

Chrome : réinitialisation du coureur.
.
Total 1 tests (réussite : 1 ; échec : 0 ; erreurs : 0) (2,00 ms)
Chrome 19.0.1084.36 Mac OS : exécuter 1 test (réussite : 1 ; échec : 0 ; erreurs 0) (2,00 ms)

Ouais! Test réussi ! Ou pas... Remarque : Si une erreur se produit après l'exécution du test, fermez le navigateur et revenez au terminal pour fermer le script, puis réessayez les étapes ci-dessus.

Pratique

Ajoutez une autre liaison de données pour index.html. Par exemple :

Copier le code Le code est le suivant :

Nombre total de téléphones : {{phones.length}}

Créez une nouvelle propriété de modèle de données et liez-la au modèle. Par exemple :

Copier le code Le code est le suivant :

$scope.hello = "Bonjour le monde !"

Mettez à jour votre navigateur pour vous assurer qu'il indique « Bonjour tout le monde ! » 

Créez un tableau simple avec un itérateur :

Copier le code Le code est le suivant :

numéro de ligne
{{i}}

Maintenant, incrémentons l'expression du modèle de données de 1 :

Copier le code Le code est le suivant :

numéro de ligne
{{i 1}}

Assurez-vous que le test unitaire échoue après avoir changé toBe(3) en toBe(4), puis exécutez à nouveau le script ./scripts/test.sh

Résumé

Vous disposez désormais d'une application dynamique avec des modèles, des vues et des contrôleurs séparés que vous pouvez tester à tout moment. Vous pouvez maintenant passer à l'étape 3 pour ajouter une fonctionnalité de recherche en texte intégral à votre application.