Sejauh ini, kami telah menggunakan tiga dataset rekaman seluler berkode keras. Sekarang kami menggunakan AngularJS layanan bawaan $ http untuk mendapatkan set data catatan seluler yang lebih besar. Kami akan menggunakan fungsi Injeksi Ketergantungan AngularJS (DI) untuk memberikan layanan AngularJS ini kepada pengontrol phonelistctrl.
Harap atur ulang direktori kerja:
checkout git -f Langkah -5
Segarkan browser dan Anda sekarang harus melihat daftar 20 ponsel.
Perbedaan terpenting antara Langkah 4 dan Langkah 5 tercantum di bawah ini. Anda dapat melihat perbedaan lengkap dalam GitHub.
data
File App/Phones/Phones.json dalam proyek Anda adalah dataset yang menyimpan daftar ponsel yang lebih besar dalam format JSON.
Berikut adalah contoh file ini:
[{"Age": 13, "ID": "Motorola-Defy-With-Motoblur", "Name": "Motorola Defy/U2122 dengan Motoblur/U2122", "Snippet": "Apakah Anda siap untuk segala hal yang hidup Anda lemparkan dengan cara Anda?" ...}, ...]Pengontrol
Kami menggunakan layanan AngularJS $ http di pengontrol untuk memulai permintaan HTTP ke server web Anda untuk mendapatkan data dari file app/phones/phones.json. $ http hanyalah salah satu dari banyak layanan bawaan di AngularJS yang dapat menangani operasi umum dari beberapa aplikasi web. AngularJS dapat menyuntikkan layanan ini di mana pun Anda membutuhkannya.
Layanan dikelola melalui Subsistem Injeksi Ketergantungan AngularJS. Layanan injeksi ketergantungan dapat membuat aplikasi web Anda dibangun dengan baik (seperti memisahkan komponen lapisan presentasi, data dan kontrol) dan digabungkan secara longgar (komponen tidak perlu menyelesaikan masalah ketergantungan antara komponen, semuanya ditangani oleh subsistem DI).
APP/JS/CONTROLER.JS
function phoneListCtrl ($ scope, $ http) {$ http.get ('phones/phones.json'). keberhasilan (fungsi (data) {$ scope.phones = data;}); $ scope.orderprop = 'usia';}$ HTTP memulai permintaan HTTP Get ke server web dan meminta telepon/phones.json (perhatikan bahwa URL relatif terhadap file index.html kami). Server merespons dengan data dari file JSON. (Respons ini dapat dihasilkan secara dinamis dari server backend secara real time. Tetapi untuk browser, mereka semua terlihat sama. Untuk kesederhanaan, kami hanya menggunakan file JSON dalam tutorial.)
Layanan $ http menggunakan kesuksesan untuk mengembalikan [respons objek] [Ng. $ Q]. Ketika respons asinkron tiba, fungsi respons objek ini digunakan untuk memproses data respons server dan menetapkan data ke model data Telepon Singkirkan. Saya perhatikan bahwa AngularJS akan secara otomatis mendeteksi respons JSON ini dan telah diuraikan untuk kita!
Untuk menggunakan layanan AngularJS, Anda hanya perlu mendeklarasikan nama layanan yang diperlukan sebagai parameter dalam konstruktor pengontrol, seperti ini:
fungsi phoneListCtrl ($ scope, $ http) {...}
Ketika pengontrol dibangun, injektor ketergantungan AngularJS menyuntikkan layanan ini ke dalam pengontrol Anda. Tentu saja, injektor ketergantungan juga akan menangani ketergantungan transitif apa pun bahwa layanan yang diperlukan mungkin ada (satu layanan biasanya akan tergantung pada layanan lain).
Perhatikan bahwa nama parameter sangat penting karena injektor akan menggunakannya untuk menemukan dependensi yang sesuai.
Kebiasaan penamaan awalan '$'
Anda dapat membuat layanan Anda sendiri, dan kami benar-benar akan mempelajarinya di Langkah 11. Sebagai kebiasaan penamaan, layanan bawaan AngularJS, metode lingkup, dan beberapa API AngularJS lainnya semuanya menggunakan awalan '$' sebelum namanya. Jangan gunakan awalan '$' untuk memberi nama layanan dan model Anda sendiri, jika tidak, nama konflik dapat terjadi.
Tentang kompresi JS
Karena AngularJS menyimpulkan nama layanan ketergantungan melalui nama parameter konstruktor pengontrol. Jadi, jika Anda ingin mengompres kode JS dari pengontrol PhoneListCtrl, semua parameternya akan dikompres pada saat yang sama. Pada saat ini, sistem injeksi ketergantungan tidak akan mengidentifikasi layanan dengan benar.
Untuk mengatasi masalah yang disebabkan oleh kompresi, cukup tentukan array yang tergantung pada pengidentifikasi layanan ke properti $ suntikan dalam fungsi pengontrol, seperti yang dikomentari baris terakhir:
Phonelistctrl. $ Inject = ['$ scope', '$ http'];
Metode lain juga dapat digunakan untuk menentukan daftar ketergantungan dan menghindari masalah kompresi - Gunakan array JavaScript untuk membangun pengontrol: Letakkan layanan yang akan disuntikkan ke dalam array string (mewakili nama ketergantungan), dan elemen terakhir dari array adalah fungsi metode pengontrol:
var phonelistctrl = ['$ scope', '$ http', function ($ scope, $ http) { / * body konstruktor * /}];
Kedua metode yang disebutkan di atas dapat bekerja dengan sempurna dengan fungsi apa pun yang dapat disuntikkan oleh AngularJS. Metode mana yang harus dipilih sepenuhnya tergantung pada gaya pemrograman proyek Anda. Disarankan untuk menggunakan metode array.
tes
uji/unit/controllerspec.js:
Karena kami sekarang menggunakan injeksi ketergantungan dan pengontrol kami juga berisi banyak layanan ketergantungan, agak rumit untuk membangun tes untuk pengontrol kami. Kita perlu menggunakan operasi baru dan memberikan beberapa implementasi semu untuk konstruktor termasuk $ http. Namun, metode yang disarankan (dan bahkan lebih sederhana) adalah membuat pengontrol di lingkungan pengujian, menggunakan metode yang sama seperti yang dilakukan AngularJS dalam skenario berikut:
jelaskan ('pengontrol phonecat', function () {gambarkan ('phoneListCtrl', function () {var scope, ctrl, $ httpbackend; sebelum reach (suntikan (fungsi (_ $ httpbackend_, $ rootcope, $ controller) {$ httpBackend = _ $ htpback $ httpbackend.ExpectGet ('PHONE/PHONE.JSON').Catatan: Karena kami memuat melati dan sudut-mock.js di lingkungan pengujian, kami memiliki dua metode pembantu, modul dan suntikan, untuk membantu kami mendapatkan dan mengkonfigurasi injektor.
Menggunakan metode berikut, kami membuat pengontrol di lingkungan pengujian:
Kami menggunakan metode injeksi untuk menyuntikkan $ rootscope, $ controller dan $ httpbackend instance layanan ke dalam fungsi sebelum kembali Jasmine. Contoh -contoh ini semua berasal dari injektor, tetapi injektor ini diciptakan kembali di dalam setiap tes. Ini memastikan bahwa setiap tes dimulai dari titik awal yang terkenal dan bahwa setiap tes tidak tergantung pada tes lain.
Hubungi $ rootscope. $ New () untuk membuat ruang lingkup baru untuk pengontrol kami.
Fungsi phoneListCtrl dan ruang lingkup yang baru saja dibuat dilewatkan sebagai parameter ke fungsi pengontrol $ yang disuntikkan.
Karena kode kami saat ini menggunakan layanan $ http untuk mendapatkan data daftar telepon di pengontrol sebelum membuat subscope phoneListCtrl, kita perlu memberi tahu suite tes untuk menunggu permintaan dari controller. Kita bisa melakukan ini:
Menyuntikkan layanan permintaan $ httpbackend ke fungsi sebelum kembali kami. Ini adalah versi semu dari layanan ini, melakukan hal itu membantu menangani semua permintaan XHR dan JSONP di lingkungan produk. Versi pseudo dari layanan ini memungkinkan Anda untuk menulis tes tanpa mempertimbangkan API asli dan negara -negara global - siapa pun dapat merupakan mimpi buruk untuk pengujian.
Gunakan metode $ httpbackend.ExpectGet untuk memberi tahu layanan $ httpbackend untuk menunggu permintaan HTTP dan memberi tahu bagaimana meresponsnya. Perhatikan bahwa respons tidak akan dikeluarkan sampai kami memanggil metode $ httpbackend.flush.
Sekarang,
itu ('harus membuat model "phones" dengan 2 ponsel diambil dari xhr', function () {harapkan (scope.phones) .tobeundefined (); $ httpbackend.flush (); harapkan (scope.phones) .toequal ([{name: 'nexus s'}, {name: 'motorola ({{{{{nexus s'), {name: {name: {name: {name: 'Di browser, kami memanggil $ httpbackend.flush () untuk menghapus antrian permintaan (flush). Ini akan memungkinkan janji yang dikembalikan oleh layanan $ http (lihat di sini untuk apa janji itu) untuk ditafsirkan sebagai respons standar.
Kami mengatur beberapa pernyataan untuk memverifikasi bahwa model data ponsel sudah dalam ruang lingkup.
Akhirnya, kami memverifikasi bahwa nilai default orderProp diatur dengan benar:
itu ('harus mengatur nilai default model orderProp', function () {harapkan (scope.orderprop) .tobe ('usia');});praktik
Tambahkan {{phones | json}} mengikat di akhir index.html dan amati daftar ponsel dalam format JSON.
Dalam pengontrol PhoneListCtrl, preprocess respons HTTP sehingga hanya lima daftar telepon pertama yang ditampilkan. Gunakan kode berikut dalam fungsi panggilan balik $ http:
$ scope.phones = data.splice (0, 5);
Meringkaskan
Sekarang Anda harus merasakan betapa mudahnya menggunakan layanan AngularJS (ini semua berkat mekanisme injeksi ketergantungan dari layanan AngularJS), lanjutkan ke langkah 6 dan Anda akan menambahkan thumbnail dan tautan ke ponsel Anda.
Terima kasih atas dukungan Anda untuk situs web ini dan terus memperbarui artikel terkait di masa mendatang!