Instruksi AngularJS

AngularJS membolehkan anda menggunakan yang disebut dengan "arahandengan properti baru untuk memperluas HTML.

AngularJS mempunyai sekumpulan arahan baku yang dapat memberikan fungsi kepada aplikasi anda.

AngularJS 还允许您定义自己的指令。

Instruksi AngularJS

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-.

arahan ng-app 指令初始化 AngularJS 应用程序。

arahan ng-init 指令初始化应用程序数据。

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

请在我们的 AngularJS 指令参考中阅读有关所有 AngularJS 指令的信息。

contoh

<div ng-app="" ng-init="firstName='Bill'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>

Cuba sendiri

arahan ng-app 指令还告诉 AngularJS，<div> 元素是 AngularJS 应用程序的“所有者”。

数据绑定

上例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。

AngularJS 中的数据绑定将 AngularJS 表达式与 AngularJS 数据进行绑定。

{{ firstName }} 与 ng-model="firstName" 绑定在一起。

在下一个例子中，两个文本字段通过两个 ng-model 指令绑定在一起：

contoh

<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs:    <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>

Cuba sendiri

使用 arahan ng-init 并不常见。你将在关于控制器的章节中学习如何初始化数据。

重复 HTML 元素

ng-repeat 指令重复 HTML 元素：

contoh

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

Cuba sendiri

ng-repeat 指令实际上为集合中的每个项目克隆一次 HTML 元素.

用于对象数组的 ng-repeat 指令：

contoh

<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>

Cuba sendiri

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

Dengan demikian, jika objek-objek ini datang dari catatan database.

arahan ng-app

arahan ng-app arahan ng-init mendefinisikan aplikasi AngularJS.elemen utama.

saat halaman di muat,arahan ng-app arahan akan:pendirian otomatis(inisialisasi otomatis) aplikasi.

arahan ng-init

arahan ng-init arahan ng-init mendefinisikan aplikasi AngularJS.nilai awal.

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

Anda akan mendapatkan informasi lebih lanjut tentang kontroler dan modul nanti.

arahan ng-model

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

ng-model Arahian dapat:

  • menyediakan pengesahan jenis data aplikasi (angka, email, wajib diisi).
  • menyediakan status data aplikasi (tidak berlaku, kotor, disentuh, kesalahan).
  • memberikan kelas CSS untuk elemen HTML.
  • menyambungkan elemen HTML ke formulir HTML.

Baca lebih lanjut tentang ng-model informasi arahan.

Membuat arahan baru

Selain semua arahan bawaan AngularJS, Anda dapat membuat arahan sendiri.

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

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

Pada waktu mengambil nama arahan, harus digunakan nama yang berbentuk kapital huruf kecilw3TestDirectivetetapi saat memanggilnya, nama harus dipisahkan dengan -w3-test-directive:

contoh

<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 arahan!</h1>"
  });
});
</script>
</body>

Cuba sendiri

Anda dapat memanggil arahan dengan cara berikut:

  • nama elemen
  • sifat
  • kelas
  • komen

contoh di bawah ini akan menghasilkan hasil yang sama:

nama elemen

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

Cuba sendiri

sifat

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

Cuba sendiri

kelas

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

Cuba sendiri

komen

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

Cuba sendiri

Penghadangan

Anda boleh menghadkan arahan arahan anda hanya dapat dipanggil melalui cara-cara tertentu.

contoh

dengan menambahkan nilai "A" i restrict aturan, arahan ini hanya dapat dipanggil melalui atribut:

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

Cuba sendiri

nilai yang sah untuk restrict adalah:

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

Dalam keadaan lalai, nilai ini adalah EAini bermakna nama elemen dan nama atribut boleh dipanggil arahan.