Arahan AngularJS
AngularJS memperluas HTML dengan properti baru yang disebut arahan.
AngularJS menambahkan fungsionalitas ke aplikasi melalui instruksi bawaan.
AngularJS memungkinkan Anda untuk menyesuaikan arahan.
Arahan AngularJS
Arahan AngularJS adalah atribut HTML yang diperluas dengan awalan NG-.
Petunjuk NG-APP menginisialisasi aplikasi AngularJS.
NG-Init Directive menginisialisasi data aplikasi.
Ng-Model Directive mengikat nilai elemen (seperti nilai bidang input) ke aplikasi.
Untuk instruksi lengkap, silakan merujuk ke Manual Referensi AngularJS.
Instance AngularJS
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body><div ng-app="" ng-init="firstName='John'"><p>Try Memasuki kotak input: </p> <p> Nama: <input type = "text" ng-model = "firstName"> </p> <p> Anda mengetik sebagai: {{firstName}} </p> </div> </body> </html>Hasil Menjalankan:
Coba masuk ke dalam kotak input:
Nama:
Apa yang Anda ketikkan adalah: John
Petunjuk NG-APP memberi tahu AngularJS bahwa elemen <div> adalah "pemilik" aplikasi AngularJS.
Catatan: Halaman web dapat berisi beberapa aplikasi AngularJS yang berjalan dalam elemen yang berbeda.
Ikatan Data
Ekspresi {{firstName}} dalam contoh di atas adalah ekspresi pengikatan data AngularJS.
Ikatan data dalam AngularJS, menyinkronkan ekspresi AngularJS dan data AngularJS.
{{firstName}} disinkronkan oleh ng-model = "firstName".
Dalam contoh berikutnya, dua bidang teks disinkronkan oleh dua arahan model-ng:
Instance AngularJS
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body><div data-ng-app="" data-ng-init="quantity=1;price=5">Price Kalkulator Kuantitas: <Input Type = "Number" NG-Model = "Kuantitas"> Harga: <input type = "number" ng-model = "harga"> <p> <b> Harga Total: </b> {{kuantitas * harga}} </p> </div> </body> </html>Hasil Menjalankan:
Kalkulator Harga
kuantitas: harga:
Harga Total: 5
Catatan: Menggunakan NG-init tidak terlalu umum. Anda akan belajar cara yang lebih baik untuk menginisialisasi data dalam bab pengontrol.
Ulangi elemen HTML
Petunjuk NG-Repeat mengulangi elemen HTML:
Instance AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <dv Data-k-min data-ng-init = "names = ['jani', 'hege', 'kai']"> <p> Gunakan Ng-RePeat ke loop Arrays </p> <ul> <li data-ng-repeat = "x in name"> {x}} </li> </ul> </div> </body> </htmL>Gunakan NG- Ulangi untuk mengulangi array
Petunjuk NG-Repeat digunakan pada array objek:
Instance AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <dv-app-app = ""> </script> </head> <dev> ng-init = "names = [{name: 'jani', country: 'norwegia'}, {name: 'hege', country: 'Sweden'}, {name: 'kai', country: 'denmark'}]"> <p> objek loop: </p> <ul> <li ng-repeat = "x. }} </li> </ul> </div> </body> </html>Objek Loop:
NoteAngularJS sangat mendukung aplikasi database (tambahkan buat, baca, perbarui pembaruan, hapus hapus).
Pikirkan objek dalam contoh sebagai catatan dalam database.
Perintah NG-App
Arahan NG-APP mendefinisikan elemen akar dari aplikasi AngularJS.
Petunjuk NG-APP secara otomatis mem-boot (inisialisasi otomatis) aplikasi saat halaman web dimuat.
Anda nantinya akan mempelajari bagaimana NG-App terhubung ke modul kode melalui nilai (seperti NG-App = "MyModule").
NG-Init Directive
Petunjuk NG-Init mendefinisikan nilai awal untuk aplikasi AngularJS.
Biasanya, NG-init tidak digunakan. Anda akan menggunakan pengontrol atau modul sebagai gantinya.
Anda akan mempelajari lebih lanjut tentang pengontrol dan modul nanti.
Perintah NG-Model
NG-MODEL Arahan mengikat elemen HTML ke data aplikasi.
NG-MODEL Instruksi juga bisa:
Memberikan jenis verifikasi (nomor, email, diperlukan) untuk data aplikasi.
Memberikan status (tidak valid, kotor, tersentuh, kesalahan) untuk data aplikasi.
Menyediakan kelas CSS untuk elemen HTML.
Ikat elemen html ke bentuk html.
NG-Repeat Directive
NG-RePeat Arective Clones Elemen HTML sekali untuk setiap item dalam koleksi (dalam array).
Buat arahan khusus
Selain arahan bawaan di AngularJS, kami juga dapat membuat arahan khusus.
Anda dapat menggunakan fungsi. Direktif untuk menambahkan arahan khusus.
Untuk menghubungi Petunjuk Kustom, Anda perlu menambahkan nama Petunjuk Kustom ke elemen HTML.
Gunakan metode unta untuk menyebutkan arahan, runoobdirective, tetapi saat menggunakannya, Anda perlu berpisah, runoob-directive:
Instance AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <body> ng-app = "myapp"> <runoob-disrective> </Runoob-directive> <script> var app = angular.module ("myapp", []); app.directive ("runoobdirective", function () {return {template: "kustom arahan!"Hasil Menjalankan:
Perintah khusus!
Anda dapat menghubungi arahan dengan cara berikut:
Nama Elemen
milik
Nama kelas
Komentar
Contoh -contoh berikut juga dapat menghasilkan hasil yang sama:
Nama Elemen
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <body> ng-app = "myapp"> <runoob-disrective> </Runoob-directive> <script> var app = angular.module ("myapp", []); app.directive ("runoobdirective", function () {return {template: "kustom arahan!"Hasil Menjalankan:
Perintah khusus!
milik:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body><body ng-app="myApp"><div runoob-directive></div><script>var app = angular.module ("myapp", []); app.directive ("runoobdirective", function () {return {template: "Custom Directive!"};}); </script> </body> </body> </html>Hasil Menjalankan:
Perintah khusus!
Nama kelas:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body ng-app="myApp"><div></div><script>var app = angular.module ("myapp", []); app.directive ("runoobdirective", function () {return {batasi: "c", template: "c"! "};}); </script> <p> <strong> Catatan: </strong> Anda harus menetapkan nilai <b> restriksi </B> untuk" CHATE "Anda harus menetapkan nilai <b> restriksi </B> untuk" CHATE "ke Call. </p> </body> </html>Perintah khusus!
Catatan: Anda harus menetapkan nilai pembatasan ke "C" untuk memanggil arahan dengan nama kelas.
Catatan:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app = "myperp =" myp = "myp =" myp = "My" my = "my =" MyP = "MyP =" My "My (Myperp =" My "My (Myperp =" My "My-papp =" My "My-papp =" My "My-papp = My (My-papp =" My "My-papp =" My "My-papp =" My "My (MyP =" My "My- App = angular.module ("myapp", []); app.directive ("runoobdirective", function () {return {batasi: "m", ganti: true, template: "Petunjuk khusus!"};}); </skrip> <p> <strong> Catatan: </kupu </p> <p> <strong> Catatan: </strong> Anda harus menetapkan nilai <b> membatasi </b> ke "m" untuk memohon arahan melalui komentar. </p> </body> </html>Hasil Menjalankan:
Perintah khusus!
Catatan: Kita perlu menambahkan atribut ganti ke instance ini, jika tidak komentar tidak akan terlihat.
Catatan: Anda harus menetapkan nilai pembatasan ke "m" untuk memanggil arahan melalui komentar.
Penggunaan terbatas
Anda dapat membatasi arahan Anda untuk dipanggil hanya dengan cara tertentu.
Contoh
Dengan menambahkan properti Batasi dan hanya menetapkan nilai ke "A", perintah hanya dapat dipanggil melalui atribut:
Contoh kode:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body ng-app="myApp"><runoob-directive></runoob-directive><div runoob-directive> </div> <script> var app = angular.module ("myapp", []); app.directive ("runoobdirective", function () {return {batasi: "a", template: <//kustom yang dipanggil cane. Nilai atribut <strong> membatasi </strong> ke "A". </p> </body> </html>Hasil Menjalankan:
Perintah khusus!
Catatan: Perintah pengaturan hanya dapat dipanggil dengan mengatur nilai atribut batasan ke "a".
Nilai pembatasan bisa menjadi sebagai berikut:
E hanya menggunakan nama elemen
Properti hanya tersedia
C Hanya gunakan nama kelas
M hanya tersedia untuk komentar
Nilai default dari pembatasan adalah EA, yaitu, perintah dapat dipanggil melalui nama elemen dan nama atribut.
Di atas adalah kompilasi informasi instruksi AngularJS, dan akan terus ditambah nanti