HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Arahan AngularJS

❮ Sebelumnya Berikutnya ❯

AngularJS memungkinkan Anda memperluas HTML dengan atribut baru yang disebut Directives .

AngularJS memiliki seperangkat arahan bawaan yang menawarkan fungsionalitas untuk aplikasi Anda.

AngularJS juga memungkinkan Anda menentukan arahan Anda sendiri.

Arahan AngularJS

Arahan AngularJS adalah atribut HTML yang diperluas dengan awalan ng-.

Arahan ng-appmenginisialisasi aplikasi AngularJS.

Arahan ng-initinisialisasi data aplikasi.

Arahan ng-modelmengikat nilai kontrol HTML (input, pilih, textarea) ke data aplikasi.

Baca tentang semua arahan AngularJS di referensi arahan AngularJS kami .

Contoh

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>

Arahan ng-appjuga memberi tahu AngularJS bahwa elemen <div> adalah "pemilik" aplikasi AngularJS.

Pengikatan Data

Ekspresi, dalam contoh di {{ firstName }}atas, adalah ekspresi pengikatan data AngularJS.

Pengikatan data di AngularJS mengikat ekspresi AngularJS dengan data AngularJS.

{{ firstName }}terikat dengan ng-model="firstName".

Dalam contoh berikut, dua bidang teks diikat bersama dengan dua direktif model-ng:

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>

Menggunakan ng-inittidak terlalu umum. Anda akan mempelajari cara menginisialisasi data dalam bab tentang pengontrol.

Elemen HTML yang Berulang

Arahan ng-repeatmengulangi elemen HTML:

Contoh

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

Arahan ng-repeatsebenarnya mengkloning elemen HTML sekali untuk setiap item dalam koleksi.

Arahan ng-repeatyang digunakan pada array objek:

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>

AngularJS sangat cocok untuk aplikasi database CRUD (Create Read Update Delete).
Bayangkan saja jika benda-benda ini adalah catatan dari database.

Petunjuk dalam aplikasi

Arahan ng-appmendefinisikan elemen root dari aplikasi AngularJS.

Arahan ng-appakan auto-bootstrap (secara otomatis menginisialisasi) aplikasi ketika halaman web dimuat.

Arahan Panas

Arahan ng-initmendefinisikan nilai awal untuk aplikasi AngularJS.

Biasanya, Anda tidak akan menggunakan ng-init. Anda akan menggunakan pengontrol atau modul sebagai gantinya.

Anda akan mempelajari lebih lanjut tentang pengontrol dan modul nanti.

Arahan pemodelan

Arahan ng-modelmengikat nilai kontrol HTML (input, pilih, textarea) ke data aplikasi.

Arahan ng-modeljuga dapat:

  • Berikan validasi jenis untuk data aplikasi (nomor, email, wajib diisi).
  • Memberikan status untuk data aplikasi (tidak valid, kotor, tersentuh, error).
  • Menyediakan kelas CSS untuk elemen HTML.
  • Mengikat elemen HTML ke formulir HTML.

Baca lebih lanjut tentang ng-modelarahan di bab berikutnya.

Buat Arahan Baru

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

Arahan baru dibuat dengan menggunakan .directivefungsi.

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

Saat memberi nama direktif, Anda harus menggunakan nama camel case, w3TestDirective, tetapi saat menjalankannya, Anda harus menggunakan -nama terpisah, 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>Made by a directive!</h1>"
  };
});
</script>

</body>

Anda dapat memanggil arahan dengan menggunakan:

  • Nama elemen
  • Atribut
  • Kelas
  • Komentar

Contoh di bawah ini semuanya akan menghasilkan hasil yang sama:

Nama elemen

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

Atribut

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

Kelas

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

Komentar

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

Pembatasan

Anda dapat membatasi arahan Anda hanya untuk dipanggil oleh beberapa metode.

Contoh

Dengan menambahkan restrictproperti dengan nilai "A", arahan hanya dapat dipanggil oleh atribut:

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

Nilai batasan hukum adalah:

  • Euntuk nama Elemen
  • Auntuk Atribut
  • Cuntuk kelas
  • Muntuk Komentar

Secara default nilainya adalah EA, artinya nama Elemen dan nama atribut dapat menjalankan direktif.


❮ Sebelumnya Berikutnya ❯