Pada langkah ini, Anda akan menambahkan thumbnail dan beberapa tautan ke daftar telepon, tetapi tautan ini belum berfungsi. Selanjutnya Anda akan menggunakan tautan ini untuk menampilkan informasi tambahan di ponsel Anda dalam kategori.
Harap atur ulang direktori kerja:
checkout git -f Langkah -6
Sekarang Anda harus dapat melihat gambar dan tautan ponsel Anda dalam daftar.
Perbedaan paling penting antara Langkah 5 dan Langkah 6 tercantum di bawah ini. Anda dapat melihat perbedaan lengkap dalam GitHub.
data
Perhatikan bahwa file phones.json sekarang berisi pengidentifikasi unik dan tautan gambar ke setiap telepon. URL ini sekarang menunjuk ke Aplikasi/IMG/Ponsel/Direktori.
APP/PHONE/PHONES.JSON (Fragmen Sampel)
[{... "id": "Motorola-defy-with-motoblur", "ImageUrl": "IMG/PHONES/MOTOROLA-Defy-with-motoblur.0.jpg", "Name": "Motorola Defy/U2122 dengan MotoBlur/U2122", ...}, ...templat
app/index.html
... <ul> <li ng-repeat = "Telepon di Ponsel | Filter: Query | orderby: orderprop"> <a href = "#/phones/{{phone.id}}"> <mmg ng-src = "{{phone.imageUrl}}"> </a> <a href = "#/phones/{{phone.id}}"> {{phone.name}} </a> <p> {{phone.snippet}} </p> </li> </ul> ...Tautan ini akan menunjuk ke halaman detail setiap telepon di masa mendatang. Namun, untuk menghasilkan tautan ini, kami menggunakan pengikatan data bracket ganda yang sudah kami kenal di atribut HREF. Pada langkah 2, kami menambahkan {{phone.name}} mengikat sebagai konten elemen. Pada langkah ini, kami menggunakan {{{phone.id}} mengikat di atribut elemen.
Kami juga menambahkan gambar ponsel ke setiap rekaman, cukup gunakan arahan NGSRC alih -alih tag atribut <mmg> SRC. Jika kita hanya menggunakan atribut SRC normal untuk mengikat (<img src = "{{phone.imageUrl}}">), browser akan secara langsung menginterpretasikan tag AngularJS {{{localhost: 8000/{{{{{{{{{{{{{{{{{{{{{{{ilegal. Karena ketika browser memuat halaman, ia juga meminta untuk memuat gambar, AngularJS hanya memulai kompilasi saat halaman dimuat - ketika browser meminta untuk memuat gambar {{phone.imageUrl}} belum dikompilasi! Situasi ini akan dihindari dengan arahan NGSRC ini, dan browser akan menggunakan Petunjuk NGSRC untuk mencegah permintaan ke alamat ilegal.
tes
tes/e2e/skenario.js
... itu ('harus membuat telepon tautan spesifik', function () {input ('kueri'). enter ('nexus'); elemen ('. Telepon li a'). klik (); harapkan (browser (). Lokasi ().Kami menambahkan tes ujung ke ujung baru untuk memverifikasi bahwa aplikasi menghasilkan tautan yang benar untuk tampilan seluler, dan di atas adalah implementasi kami.
Anda sekarang dapat menyegarkan browser Anda dan menggunakan tester ujung ke ujung untuk mengamati tes yang berjalan, atau Anda dapat menjalankannya di server AngularJS.
praktik
Ubah arahan NG-SRC ke atribut SRC normal. Menggunakan alat -alat seperti Firebug, Inspektur Web Chrome, atau melihat langsung pada log akses server, Anda akan menemukan bahwa aplikasi Anda mengirimkan permintaan ilegal ke /app/%7b%7bphone.imageurl%7D%7D (atau /papp/{phone.mageurl}}).
Masalah ini adalah karena browser akan segera mengirim permintaan ke alamat URL yang belum dikompilasi saat menemukan tag IMG. AngularJs hanya akan mulai menyusun ekspresi setelah halaman dimuat untuk mendapatkan alamat URL gambar yang benar.
Meringkaskan
Sekarang setelah Anda menambahkan gambar dan tautan ponsel Anda, lanjutkan ke Langkah 7, kami akan belajar tentang templat tata letak AngularJS dan bagaimana AngularJS dapat dengan mudah memberikan banyak tampilan untuk aplikasi Anda.
Di atas adalah kompilasi informasi tentang tautan AngularJS dan templat gambar. Kami akan terus menambahkan pengetahuan yang relevan di masa depan. Terima kasih atas dukungan Anda untuk situs ini!