Sudah tiba masanya untuk memberikan halaman web ini beberapa ciri dinamik - gunakan AngularJS! Kami telah menambah ujian di sini untuk pengawal yang akan ditambah kemudian.
Terdapat banyak jenis struktur kod untuk aplikasi. Untuk aplikasi AngularJS, kami menggalakkan penggunaan corak Model-View-Controller (MVC) untuk memisahkan kod dan memisahkan kebimbangan. Dengan ini, kami menggunakan AngularJS untuk menambah beberapa model, pandangan dan pengawal pada aplikasi kami.
Sila tetapkan semula direktori kerja:
Apl kami kini mempunyai senarai tiga telefon.
Perbezaan paling penting antara langkah 1 dan langkah 2 disenaraikan di bawah. Anda boleh pergi ke GitHub untuk melihat perbezaan yang lengkap.
Paparan dan Templat
Dalam AngularJS, paparan ialah pemetaan model yang diberikan melalui templat HTML. Ini bermakna apabila model berubah, AngularJS akan mengemas kini titik gabungan dalam masa nyata dan mengemas kini paparan dengan sewajarnya.
Sebagai contoh, komponen paparan dibina oleh AngularJS menggunakan templat berikut:
{{phone.snippet}}
Kami baru sahaja menggantikan senarai telefon yang dikodkan secara statik, kerana di sini kami menggunakan arahan ngRepeat dan dua ungkapan AngularJS yang dibalut dengan pendakap kerinting - {{phone.name}} dan {{phone.snippet}} ——boleh mencapai kesan yang sama .
1. Pernyataan ng-repeat="phone in phones" dalam teg
2. Seperti yang kita pelajari dalam langkah 0, pendakap kerinting mengelilingi phone.name dan phone.snippet mengenal pasti pengikatan data. Berbeza daripada pengiraan berterusan, ungkapan di sini sebenarnya adalah rujukan model data aplikasi kami, yang telah kami tetapkan dalam pengawal PhoneListCtrl.
Model dan Pengawal
Model data dimulakan dalam pengawal PhoneListCtrl (ini hanyalah fungsi yang mengandungi tatasusunan, dan objek yang disimpan dalam tatasusunan ialah senarai data telefon mudah alih):
app/js/controller.js:
Walaupun pengawal nampaknya tidak memainkan peranan mengawal, ia memainkan peranan penting di sini. Pengawal membenarkan kami mewujudkan pengikatan data antara model dan pandangan dengan memberi mereka konteks model data kami. Beginilah cara kami menyambungkan lapisan pembentangan, data dan komponen logik:
1.PhoneListCtrl - Nama kaedah pengawal (dalam pengawal fail JS.js) sepadan dengan nilai arahan ngController dalam teg
2 Data telefon kini dikaitkan dengan skop ($skop) yang disuntik ke dalam fungsi pengawal kami. Apabila aplikasi bermula, skop akar dicipta dan skop pengawal ialah pengganti biasa skop akar. Skop pengawal ini sah untuk semua pengikatan data dalam teg
Teori skop AngularJS sangat penting: skop boleh dianggap sebagai pelekat untuk templat, model dan pengawal untuk bekerjasama. AngularJS menggunakan skop, bersama-sama dengan maklumat dalam templat, model data dan pengawal. Ini boleh membantu memisahkan model dan paparan, tetapi kedua-duanya benar-benar selari! Sebarang perubahan pada model akan dicerminkan serta-merta dalam paparan apa-apa perubahan pada paparan serta-merta dicerminkan dalam model.
Untuk pemahaman yang lebih mendalam tentang skop AngularJS, sila rujuk Dokumen Skop AngularJS.
Ujian
"Cara AngularJS" menjadikan ujian kod semasa pembangunan sangat mudah. Mari lihat ujian unit yang baru ditambah berikut untuk pengawal:
test/unit/controllersSpec.js:
huraikan('PhoneListCtrl', fungsi(){
ia('harus mencipta model "telefon" dengan 3 telefon', function() {
skop var = {},
ctrl = PhoneListCtrl(skop) baharu;
jangkakan(skop.telefon.panjang).toBe(3);
});
});
});
Ujian ini mengesahkan bahawa terdapat tiga rekod dalam tatasusunan telefon mudah alih kami (tidak perlu memikirkan skrip ujian ini lagi). Contoh ini menunjukkan betapa mudahnya untuk membuat ujian unit untuk kod AngularJS. Oleh kerana ujian adalah bahagian penting dalam pembangunan perisian, kami memudahkan untuk membina ujian dalam AngularJS untuk menggalakkan pembangun menulis lebih banyak daripadanya.
Apabila menulis ujian, pembangun AngularJS cenderung menggunakan sintaks dalam rangka kerja Pembangunan Didorong Tingkah Laku Jasmine (BBD). Walaupun AngularJS tidak memaksa anda untuk menggunakan Jasmine, semua ujian kami dalam tutorial ditulis menggunakan Jasmine. Anda boleh mendapatkan pengetahuan yang berkaitan di laman utama rasmi Jasmine atau Wiki Jasmine.
Projek berasaskan AngularJS diprakonfigurasikan untuk menggunakan JsTestDriver untuk menjalankan ujian unit.
Anda boleh menjalankan ujian seperti ini:
1. Pada terminal yang berasingan, masukkan direktori angular-phonecat dan jalankan ./scripts/test-server.sh untuk memulakan ujian (sila masukkan .scriptstest-server.bat pada baris arahan Windows untuk menjalankan skrip, diikuti dengan Perintah skrip berjalan dengan cara yang sama);
2. Buka tetingkap penyemak imbas baharu dan pergi ke http://localhost:9876;
3. Pilih "Tangkap pelayar ini dalam mod ketat".
Pada masa ini, anda boleh mengetepikan tingkap anda dan melupakannya. JsTestDriver akan menjalankan ujian itu sendiri dan mengeluarkan keputusan dalam terminal anda.
4. Jalankan ./scripts/test.sh untuk menguji.
Anda sepatutnya melihat hasil yang serupa dengan yang berikut:
Tambahkan pengikatan data lain untuk index.html. Contohnya:
Jumlah bilangan telefon: {{phones.length}}
Ringkasan
Anda kini mempunyai aplikasi dinamik dengan model, paparan dan pengawal berasingan yang boleh anda uji pada bila-bila masa. Kini, anda boleh meneruskan ke langkah 3 untuk menambah fungsi carian teks penuh pada aplikasi anda.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
