Apakah arahan AngularJS?
Arahan dalam AngularJS adalah perintah yang memberikan fungsi baru HTML. Apabila sudut melalui kod HTML, pertama-tama akan mencari arahan di halaman dan kemudian menguraikan halaman HTML dengan sewajarnya.
Contoh mudah arahan AngularJS, yang telah kita lihat dalam bab-bab sebelumnya adalah "arahan model-ng". Arahan ini digunakan untuk mengikat model data kita dengan pandangan kita.
Catatan: Anda boleh mempunyai kod sudut asas dalam halaman HTML dengan arahan ng-init, ng-repeat dan ng-model tanpa perlu memiliki Pengawal. Logik untuk arahan ini terdapat dalam fail Angular.js yang disediakan oleh Google. Pengawal adalah konstruk pengaturcaraan sudut tahap berikutnya yang memungkinkan logik perniagaan, tetapi seperti yang disebutkan untuk aplikasi menjadi aplikasi sudut, tidak wajib memiliki pengawal.
Dalam tutorial ini, anda akan belajar-
- Cara Membuat Arahan
- ng-aplikasi
- ng-init
- model ng
- ng-ulangi
Cara Membuat Arahan
Seperti yang kami tetapkan dalam pengenalan, arahan AngularJS adalah cara untuk memperluas fungsi HTML.
Terdapat 4 arahan yang ditentukan dalam AngularJS.
Berikut adalah senarai arahan AngularJS beserta contoh yang diberikan untuk menerangkan setiap satu daripadanya.
1) ng-aplikasi
Ini digunakan untuk memulakan aplikasi Angular.JS. Apabila arahan ini dilaksanakan di halaman HTML, pada dasarnya memberitahu Angular bahawa halaman HTML ini adalah aplikasi angular.js.
Contoh di bawah menunjukkan cara menggunakan arahan ng-app. Dalam contoh ini, kita hanya akan menunjukkan cara membuat aplikasi HTML biasa sebagai aplikasi angularJS.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Penjelasan Kod:
- Arahan "ng-app" ditambahkan ke tag div kami untuk menunjukkan bahawa aplikasi ini adalah aplikasi angular.js. Perhatikan bahawa arahan ng-aplikasi dapat diterapkan pada tag apa pun, jadi juga dapat dimasukkan ke dalam tag badan juga.
- Oleh kerana kami telah mendefinisikan aplikasi ini sebagai aplikasi angular.js, kami kini dapat memanfaatkan fungsi angular.js. Dalam kes kami, kami menggunakan ungkapan untuk menggabungkan 2 rentetan.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Output dengan jelas menunjukkan output ungkapan yang hanya dimungkinkan kerana kami mendefinisikan aplikasi sebagai aplikasi angularjs.
2) ng-init
Ini digunakan untuk memulakan data aplikasi. Kadang-kadang anda mungkin memerlukan beberapa data tempatan untuk aplikasi anda, ini dapat dilakukan dengan arahan ng-init.
Contoh di bawah menunjukkan cara menggunakan arahan ng-init.
Dalam contoh ini, kita akan membuat pemboleh ubah yang disebut "TutorialName" menggunakan arahan ng-init dan memaparkan nilai pemboleh ubah tersebut di halaman.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Penjelasan Kod:
- Arahan ng-init ditambahkan ke tag div kami untuk menentukan pemboleh ubah tempatan yang disebut "TutorialName" dan nilai yang diberikan untuk ini adalah "AngularJS".
- Kami menggunakan ungkapan dalam AngularJs untuk menampilkan output dari nama pemboleh ubah "TutorialName" yang didefinisikan dalam arahan ng-init kami.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Dalam output,
- Hasilnya jelas menunjukkan output ungkapan yang mengandungi rentetan "AngularJS". Ini adalah hasil daripada rentetan "AngularJS" yang diberikan kepada pemboleh ubah 'TutorialName' di bahagian ng-init.
3) model ng
Dan akhirnya, kita mempunyai arahan model ng, yang digunakan untuk mengikat nilai kawalan HTML ke data aplikasi. Contoh di bawah menunjukkan cara menggunakan arahan model ng.
Dalam contoh ini,
- Kami akan membuat 2 pemboleh ubah yang disebut "kuantiti" dan "harga". Pemboleh ubah ini akan terikat dengan 2 kawalan input teks.
- Kami kemudian akan memaparkan jumlah keseluruhan berdasarkan pendaraban kedua-dua harga dan nilai kuantiti.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Penjelasan Kod:
- Arahan ng-init ditambahkan ke tag div kami untuk menentukan 2 pemboleh ubah tempatan; satu disebut "kuantiti" dan yang lain adalah "harga".
- Sekarang kita menggunakan arahan model ng untuk mengikat kotak teks "Orang" dan "Harga pendaftaran" dengan pemboleh ubah tempatan "kuantiti" dan "harga" masing-masing.
- Akhirnya, kami menunjukkan Total melalui ungkapan, yang merupakan pendaraban pemboleh ubah kuantiti dan harga.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
- Hasilnya jelas menunjukkan pendaraban nilai untuk Harga Orang dan Pendaftaran.
Sekarang, jika anda pergi ke kotak teks dan mengubah nilai Harga Orang dan Pendaftaran, Jumlah akan berubah secara automatik.
- Output di atas hanya menunjukkan kekuatan pengikatan data dalam sudut, yang dicapai dengan penggunaan arahan model ng.
4) ng-ulangan
Ini digunakan untuk mengulang elemen HTML. Contoh di bawah menunjukkan cara menggunakan arahan ng-repeat.
Dalam contoh ini,
- Kami akan mempunyai susunan nama bab dalam pemboleh ubah array dan
- kemudian gunakan arahan ng-repeat untuk memaparkan setiap elemen array sebagai item senarai
Event Registration Guru99 Global Event
- {{names}}
Penjelasan Kod:
- Arahan ng-init ditambahkan ke tag div kami untuk menentukan pemboleh ubah yang disebut "bab" yang merupakan pemboleh ubah array yang mengandungi 3 rentetan.
- Elemen ng-ulangan digunakan dengan menyatakan pemboleh ubah sebaris yang disebut "nama" dan melalui setiap elemen dalam susunan bab.
- Akhirnya, kami menunjukkan nilai 'nama' pemboleh ubah sebaris tempatan.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
- Output di atas menunjukkan bahawa arahan ng-ulangan mengambil setiap nilai dalam array yang disebut "bab" dan membuat item senarai HTML untuk setiap item dalam array.
Ringkasan
- Arahan digunakan untuk memperluas fungsi HTML. Angular memberikan arahan terbina dalam seperti
- ng-app - Ini digunakan untuk menginisialisasi aplikasi sudut.
- ng-init - Ini digunakan untuk membuat pemboleh ubah aplikasi
- ng-model - Ini digunakan untuk mengikat kawalan HTML ke data aplikasi
- ng-repeat - Digunakan untuk mengulang elemen menggunakan sudut.
