AngularJS - Direktif
Direktif AngularJS digunakan untuk memperluas HTML. Mereka adalah atribut khusus yang dimulai denganng-awalan. Mari kita bahas arahan berikut -
ng-app - Direktif ini memulai Aplikasi AngularJS.
ng-init - Direktif ini menginisialisasi data aplikasi.
ng-model - Direktif ini mendefinisikan model variabel yang akan digunakan di AngularJS.
ng-repeat - Perintah ini mengulangi elemen HTML untuk setiap item dalam koleksi.
direktif ng-app
Direktif ng-app memulai Aplikasi AngularJS. Ini mendefinisikan elemen root. Secara otomatis menginisialisasi atau mem-bootstraps aplikasi ketika halaman web yang berisi Aplikasi AngularJS dimuat. Ini juga digunakan untuk memuat berbagai modul AngularJS di Aplikasi AngularJS. Dalam contoh berikut, kami mendefinisikan aplikasi AngularJS default menggunakan atribut ng-app dari elemen <div>.
<div ng-app = "">
...
</div>
direktif ng-init
Direktif ng-init menginisialisasi data Aplikasi AngularJS. Ini digunakan untuk menetapkan nilai ke variabel. Dalam contoh berikut, kami menginisialisasi berbagai negara. Kami menggunakan sintaks JSON untuk menentukan berbagai negara.
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
...
</div>
direktif ng-model
Direktif ng-model mendefinisikan model / variabel yang akan digunakan dalam Aplikasi AngularJS. Dalam contoh berikut, kami mendefinisikan model bernama nama .
<div ng-app = "">
...
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>
ng-repeat direktif
Direktif ng-repeat mengulangi elemen HTML untuk setiap item dalam sebuah koleksi. Dalam contoh berikut, kami melakukan iterasi pada berbagai negara.
<div ng-app = "">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
Contoh
Contoh berikut menunjukkan penggunaan semua arahan yang disebutkan di atas.
testAngularJS.htm
<html>
<head>
<title>AngularJS Directives</title>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</body>
</html>
Keluaran
Buka file testAngularJS.htm di browser web. Masukkan nama Anda dan lihat hasilnya.