Instruksi AngularJS

AngularJS memungkinkan Anda menggunakan yang disebut dengan “directivesdengan menambahkan atribut baru untuk HTML.

AngularJS memiliki set of built-in directives yang dapat memberikan fungsionalitas bagi aplikasi Anda.

AngularJS juga memungkinkan Anda mendefinisikan instruksi sendiri.

Instruksi AngularJS

Instruksi AngularJS adalah atribut HTML yang dijalankan, dengan prefiks ng-.

ng-app Instruksi menginisialisasi aplikasi AngularJS.

ng-init Instruksi menginisialisasi data aplikasi.

ng-model Instruksi akan mengikat nilai kontrol HTML (input, select, textarea) ke data aplikasi.

Baca informasi tentang semua instruksi AngularJS di referensi instruksi AngularJS kami.

instansi

<div ng-app="" ng-init="firstName='Bill'">
<p>Nama: <input type="text" ng-model="firstName"></p>
<p>Anda menulis: {{ firstName }}</p>
</div>

Coba Sendiri

ng-app instruksi ini juga memberitahu AngularJS bahwa elemen <div> adalah 'pemilik' aplikasi AngularJS.

pemindahan data

di contoh sebelumnya {{ firstName }} ekspresi adalah ekspresi pemindahan data AngularJS.

Pemindahan data di AngularJS mengikat ekspresi AngularJS dengan data AngularJS.

{{ firstName }} dengan ng-model="firstName" diikat bersama-sama.

Dalam contoh berikutnya, dua field teks diikat bersama-sama dengan dua instruksi ng-model:

instansi

<div ng-app="" ng-init="quantity=1;price=5">
Kuantitas: <input type="number" ng-model="quantity">
Biaya:    <input type="number" ng-model="price">
Total dalam dolar: {{ quantity * price }}
</div>

Coba Sendiri

gunakan ng-init tidak umum. Anda akan belajar bagaimana menginisialisasi data di bab tentang kontroller.

pengulangan elemen HTML

ng-repeat Instruksi pengulangan HTML element:

instansi

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

Coba Sendiri

ng-repeat instruksi ini sebenarnya untuk setiap item di dalam kumpulanmenyalin elemen HTML sekali.

digunakan untuk array objek ng-repeat Instruksi:

instansi

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

Coba Sendiri

AngularJS sangat cocok untuk aplikasi CRUD (buat, baca, update, hapus) database.

Berikan contoh, jika objek-objek ini datang dari rekaman database.

Instruksi ng-app

ng-app Instruksi mendefinisikan aplikasi AngularJS.Elemen root.

saat halaman web diMuat.ng-app Instruksi akanPemulai otomatismelakukan inisialisasi (otomatis) aplikasi.

Instruksi ng-init

ng-init Instruksi mendefinisikan aplikasi AngularJS.Nilai awal.

Biasanya, Anda tidak akan menggunakan ng-init. Anda akan menggunakan kontroler atau modul.

Anda akan mengetahui lebih lanjut tentang kontroler dan modul nanti.

Instruksi ng-model

ng-model Instruksi akan mengikat nilai kontrol HTML (input, select, textarea) ke data aplikasi.

ng-model Instruksi masih dapat:

  • Menyediakan validasi tipe data untuk data aplikasi (angka, email, wajib diisi).
  • Menyediakan status data aplikasi (tidak berlaku, kotor, disentuh, kesalahan).
  • Menyediakan kelas CSS untuk elemen HTML.
  • Mengikat elemen HTML ke formulir HTML.

Baca lebih lanjut tentang ng-model informasi tentang instruksi.

Membuat instruksi baru

Selain semua instruksi bawaan AngularJS, Anda juga dapat membuat instruksi sendiri.

Instruksi baru dibuat dengan cara menggunakan .directive dibuat oleh fungsi.

Untuk memanggil instruksi baru, buat elemen HTML yang memiliki nama tag yang sama dengan instruksi baru.

Pada saat menamai instruksi, harus menggunakan penamaan kapital huruf bergantian (camelCase),w3TestDirective, tetapi saat memanggilnya, harus menggunakan nama yang dipisahkan dengan tanda baca -w3-test-directive:

instansi

<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "<h1>Dibuat oleh sebuah instruksi!</h1>"
  });
});
</script>
</body>

Coba Sendiri

Anda dapat memanggil instruksi seperti berikut:

  • Nama elemen
  • Atribut
  • Kelas
  • Komentar

Contoh di bawah ini akan menghasilkan hasil yang sama:

Nama elemen

<w3-test-directive></w3-test-directive>

Coba Sendiri

Atribut

<div w3-test-directive></div>

Coba Sendiri

Kelas

<div class="w3-test-directive"></div>

Coba Sendiri

Komentar

<!-- directive: w3-test-directive -->

Coba Sendiri

batasan

Anda dapat membatasi instruksi Anda hanya dapat dipanggil melalui metode tertentu.

instansi

dengan menambahkan nilai "A" dari restrict aturan, instruksi ini hanya dapat dipanggil melalui atribut:

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Dibuat oleh sebuah instruksi!</h1>"
  });
});

Coba Sendiri

nilai yang sah untuk restrict adalah:

  • E mewakili nama elemen
  • A mewakili atribut
  • C mewakili kelas
  • M mewakili catatan

Secara default, nilai ini adalah EAini berarti nama elemen dan nama atribut dapat dipanggil dengan instruksi.