Lebih banyak templat untuk tutorial pengantar AngularJS

Pada langkah ini, Anda akan menerapkan tampilan Detail Telepon, yang akan ditampilkan ketika pengguna mengklik telepon di daftar telepon.

Harap atur ulang direktori kerja:

git checkout -f Langkah -8

Sekarang ketika Anda mengklik telepon di daftar, halaman informasi terperinci dari telepon akan ditampilkan.

Untuk mengimplementasikan tampilan detail ponsel, kami akan menggunakan $ http untuk mendapatkan data, dan kami juga akan menambahkan template tampilan telepon-detail.html.

Perbedaan terpenting antara Langkah 7 dan Langkah 8 tercantum di bawah ini. Anda dapat melihat perbedaan lengkap dalam GitHub.

data

Selain Phones.json, aplikasi/ ponsel/ direktori juga berisi file JSON untuk setiap informasi ponsel.

APP/PHONES/NEXUS-S.JSON (Fragmen Sampel)

 { "additionalFeatures": "Contour Display, Near 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/PHONE/NEXUS-S.3.JPG"], "Storage": {"Flash": "16384MB", "RAM": "512MB"}}

Masing -masing file ini menjelaskan berbagai properti ponsel menggunakan struktur data yang sama. Kami menampilkan data ini di tampilan Detail Telepon.

Pengontrol

Kami menggunakan layanan $ http untuk mendapatkan data untuk memperluas phoneListCtrl kami. Ini adalah cara yang sama dengan pengontrol daftar telepon sebelumnya bekerja.

APP/JS/CONTROLER.JS

 Fungsi phonedetailctrl ($ scope, $ routeParams, $ http) {$ http.get ('phones/' + $ routeParams.phoneid + '.json'). Sukses (function (data) {$ scope.phone = data;});} // phonedetailctrl. '$ http'];

Untuk membangun URL permintaan HTTP, kita perlu mengekstrak $ routeParams.phoneid dari rute saat ini yang disediakan oleh layanan $ rute.

templat

Baris placeholder TBD asli di file telepon-detail.html telah digantikan oleh daftar dan ikatan yang merupakan informasi terperinci telepon. Perhatikan bahwa di sini kami menggunakan tag {{{ekspresi}} dan ngrepeat untuk membuat model data dalam tampilan.

Aplikasi/Partials/Telepon-Detail.html

 <img ng-src = "{{phone.images [0]}}"> <h1> {{phone.name}} </h1> <p> {{phone.description}} </p> <ul> <li ng-repeat = "iMg in phone. </li></ul> <ul> <li> <span> Ketersediaan dan jaringan </span> <dl> <dt> ketersediaan </dt> <dd ng-repeat = "ketersediaan di phone.availability"> {{fitur}} </dd> </dl> </li> </li> </li> </li> </li> </li> </li> </li> </li> Fitur Tambahan </Dl> </li> </li> </li> </li> </li> </li> <dd> {{phone.additionalfeatures}} </dd> </li> </ul>

tes

Mari kita tulis tes unit baru, yang sangat mirip dengan yang kami tulis untuk phoneListCtrl pada langkah 5.

Tes/Unit/Controllersspec.js

 ... jelaskan ('phoneDetailCtrl', function () {var scope, $ httpbackend, ctrl; sebelum kembali (inject (function (_ $ httpbackend_, $ rootscope, $ routeParams, $ controller) {$ httpbackend = _ $ httpbackend_; $ httpbackend.ExpectGet ('Telepon/xyz.json'). {scope.phone) .tobeundefined ();

Jalankan skrip ./scripts/test.sh untuk menjalankan tes, Anda akan melihat output berikut:

 Chrome: Runner Reset .... Total 3 Tes (Lulus: 3; Gagal: 0; Kesalahan: 0) (5.00 ms) Chrome 19.0.1084.36 Mac OS: Jalankan 3 tes (lulus: 3; Gagal: 0; kesalahan 0) (5.00 ms)

Pada saat yang sama, kami juga menambahkan tes ujung ke ujung, menunjuk ke halaman detail telepon Nexus dan memverifikasi bahwa kepala halaman adalah "Nexus S".

tes/e2e/skenario.js

 ... jelaskan ('Tampilan Detail Telepon', Function () {sebelum kembali (function () {browser (). navigateTo ('../../ app/index.html#/phones/nexus-s');}); itu ('harus menampilkan nexus-s page', function () {hare

Anda sekarang dapat menyegarkan browser Anda dan menjalankan tes ujung ke ujung lagi, atau Anda dapat menjalankannya di server AngularJS.

praktik

Tulis tes menggunakan AngularJS end-to-end test API untuk memverifikasi empat thumbnail yang kami tampilkan di halaman detail Nexus.

Meringkaskan

Sekarang halaman detail ponsel sudah siap, pada langkah 9 kita akan belajar cara menulis filter tampilan.

Di atas adalah informasi tentang lebih banyak template AngularJS. Kami akan terus menambahkan informasi yang relevan di masa mendatang. Terima kasih atas dukungan Anda untuk situs ini!