Saatnya memberi halaman web ini beberapa fitur dinamis - Gunakan AngularJS! Kami telah menambahkan tes untuk pengontrol yang akan ditambahkan nanti.
Ada banyak jenis arsitektur kode untuk suatu aplikasi. Untuk aplikasi AngularJS, kami mendorong penggunaan mode Model-View-Controller (MVC) untuk memisahkan kode dan memisahkan kekhawatiran. Dengan pemikiran ini, kami menggunakan AngularJS untuk menambahkan beberapa model, tampilan, dan pengontrol ke aplikasi kami.
Harap atur ulang direktori kerja:
Salinan kode adalah sebagai berikut:
git checkout -f step -2
Aplikasi kami sekarang memiliki daftar tiga ponsel.
Perbedaan terpenting antara Langkah 1 dan Langkah 2 tercantum di bawah ini. Anda dapat pergi ke GitHub untuk melihat perbedaan lengkapnya.
Tampilan dan Template
Dalam AngularJS, tampilan adalah pemetaan setelah model diterjemahkan melalui templat HTML **. Ini berarti bahwa tidak peduli kapan model berubah, AngularJS akan memperbarui titik persimpangan secara real time dan memperbarui tampilan.
Misalnya, komponen tampilan dibangun oleh AngularJS menggunakan template berikut:
Salinan kode adalah sebagai berikut:
<html ng-app>
<head>
...
<skrip src = "lib/angular/angular.js"> </cript>
<Script src = "js/controllers.js"> </script>
</head>
<body ng-controller = "phoneListCtrl">
<ul>
<li ng-repeat = "phone in phones">
{{phone.name}}
<p> {{phone.snippet}} </p>
</li>
</ul>
</body>
</html>
Kami baru saja mengganti daftar ponsel yang dikodekan secara statis karena kami dapat mencapai efek yang sama menggunakan NgRepeat Directive dan dua ekspresi AngularJS yang dibungkus dengan kawat gigi keriting - {{phone.name}} dan {{phone.snippet}}.
1. Pernyataan NG-Repeat = "Telepon di Ponsel" di tag <li> adalah iterator AngularJS. Iterator ini memberi tahu AngularJS untuk menggunakan tag <li> pertama sebagai templat untuk membuat elemen <li> untuk setiap telepon dalam daftar.
2. Seperti yang kami pelajari di langkah 0, kawat gigi keriting melilit telepon. Tidak seperti perhitungan konstan, ekspresi di sini sebenarnya adalah referensi model data yang kami terapkan, dan kami telah mengaturnya di pengontrol phoneListCtrl.
Model dan pengontrol
Model data diinisialisasi dalam pengontrol phoneListCtrl (di sini hanya fungsi yang berisi array, dan objek yang disimpan dalam array adalah daftar data seluler):
APP/JS/CONTROLER.JS:
Salinan kode adalah sebagai berikut:
fungsi phoneListCtrl ($ scope) {
$ scope.phones = [
{"name": "nexus s",
"Cuplikan": "Cepat hanya menjadi lebih cepat dengan Nexus S."},
{"Name": "Motorola Xoom ™ dengan Wi-Fi",
"Snippet": "Tablet Generasi Berikutnya."},
{"Name": "Motorola Xoom ™",
"Cuplikan": "Tablet Generasi Berikutnya."}
];
}
Meskipun pengontrol tampaknya tidak memainkan peran yang sangat penting, ia memainkan peran penting di sini. Mengingat konteks model data kami, pengontrol memungkinkan kami untuk membuat ikatan data antara model dan tampilan. Beginilah cara kami menghubungkan lapisan presentasi, data, dan komponen logika:
1. PhoneListCtrl - Nama metode pengontrol (dalam pengontrol file JS.js) cocok dengan nilai arahan NgController dalam tag <body>.
2. Data ponsel sekarang dikaitkan dengan ruang lingkup ($ lingkup) yang disuntikkan ke fungsi pengontrol kami. Ketika aplikasi dimulai, ruang lingkup root dibuat, dan ruang lingkup controller adalah penerus khas ruang lingkup root. Ruang lingkup pengontrol ini valid untuk binding data di dalam semua <body ng-controller = "phoneListCtrl"> tag.
Teori ruang lingkup AngularJS sangat penting: ruang lingkup dapat dianggap sebagai bonder untuk templat, model, dan pengontrol untuk bekerja bersama. AngularJS menggunakan lingkup, serta informasi, model data dan pengontrol dalam templat. Ini dapat membantu memisahkan model dan tampilan, tetapi mereka memang disinkronkan! Setiap perubahan pada model akan segera tercermin pada tampilan; Setiap perubahan pada tampilan akan segera tercermin dalam model.
Untuk pemahaman yang lebih mendalam tentang lingkup AngularJS, silakan merujuk ke dokumentasi lingkup AngularJS.
tes
"Metode AngularJS" membuatnya sangat mudah untuk menguji kode selama pengembangan. Mari kita lihat tes unit berikut yang baru ditambahkan untuk pengontrol:
Tes/Unit/Controllersspec.js:
Salinan kode adalah sebagai berikut:
jelaskan ('pengontrol phoneCat', function () {
jelaskan ('phoneListCtrl', function () {
itu ('harus membuat model "ponsel" dengan 3 ponsel', function () {
var scope = {},
ctrl = phonelistctrl baru (lingkup);
harapkan (scope.phones.length) .tobe (3);
});
});
});
Tes ini memverifikasi bahwa ada tiga catatan dalam array ponsel kami (tidak perlu memahami skrip tes ini untuk saat ini). Contoh ini menunjukkan betapa mudahnya membuat tes unit untuk kode AngularJS. Karena pengujian adalah bagian penting dari pengembangan perangkat lunak, kami memudahkan untuk membangun tes di AngularJS untuk mendorong pengembang untuk menulis lebih banyak.
Saat menulis tes, pengembang AngularJS cenderung menggunakan sintaks dalam kerangka pengembangan perilaku melati (BBD). Meskipun AngularJS tidak memaksa Anda untuk menggunakan Jasmine, semua tes yang kami miliki dalam tutorial ditulis dalam melati. Anda bisa mendapatkan pengetahuan yang relevan tentang beranda resmi Jasmine atau di Wiki Jasmine.
Proyek berbasis AngularJS telah dikonfigurasi sebelumnya untuk menggunakan JStestDriver untuk menjalankan tes unit.
Anda dapat menjalankan tes seperti ini:
1. Pada terminal terpisah, masukkan direktori Angular-Phonecat dan jalankan ./scripts/test-server.sh untuk memulai tes (silakan masukkan ./scripts/test-server.bat pada baris perintah Windows untuk menjalankan skrip, dan perintah skrip dijalankan dengan cara berikut);
2. Buka jendela browser baru dan pergi ke http: // localhost: 9876;
3. Pilih "Tangkap browser ini dalam mode ketat".
Saat ini, Anda dapat meninggalkan jendela sendirian dan melupakannya. JStestDriver akan menyelesaikan tes dan mengeluarkan hasilnya ke terminal Anda.
4. Jalankan ./scripts/test.sh untuk menguji.
Anda harus melihat hasil yang mirip dengan yang berikut:
Salinan kode adalah sebagai berikut:
Chrome: Runner Reset.
.
Total 1 tes (lulus: 1; Gagal: 0; Kesalahan: 0) (2.00 ms)
Chrome 19.0.1084.36 Mac OS: Jalankan 1 Tes (Lulus: 1; Gagal: 0; Kesalahan 0) (2.00 ms)
Ya! Tes lulus! Atau tidak ... Catatan: Jika kesalahan terjadi setelah Anda menjalankan tes, tutup browser dan kembali ke terminal dan tutup skrip, lalu ulangi langkah -langkah di atas.
praktik
Tambahkan ikatan data lain untuk index.html. Misalnya:
Salinan kode adalah sebagai berikut:
<p> Jumlah total ponsel: {{phones.length}} </p>
Buat properti model data baru dan ikat ke templat. Misalnya:
Salinan kode adalah sebagai berikut:
$ scope.hello = "Halo, dunia!"
Perbarui browser Anda dan pastikan "Halo, Dunia!" muncul
Buat tabel sederhana dengan iterator:
Salinan kode adalah sebagai berikut:
<able>
<tr> <th> Nomor baris </th> </tr>
<tr ng-repeat = "i di [0, 1, 2, 3, 4, 5, 6, 7]"> <td> {{i}} </td> </tr>
</boable>
Sekarang biarkan I dari ekspresi model data meningkat sebesar 1:
Salinan kode adalah sebagai berikut:
<able>
<tr> <th> Nomor baris </th> </tr>
<tr ng-repeat = "i di [0, 1, 2, 3, 4, 5, 6, 7]"> <td> {{i+1}} </td> </tr>
</boable>
Pastikan untuk mengubah TOBE (3) menjadi TOBE (4) dan kemudian jalankan ./scripts/test.sh skrip lagi
Meringkaskan
Anda sekarang memiliki aplikasi model, tampilan, pemisahan pengontrol yang dinamis, dan Anda selalu menguji. Sekarang, Anda dapat melanjutkan ke Langkah 3 untuk menambahkan fungsi pencarian teks lengkap ke aplikasi.