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:
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:
<html ng-app> <éad> ... <script src = "lib / angular / angular.js"> </ script> <script src = "js / contrôlers.js"> </ script> </ head> <body ng-controller = "phonelistctrl"> <ul> <li ng-repeat = "Phone dans les téléphones"> {}}}} <p> {{phone.snippet}} </p> </li> </ul> </ body> </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}}.
L'instruction ng-repeat = "téléphone dans les téléphones" à l'intérieur de la balise <li> est un itérateur 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.
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:
fonction phonelistctrl ($ scope) {$ scope.phones = [{"name": "Nexus s", "extrait": "Fast est devenu plus rapide avec Nexus S."}, {"Name": "Motorola xoom ™ avec Wi-Fi", "Snippet": "The Next, Next Generation Tablet."}, {"Name": "Motorola "Extrait": "La tablette suivante, suivante."}];}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:
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>.
Les données du téléphone 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:
décrire ('phonecat contrôleurs', function () {décrire ('phoneListctrl', function () {it ('devrait créer un modèle "téléphones" avec 3 téléphones', function () {var scope = {}, ctrl = new Phonelistctrl (scope);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:
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);
Ouvrez une nouvelle fenêtre de navigateur et accédez à http: // localhost: 9876;
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.
Exécutez ./scripts/test.sh pour tester.
Vous devriez voir des résultats similaires à ce qui suit:
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:
<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:
$ scope.hello = "Bonjour, monde!"
Mettez à jour votre navigateur et assurez-vous "bonjour, monde!" apparaît
Créez une table simple avec un itérateur:
<Bile> <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> </s table>Laissez maintenant le I de l'expression du modèle de données augmenter de 1:
<Bile> <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.
Ce qui précède est l'information triant le modèle AngularJS. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!