Tutorial pengenalan AngularJS Hello World!_AngularJS

Cara terbaik untuk mula belajar AngularJS adalah dengan mencipta aplikasi klasik "Hello World!":

1. Menggunakan editor teks kegemaran anda, buat fail HTML, contohnya: helloworld.html.
2. Salin kod sumber di bawah ke fail HTML anda.
3. Buka fail HTML ini dalam pelayar web.

Kod sumber:

Salin kod Kod adalah seperti berikut:

            


Helo {{'World'}}!

Sila jalankan kod di atas dalam pelayar anda untuk melihat kesannya.

Sekarang mari kita lihat kod dengan lebih dekat dan lihat apa yang berlaku. Apabila halaman dimuatkan, teg ng-app memberitahu AngularJS untuk memproses keseluruhan halaman HTML dan bootstrap aplikasi:

Salin kod Kod adalah seperti berikut:

Barisan ini memuatkan skrip AngularJS:

Salin kod Kod adalah seperti berikut:

(Untuk butiran tentang cara AngularJS mengendalikan keseluruhan halaman HTML, lihat Bootstrap.)

Akhir sekali, teks kandungan dalam teg ialah templat yang digunakan untuk memaparkan ucapan kami dalam UI:

Salin kod Kod adalah seperti berikut:

Helo {{'World'}}!

Perhatikan bahawa kandungan yang ditandakan dengan pendakap kerinting berganda {{}} ialah ungkapan yang diikat dalam sapaan ini ialah rentetan ringkas 'Dunia'.

Seterusnya, mari lihat contoh yang lebih menarik: menggunakan AngularJS untuk mengikat ungkapan dinamik pada teks ucapan kami.

Helo AngularJS World!

Contoh ini menunjukkan pengikatan data dua arah dalam AngularJS:

1 Edit dokumen helloworld.html yang dibuat sebelum ini.
2. Salin kod sumber di bawah ke fail HTML anda.
3. Muat semula tetingkap penyemak imbas.

Kod sumber:

Salin kod Kod adalah seperti berikut:

            


Nama anda:
                                                                                               Helo {{nama anda ||. 'Dunia'}}!

Sila jalankan kod di atas dalam pelayar anda untuk melihat kesannya.

Terdapat beberapa perkara penting yang perlu diperhatikan tentang contoh ini:

1. Perintah input teks
2. Tag pendakap kerinting berganda menambah pembolehubah model nama anda pada teks ucapan.
3. Anda tidak perlu mendaftarkan pendengar acara tambahan atau menambah pengendali acara untuk aplikasi ini!

Sekarang cuba taip nama anda dalam kotak input, nama yang anda taip akan dikemas kini dan dipaparkan dalam ucapan serta-merta. Ini ialah konsep pengikatan data dua hala dalam AngularJS. Sebarang perubahan pada kotak input akan dicerminkan serta-merta dalam pembolehubah model (satu arah), dan sebarang perubahan pada pembolehubah model serta-merta ditunjukkan dalam teks ucapan (arah yang lain).

Analisis aplikasi AngularJS

Bahagian ini menerangkan tiga komponen aplikasi AngularJS dan menerangkan cara ia memetakan kepada corak reka bentuk Model-View-Controller:

Templat

Templat ialah fail yang anda tulis dalam HTML dan CSS yang mewakili paparan aplikasi anda. Anda boleh menambah elemen baharu dan tag atribut pada HTML sebagai arahan kepada pengkompil AngularJS. Pengkompil AngularJS boleh diperluas sepenuhnya, yang bermaksud dengan AngularJS anda boleh membina penanda HTML anda sendiri dalam HTML!

Logik aplikasi (Logik) dan tingkah laku (Tingkah Laku)

Logik dan gelagat aplikasi ialah pengawal yang anda tentukan dalam JavaScript. AngularJS berbeza daripada aplikasi AJAX standard kerana anda tidak perlu menulis pendengar tambahan atau pengawal DOM kerana ia telah dibina ke dalam AngularJS. Ciri ini menjadikan logik aplikasi anda mudah untuk ditulis, diuji, diselenggara dan difahami.

Data model (Data)

Model diperoleh daripada sifat objek skop AngularJS. Data dalam model mungkin objek Javascript, tatasusunan atau jenis primitif. Perkara yang penting ialah kesemuanya tergolong dalam objek skop AngularJS.

AngularJS menggunakan skop untuk mengekalkan penyegerakan dua hala antara model data dan UI antara muka paparan. Setelah keadaan model berubah, AngularJS akan segera menyegarkan antara muka paparan dan begitu juga sebaliknya.

Selain itu, AngularJS juga menyediakan beberapa ciri perkhidmatan yang sangat berguna:

1. Perkhidmatan asas termasuk suntikan ketergantungan, XHR, caching, penghalaan URL dan perkhidmatan abstrak penyemak imbas.
2. Anda juga boleh melanjutkan dan menambah perkhidmatan aplikasi khusus anda sendiri.
3. Perkhidmatan ini membolehkan anda menulis aplikasi WEB dengan sangat mudah.