AngularJS Tutorial Bermula (2): AngularJS Template_AngularJS

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:

Salin kod Kod adalah seperti berikut:

git checkout -f langkah-2

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:

Salin kod Kod adalah seperti berikut:

...

• 
  {{phone.name}}
  

  {{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

Peulang ini memberitahu AngularJS untuk mencipta elemen

untuk setiap telefon dalam senarai, menggunakan 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:

Salin kod Kod adalah seperti berikut:

fungsi PhoneListCtrl($skop) {
$scope.phones = [
{"name": "Nexus S",
"snippet": "Pantas menjadi lebih pantas dengan Nexus S."},
{"name": "Motorola XOOM™ dengan Wi-Fi",
"snippet": "Tablet Seterusnya, Generasi Seterusnya."},
{"name": "MOTOROLA XOOM™",
"snippet": "Tablet Seterusnya, Generasi Seterusnya."}
];
}

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:

Salin kod Kod adalah seperti berikut:

describe('PhoneCat controllers', function() {

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:

Salin kod Kod adalah seperti berikut:

Chrome: Tetapan semula pelari.

.
Jumlah 1 ujian (Lulus: 1; Gagal: 0; Ralat: 0) (2.00 ms)
Chrome 19.0.1084.36 Mac OS: Jalankan 1 ujian (Lulus: 1; Gagal: 0; Ralat 0) (2.00 ms)


yeah! Ujian lulus! Atau tidak... Nota: Jika ralat berlaku selepas anda menjalankan ujian, tutup penyemak imbas dan kembali ke terminal untuk menutup skrip, kemudian cuba langkah di atas sekali lagi.

Berlatih

Tambahkan pengikatan data lain untuk index.html. Contohnya:

Salin kod Kod adalah seperti berikut:

Jumlah bilangan telefon: {{phones.length}}

Buat sifat model data baharu dan ikatkannya pada templat. Contohnya:

Salin kod Kod adalah seperti berikut:

$scope.hello = "Helo, Dunia!"

Kemas kini penyemak imbas anda untuk memastikan ia tertera "Hello, World!" Buat jadual ringkas dengan lelaran:

Salin kod Kod adalah seperti berikut:

nombor baris
{{i}}

Sekarang biarkan saya menambah ungkapan model data sebanyak 1:

Salin kod Kod adalah seperti berikut:

nombor baris
{{i 1}}

Pastikan ujian unit gagal selepas menukar kepadaBe(3) kepadaBe(4), dan kemudian jalankan skrip ./scripts/test.sh sekali lagi

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.