tutorial pengembangan web terbaru
 

AngularJS arahan

❮ Sebelumnya Berikutnya Bab ❯

AngularJS memungkinkan Anda memperpanjang HTML dengan atribut baru yang disebut Directive.

AngularJS memiliki seperangkat built-in arahan yang menawarkan fungsionalitas untuk aplikasi Anda.

AngularJS juga memungkinkan Anda menentukan arahan Anda sendiri.

AngularJS Directive

AngularJS arahan diperpanjang atribut HTML dengan awalan ng- .

The ng-app direktif menginisialisasi aplikasi AngularJS.

The ng-init direktif menginisialisasi data aplikasi.

The ng-model direktif mengikat nilai kontrol HTML (input, pilih, textarea) untuk data aplikasi.

Baca tentang semua AngularJS arahan dalam kami AngularJS referensi direktif .

Contoh

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

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

</div>
Cobalah sendiri "

The ng-app direktif juga memberitahu AngularJS bahwa elemen <div> adalah "pemilik" dari aplikasi AngularJS.

Data Binding

The {{ firstName }} ekspresi, dalam contoh di atas, adalah AngularJS data ekspresi mengikat.

Data yang mengikat di AngularJS mengikat AngularJS ekspresi dengan data AngularJS.

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

Pada contoh berikut ini dua bidang teks terikat bersama-sama dengan dua arahan 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>
Cobalah sendiri "
Catatan Menggunakan ng-init tidak sangat umum. Anda akan belajar bagaimana untuk menginisialisasi data dalam bab tentang controller.

Mengulangi HTML Elements

The ng-repeat direktif mengulangi elemen HTML:

Contoh

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

The ng-repeat direktif sebenarnya klon elemen HTML sekali untuk setiap item dalam koleksi.

The ng-repeat direktif digunakan pada array obyek:

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>
Cobalah sendiri "
Catatan AngularJS sempurna untuk CRUD database yang (Buat Baca Perbarui Hapus) aplikasi.
Bayangkan saja jika benda-benda yang catatan dari database.

The ng-aplikasi Directive

The ng-app direktif mendefinisikan elemen akar aplikasi AngularJS.

The ng-app direktif akan auto-bootstrap (otomatis menginisialisasi) aplikasi ketika sebuah halaman web dimuat.

The ng-init Directive

The ng-init direktif mendefinisikan nilai awal untuk aplikasi AngularJS.

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

Anda akan belajar lebih banyak tentang controller dan modul kemudian.

The ng model Directive

The ng-model direktif mengikat nilai kontrol HTML (input, pilih, textarea) untuk data aplikasi.

The ng-model direktif juga dapat:

  • Menyediakan jenis validasi untuk data aplikasi (nomor, email, diperlukan).
  • Menyediakan status untuk data aplikasi (yang tidak valid, kotor, menyentuh, error).
  • Menyediakan kelas CSS untuk elemen HTML.
  • elemen HTML mengikat bentuk HTML.

Baca lebih lanjut tentang ng-model direktif dalam bab berikutnya.

Buat Directive New

Selain semua built-in AngularJS arahan, Anda dapat membuat arahan Anda sendiri.

Arahan baru dibuat dengan menggunakan .directive fungsi.

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

Ketika penamaan direktif, Anda harus menggunakan nama camelcase, w3TestDirective , tapi ketika memohon itu, Anda harus menggunakan - nama dipisahkan, 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>
Cobalah sendiri "

Anda dapat meminta direktif dengan menggunakan:

  • nama elemen
  • Atribut
  • Kelas
  • Komentar

Contoh di bawah semua akan menghasilkan hasil yang sama:

nama elemen

<w3-test-directive></w3-test-directive>
Cobalah sendiri "

Atribut

<div w3-test-directive></div>
Cobalah sendiri "

Kelas

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

Komentar

<!-- directive: w3-test-directive -->
Cobalah sendiri "

pembatasan

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

Contoh

Dengan menambahkan restrict properti dengan nilai "A" , direktif hanya dapat dipanggil oleh atribut:

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

The membatasi nilai hukum adalah:

  • E untuk nama Element
  • A untuk Atribut
  • C untuk Kelas
  • M untuk Komentar

Secara default nilai adalah EA , yang berarti bahwa kedua nama Element dan atribut nama dapat meminta direktif.


❮ Sebelumnya Berikutnya Bab ❯