Dans cette étape, vous implémenterez la vue des détails du téléphone, qui sera affichée lorsque l'utilisateur clique sur un téléphone dans la liste de téléphones.
Veuillez réinitialiser le répertoire de travail:
Git Checkout -F Étape 8
Maintenant, lorsque vous cliquez sur un téléphone dans la liste, la page d'informations détaillée du téléphone s'affichera.
Afin d'implémenter la vue sur les détails du téléphone mobile, nous utiliserons $ http pour obtenir les données, et nous ajouterons également un modèle de vue de téléphone-dete-Detail.html.
Les différences les plus importantes entre l'étape 7 et l'étape 8 sont répertoriées ci-dessous. Vous pouvez voir la différence complète dans GitHub.
données
En plus de Phones.json, l'application / téléphones / répertoire contient également le fichier JSON pour chaque information de téléphone mobile.
app / téléphones / nexus-s.json (fragment d'échantillon)
{"AdditionalFeatures": "Affichage des contour, Narg Field Communications (NFC), ...", "Android": {"OS": "Android 2.3", "UI": "Android"}, ... "Images": ["img / phones / nexus-s.0.jpg", "img / phones / nexus-s.1.jpg",, ", "IMG / Phones / Nexus-S.2.jpg", "IMG / Phones / Nexus-S.3.jpg"], "Storage": {"Flash": "16384MB", "RAM": "512MB"}}Chacun de ces fichiers décrit différentes propriétés d'un téléphone en utilisant la même structure de données. Nous affichons ces données dans la vue Détails du téléphone.
Contrôleur
Nous utilisons le service $ http pour obtenir des données pour étendre notre phonelistCtrl. C'est la même chose que le contrôleur de liste de téléphones précédents fonctionne.
app / js / contrôlers.js
fonction phoneDetailctrl ($ scope, $ routeParams, $ http) {$ http.get ('téléphones /' + $ routeparams.phoneid + '.json'). Success (function (data) {$ scope.phone = data;});} // phoneDetailctrl. $ inject = ['$ scope' '$ http'];Afin de construire l'URL de la demande HTTP, nous devons extraire $ RouteParams.PhoneId à partir de l'itinéraire actuel fourni par le service de route $.
modèle
La ligne d'espace réservée TBD d'origine dans le fichier Phone-Detail.html a été remplacée par la liste et la liaison qui constitue les informations détaillées du téléphone. Notez que nous utilisons ici les balises {{expression}} d'AngularJS et NGrepeat pour rendre le modèle de données dans la vue.
application / partiels / téléphone-detail.html
<img ng-src = "{{phone.images [0]}}"> <h1> {{phone.name}} </h1> <p> {{phone.description}} </p> <ul> <li ng-repeat = "img} </li></ul> <ul> <li> <span> Disponibilité et réseaux </span> <dl> <dt> Disponibilité </dt> <dd ng-repeat = "Disponibilité dans Phone.availability"> {{Disponibilité}} </span> </dl> </li> ... </li> <pan> Caractéristiques supplémentaires </panne> <dd> {{téléphone.additionalfeures}} </dd> </li> </ul>test
Écrivons un nouveau test unitaire, qui est très similaire à celui que nous avons écrit pour PhonelistCtrl à l'étape 5.
test / unité / contrôleursSpec.js
... décrire ('phoneDeTailCtrl', function () {var scope, $ httpbackend, ctrl; avant l'enseignement (inject (function (_ $ httpbackend_, $ rootscope, $ rateparams, $ contrôleur) {$ httpbackend = _ $ httpackend_; $ httpbackend.expectget ('téléphones / xyz.json'). {attendre (Scope.Phone) .tobeUndEfined (); $ httpbackend.flush ();Exécutez le script ./scripts/test.sh pour exécuter le test, vous devriez voir la sortie suivante:
Chrome: réinitialisation du coureur .... Total 3 tests (passé: 3; échoue: 0; erreurs: 0) (5,00 ms) Chrome 19.0.1084.36 Mac OS: Exécutez 3 tests (passé: 3; échoue: 0; erreurs 0) (5,00 ms)
Dans le même temps, nous avons également ajouté un test de bout en bout, pointant vers la page Détails du téléphone de Nexus et vérifiant que la tête de la page est "Nexus S".
test / e2e / scénarios.js
... décrire ('Affiche de détail du téléphone', function () {beforeEach (function () {Browser (). Navigateto ('../../ app / index.html # / téléphones / nexus-s');}); it ('devrait afficher la page NEXUS-S', fonction () {attendre (binding ('téléphone);).Vous pouvez maintenant actualiser votre navigateur et exécuter à nouveau le test de bout en bout, ou vous pouvez l'exécuter sur le serveur AngularJS.
pratique
Écrivez un test à l'aide de l'API de test de bout en bout AngularJS pour vérifier les quatre miniatures que nous affichons sur la page Détails du Nexus.
Résumer
Maintenant que la page Détails du téléphone mobile est prête, à l'étape 9, nous apprendrons à rédiger un filtre d'affichage.
Ce qui précède est les informations sur les modèles plus angularjs. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!