Apa itu direktif AngularJS?
Arahan di AngularJS adalah perintah yang memberikan fungsionalitas baru pada HTML. Ketika angular melalui kode HTML, pertama-tama akan menemukan arahan di halaman dan kemudian mengurai halaman HTML yang sesuai.
Contoh sederhana dari direktif AngularJS, yang telah kita lihat di bab sebelumnya adalah "direktif ng-model". Direktif ini digunakan untuk mengikat model data kita ke tampilan kita.
Catatan: Anda dapat memiliki kode sudut dasar di halaman HTML dengan arahan ng-init, ng-repeat dan ng-model tanpa perlu memiliki Pengontrol. Logika untuk arahan ini ada di file Angular.js yang disediakan oleh Google. Pengontrol adalah konstruksi pemrograman sudut tingkat berikutnya yang memungkinkan logika bisnis, tetapi seperti yang disebutkan untuk aplikasi menjadi aplikasi bersudut, tidak wajib memiliki pengontrol.
Dalam tutorial ini, Anda akan belajar-
- Cara Membuat Arahan
- ng-aplikasi
- ng-init
- ng-model
- ng-ulangi
Cara Membuat Arahan
Seperti yang kita definisikan dalam pendahuluan, arahan AngularJS adalah cara untuk memperluas fungsionalitas HTML.
Ada 4 arahan yang didefinisikan di AngularJS.
Di bawah ini adalah daftar arahan AngularJS beserta contoh yang diberikan untuk menjelaskan masing-masing arahan tersebut.
1) ng-aplikasi
Ini digunakan untuk menginisialisasi aplikasi Angular.JS. Ketika arahan ini di tempatkan di halaman HTML, itu pada dasarnya memberitahu Angular bahwa halaman HTML ini adalah aplikasi angular.js.
Contoh di bawah ini menunjukkan cara menggunakan direktif ng-app. Dalam contoh ini, kami hanya akan menunjukkan bagaimana membuat aplikasi HTML biasa menjadi aplikasi angularJS.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Penjelasan Kode:
- Direktif "ng-app" ditambahkan ke tag div kami untuk menunjukkan bahwa aplikasi ini adalah aplikasi angular.js. Perhatikan bahwa arahan ng-app bisa diterapkan ke sembarang tag, jadi itu juga bisa dimasukkan ke dalam tag body juga.
- Karena kita telah mendefinisikan aplikasi ini sebagai aplikasi angular.js, sekarang kita dapat menggunakan fungsionalitas angular.js. Dalam kasus kami, kami menggunakan ekspresi untuk menggabungkan 2 string.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Keluarannya dengan jelas menunjukkan keluaran dari ekspresi yang hanya dimungkinkan karena kita mendefinisikan aplikasi sebagai aplikasi angularjs.
2) ng-init
Ini digunakan untuk menginisialisasi data aplikasi. Terkadang Anda mungkin memerlukan beberapa data lokal untuk aplikasi Anda, ini dapat dilakukan dengan direktif ng-init.
Contoh di bawah ini menunjukkan bagaimana menggunakan direktif ng-init.
Dalam contoh ini, kita akan membuat variabel bernama "TutorialName" menggunakan direktif ng-init dan menampilkan nilai variabel tersebut di halaman.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Penjelasan Kode:
- Direktif ng-init ditambahkan ke tag div kami untuk mendefinisikan variabel lokal yang disebut "TutorialName" dan nilai yang diberikan untuk ini adalah "AngularJS".
- Kami menggunakan ekspresi di AngularJs untuk menampilkan output dari nama variabel "TutorialName" yang didefinisikan dalam direktif ng-init kami.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dalam keluarannya,
- Hasilnya jelas menunjukkan output dari ekspresi yang berisi string "AngularJS". Ini adalah hasil dari string "AngularJS" yang ditetapkan ke variabel 'TutorialName' di bagian ng-init.
3) model-ng
Dan terakhir, kami memiliki direktif ng-model, yang digunakan untuk mengikat nilai kontrol HTML ke data aplikasi. Contoh di bawah ini menunjukkan cara menggunakan direktif ng-model.
Dalam contoh ini,
- Kami akan membuat 2 variabel yang disebut "kuantitas" dan "harga". Variabel ini akan terikat ke 2 kontrol input teks.
- Kami kemudian akan menampilkan jumlah total berdasarkan perkalian nilai harga dan kuantitas.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Penjelasan Kode:
- Direktif ng-init ditambahkan ke tag div kami untuk mendefinisikan 2 variabel lokal; yang satu disebut "kuantitas" dan yang lainnya adalah "harga".
- Sekarang kita menggunakan arahan ng-model untuk mengikat kotak teks "Orang" dan "Harga registrasi" ke variabel lokal kita masing-masing "kuantitas" dan "harga".
- Terakhir, kami menampilkan Total melalui ekspresi, yang merupakan perkalian variabel kuantitas dan harga.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
- Outputnya dengan jelas menunjukkan perkalian nilai untuk Orang dan harga Pendaftaran.
Sekarang, jika Anda membuka kotak teks dan mengubah nilai People and Registration price, Total akan otomatis berubah.
- Keluaran di atas hanya menunjukkan kekuatan pengikatan data di angularJs, yang dicapai dengan menggunakan direktif ng-model.
4) ng-ulangi
Ini digunakan untuk mengulang elemen HTML. Contoh di bawah ini menunjukkan bagaimana menggunakan direktif ng-repeat.
Dalam contoh ini,
- Kami akan memiliki array nama bab dalam variabel array dan
- lalu gunakan direktif ng-repeat untuk menampilkan setiap elemen dari array sebagai item daftar
Event Registration Guru99 Global Event
- {{names}}
Penjelasan Kode:
- Direktif ng-init ditambahkan ke tag div kami untuk mendefinisikan variabel yang disebut "bab" yang merupakan variabel array yang berisi 3 string.
- Elemen ng-repeat digunakan dengan mendeklarasikan variabel sebaris yang disebut "nama" dan menelusuri setiap elemen dalam larik bab.
- Terakhir, kami menunjukkan nilai 'nama' variabel sebaris lokal.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
- Output di atas hanya menunjukkan bahwa direktif ng-repeat mengambil setiap nilai dalam array yang disebut "chapters" dan membuat item daftar HTML untuk setiap item dalam array.
Ringkasan
- Direktif digunakan untuk memperluas fungsionalitas HTML. Angular memberikan arahan bawaan seperti
- ng-app - Ini digunakan untuk menginisialisasi aplikasi sudut.
- ng-init - Ini digunakan untuk membuat variabel aplikasi
- ng-model - Ini digunakan untuk mengikat kontrol HTML ke data aplikasi
- ng-repeat - Digunakan untuk mengulang elemen menggunakan angular.