Dans cette étape, vous ajouterez des miniatures et quelques liens vers la liste de téléphones, mais ces liens ne fonctionneront pas encore. Ensuite, vous utiliserez ces liens pour afficher des informations supplémentaires sur votre téléphone dans les catégories.
Veuillez réinitialiser le répertoire de travail:
Git Checkout -F Étape-6
Vous devriez maintenant pouvoir voir les photos et les liens de votre téléphone dans la liste.
Les différences les plus importantes entre l'étape 5 et l'étape 6 sont répertoriées ci-dessous. Vous pouvez voir la différence complète dans GitHub.
données
Notez que le fichier Phones.json contient désormais un identifiant unique et un lien d'image vers chaque téléphone. Ces URL pointent désormais vers l'application / img / téléphones / répertoire.
app / téléphones / téléphones.json (fragment d'échantillon)
[{... "id": "Motorola-defy-with-moblur", "imageurl": "img / téléphones / moteur-defy-with-moblur.0.jpg", "name": "Motorola Defy / U2122 avec MotoBlur / U2122" ", ...}, ...]modèle
app / index.html
... <ul> <li ng-repeat = "Phone dans les téléphones | Filtre: Query | OrderBy: OrderProp"> <a href = "# / téléphones / {{phone.id}}"> <img ng-src = "{{phone.imageUrl}}"> </a> <a href = "# / téléphones / {{phone.id}}"> {{phone.name}} </a> <p> {{phone.snippet}} </p> </li> </ul> ...Ces liens indiqueront la page de détails de chaque téléphone à l'avenir. Cependant, afin de générer ces liens, nous utilisons la liaison des données à double branche que nous connaissons déjà dans l'attribut HREF. À l'étape 2, nous avons ajouté la liaison {{phone.name}} comme contenu d'élément. Dans cette étape, nous utilisons la liaison {{phone.id}} dans l'attribut d'élément.
Nous ajoutons également des images de téléphone mobile à chaque enregistrement, utilisons simplement la directive NGSRC au lieu de la balise d'attribut <MG> SRC. Si nous n'utilisons qu'un attribut SRC normal pour bind (<img src = "{{phone.imageUrl}}">), le navigateur interprétera directement la balise angularjs {{expression}} et initiera une demande à l'urlhttp illégal: // localhost: 8000 / app / {{phone.imageurl}}. Étant donné que lorsque le navigateur charge la page, il demande également à charger l'image, AngularJS commence la compilation uniquement lorsque la page est chargée - lorsque le navigateur demande de charger l'image {{Phone.imageUrl}} n'a pas encore été compilé! Cette situation sera évitée avec cette directive NGSRC, et le navigateur utilisera la directive NGSRC pour empêcher une demande d'adresse illégale.
test
test / e2e / scénarios.js
... it ('devrait rendre des liens spécifiques au téléphone', function () {input ('query'). Entrée ('nexus'); élément ('. Phones li a'). cliquez (); attendre (Browser (). Location (). Url ()). Tobe ('/ Phones / Nexus-s');}); ...Nous avons ajouté un nouveau test de bout en bout pour vérifier que l'application génère le lien correct pour la vue mobile, et ci-dessus est notre implémentation.
Vous pouvez désormais actualiser votre navigateur et utiliser un testeur de bout en bout pour observer les tests en cours d'exécution, ou vous pouvez les exécuter sur un serveur AngularJS.
pratique
Modifiez la directive NG-SRC en l'attribut SRC normal. À l'aide d'outils comme Firebug, Chrome Web Inspector ou en regardant directement le journal d'accès du serveur, vous constaterez que votre application envoie une demande illégale à /App/%7B%7BPhone.imageUrl%7D%7D (ou /App/{phone.imageurl}}).
Ce problème est dû au fait que le navigateur enverra immédiatement une demande à l'adresse URL qui n'a pas encore été compilée lors de la rencontre de la balise IMG. AngularJS ne commencera à compiler l'expression que après la charge de la page pour obtenir l'adresse d'URL d'image correcte.
Résumer
Maintenant que vous avez ajouté les photos et les liens de votre téléphone, passez à l'étape 7, nous en apprendre davantage sur les modèles de mise en page AngularJS et comment AngularJS peut facilement fournir plusieurs vues pour votre application.
Ce qui précède est une compilation des informations sur les liens AngularJS et les modèles d'image. Nous continuerons d'ajouter des connaissances pertinentes à l'avenir. Merci pour votre soutien à ce site!