Il est temps de donner à ces pages Web des fonctionnalités dynamiques - utilisez AngularJS! Nous avons ajouté un test pour que le contrôleur soit ajouté plus tard.
Il existe de nombreux types d'architectures de code pour une application. Pour les applications AngularJS, nous encourageons l'utilisation du mode Model-View-Controller (MVC) pour découpler le code et séparer les préoccupations. Dans cet esprit, nous utilisons AngularJS pour ajouter certains modèles, vues et contrôleurs à notre application.
Veuillez réinitialiser le répertoire de travail:
La copie de code est la suivante:
Git Checkout -f étape-2
Notre application a maintenant 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 aller à GitHub pour voir la différence complète.
Vues et modèles
Dans AngularJS, une vue est une cartographie une fois le modèle rendu via des modèles HTML **. Cela signifie que peu importe lorsque le modèle change, AngularJS mettra à jour les points de jonction en temps réel et mettra à jour la vue.
Par exemple, le composant de vue est construit par AngularJS en utilisant le modèle suivant:
La copie de code est la suivante:
<html ng-app>
<adal>
...
<script src = "lib / angular / angular.js"> </ script>
<script src = "js / contrôlers.js"> </ script>
</ head>
<Body ng-Controller = "PhonelistCtrl">
<ul>
<li ng-repeat = "téléphone dans les téléphones">
{{phone.name}}
<p> {{phone.snippet}} </p>
</li>
</ul>
</docy>
</html>
Nous venons de remplacer la liste des téléphones mobiles codés statistiquement car nous pouvons réaliser le même effet en utilisant la directive NGrepeat et deux expressions angularjs enveloppées dans des accolades bouclées - {{phone.name}} et {{phone.snippet}}.
1. L'instruction ng-repeat = "Phone dans Téléphones" dans la balise <li> est un iterator angularjs. Cet itérateur dit à AngularJS d'utiliser la première balise <li> comme modèle pour créer un élément <li> pour chaque téléphone de la liste.
2. Comme nous l'avons appris à l'étape 0, les accolades bouclées enroulées autour de Phone.Name et Phone.Snippet identifient la liaison des données. Contrairement aux calculs constants, l'expression ici est en fait une référence de modèle de données que nous avons appliquée, et nous les avons définies dans le contrôleur PhonelistCtrl.
Modèles et contrôleurs
Le modèle de données est initialisé dans le contrôleur PhoneListCtrl (voici juste une fonction contenant un tableau, et les objets stockés dans le tableau sont des données mobiles):
app / js / contrôleur.js:
La copie de code est la suivante:
fonction phonelistctrl ($ scope) {
$ scope.phones = [
{"name": "Nexus S",
"Snippet": "Fast vient de devenir plus rapide avec Nexus S."},
{"Name": "Motorola Xoom ™ avec Wi-Fi",
"Extrait": "La tablette suivante et prochaine."},
{"Name": "Motorola Xoom ™",
"Extrait": "La tablette suivante et prochaine."}
]]
}
Bien que le contrôleur ne semble pas jouer un rôle très important, il joue un rôle crucial ici. Compte tenu du contexte de notre modèle de données, le contrôleur nous permet d'établir une liaison de données entre le modèle et la vue. C'est ainsi que nous lions la couche de présentation, les données et les composants logiques:
1. PhoneListctrl - Le nom de la méthode du contrôleur (dans JS File Controders.js) correspond à la valeur de la directive NGController dans la balise <body>.
2. Les données du téléphone mobile sont désormais associées à la portée ($ SCOPE) injectée dans notre fonction de contrôleur. Lorsque l'application démarre, une portée racine est créée et la portée du contrôleur est un successeur typique de la portée racinaire. La portée de ce contrôleur est valide pour les liaisons de données à l'intérieur de toutes les balises <corps ng-contrôleur = "phoneListctrl">.
La théorie de la portée d'AngularJS est très importante: une portée peut être considérée comme un bonder pour les modèles, les modèles et les contrôleurs pour travailler ensemble. AngularJS utilise des lunettes, ainsi que des informations, des modèles de données et des contrôleurs dans les modèles. Ceux-ci peuvent aider à séparer le modèle et la vue, mais ils sont en effet synchronisés! Toute modification apportée au modèle sera immédiatement reflétée sur la vue; Toute modification apportée à la vue sera immédiatement reflétée dans le modèle.
Pour une compréhension plus approfondie de la portée AngularJS, veuillez vous référer à la documentation de la portée AngularJS.
test
La "méthode AngularJS" facilite le test du code pendant le développement. Jetons un coup d'œil au test unitaire suivant nouvellement ajouté pour le contrôleur:
test / unité / contrôlerspec.js:
La copie de code est la suivante:
décrire ('phonecat contrôleurs', function () {
décrire ('phonelistctrl', function () {
Il ('devrait créer un modèle "téléphones" avec 3 téléphones', function () {
var scope = {},
ctrl = nouveau phonélistctrl (portée);
attendre (scope.phones.length) .tobe (3);
});
});
});
Ce test vérifie qu'il y a trois enregistrements dans notre tableau de téléphonie mobile (pas besoin de comprendre ce script de test pour le moment). Cet exemple montre à quel point il est facile de créer un test unitaire pour le code AngularJS. Parce que les tests sont un élément essentiel du développement de logiciels, 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 dans le cadre de développement du comportement du jasmin (BBD). Bien qu'AngularJS ne vous force pas à utiliser le jasmin, tous les tests que nous avons dans le tutoriel sont écrits en jasmin. Vous pouvez obtenir des connaissances pertinentes sur la page d'accueil officielle de Jasmine ou sur le wiki du jasmin.
Les projets basés sur AngularJS sont préconfigurés pour utiliser 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 entrer ./scripts/test-server.bat sur la ligne de commande Windows pour exécuter le script et les commandes de script exécutées de la manière suivante);
2. Ouvrez une nouvelle fenêtre de navigateur et allez sur http: // localhost: 9876;
3. Sélectionnez "Capturez ce navigateur en mode strict".
Pour le moment, vous pouvez laisser votre fenêtre tranquille et l'oublier. Jstestdriver terminera le test et sortira les résultats de votre terminal.
4. Exécutez ./scripts/test.sh pour tester.
Vous devriez voir des résultats similaires à ce qui suit:
La copie de code est la suivante:
Chrome: Runner Reset.
.
Total 1 tests (passé: 1; échoue: 0; erreurs: 0) (2,00 ms)
Chrome 19.0.1084.36 Mac OS: Exécutez 1 tests (passé: 1; échoue: 0; erreurs 0) (2,00 ms)
Ouais! Le test a réussi! Ou non ... Remarque: si une erreur se produit après avoir exécuté le test, fermez le navigateur et revenez au terminal et fermez le script, puis répétez les étapes ci-dessus.
pratique
Ajoutez une autre liaison de données pour index.html. Par exemple:
La copie de code est la suivante:
<p> Nombre total de téléphones: {{téléphones.length}} </p>
Créez une nouvelle propriété de modèle de données et liez-la au modèle. Par exemple:
La copie de code est la suivante:
$ scope.hello = "Bonjour, monde!"
Mettez à jour votre navigateur et assurez-vous "bonjour, monde!" apparaît
Créez une table simple avec un itérateur:
La copie de code est la suivante:
<ballage>
<tr> <th> Numéro de ligne </th> </tr>
<tr ng-repeat = "i in [0, 1, 2, 3, 4, 5, 6, 7]"> <td> {{i}} </td> </tr>
</ table>
Laissez maintenant le I de l'expression du modèle de données augmenter de 1:
La copie de code est la suivante:
<ballage>
<tr> <th> Numéro de ligne </th> </tr>
<tr ng-repeat = "i in [0, 1, 2, 3, 4, 5, 6, 7]"> <td> {{i + 1}} </td> </tr>
</ table>
Assurez-vous de changer TOBE (3) à Tobe (4), puis exécuter le script ./scripts/test.sh
Résumer
Vous avez maintenant une application dynamique du modèle, de la vue, de la séparation du contrôleur, et vous testez toujours. Maintenant, vous pouvez passer à l'étape 3 pour ajouter une fonction de recherche en texte intégral à l'application.