AngularJS Directive
pengenalan angular, dan penerapan angular.
II.Alat dan Bahan.
Laptop / PC
W3SCHOOLS
Sublime Text
III.Tujuan.
Agar kita tau apa itu angular, cara cara penerapan nya.
IV.Penjelasan.
AngularJS Directive
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 diperluas atribut HTML dengan awalan ng-.
appdirektif menginisialisasi aplikasi AngularJS.
initdirektif menginisialisasi data aplikasi.
modeldirektif mengikat nilai kontrol HTML (input, pilih, textarea) untuk data aplikasi.
Baca tentang semua AngularJS arahan di 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>
appdirektif juga memberitahu AngularJS bahwa elemen <div> adalah "pemilik" dari aplikasi AngularJS.
Data Binding
{{ 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>
Menggunakan ng-inittidak sangat umum. Anda akan belajar bagaimana untuk menginisialisasi data dalam bab tentang pengendali.
Mengulangi HTML Elements
repeatdirektif mengulangi elemen HTML:
Contoh
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
repeatdirektif sebenarnya klon elemen HTML sekali untuk setiap item dalam koleksi.
repeatdirektif 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>
AngularJS sempurna untuk CRUD database yang (Buat Baca Perbarui Hapus) aplikasi.
Coba bayangkan jika benda-benda ini adalah catatan dari database.
aplikasi Directive
appdirektif mendefinisikan elemen root dari aplikasi AngularJS.
appdirektif akan auto-bootstrap (otomatis menginisialisasi) aplikasi ketika sebuah halaman web dimuat.
init Directive
initdirektif mendefinisikan nilai awal untuk suatu 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.
model Directive
modeldirektif mengikat nilai kontrol HTML (input, pilih, textarea) untuk data aplikasi.
modeldirektif juga dapat:
Menyediakan jenis validasi untuk data aplikasi (nomor, email, diperlukan).
Memberikan status data aplikasi (valid, kotor, menyentuh, error).
Menyediakan kelas CSS untuk elemen HTML.
elemen HTML mengikat bentuk HTML.
Baca lebih lanjut tentang ng-modeldirektif dalam bab berikutnya.
Buat Directive New
Selain semua built-in AngularJS arahan, Anda dapat membuat arahan Anda sendiri.
Arahan baru dibuat dengan menggunakan .directivefungsi.
Untuk memanggil direktif baru, membuat elemen HTML dengan nama tag yang sama dengan direktif baru.
Ketika penamaan direktif, Anda harus menggunakan nama camelcase, w3TestDirectivetetapi saat menjalankan itu, 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 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>
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 akan dipanggil oleh beberapa metode.
Contoh
Dengan menambahkan restrictproperti 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>"
};
});
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.
Contoh :
Maka outputya :
V.Kesimpulan.
AngularJS adalah sebuah framework Javascript yang di kembangkan atau di bangun oleh tim Google. angularjs menggunakan metode MVC yang membuat source code aplikasi kita menjadi bersih dan mudah di kembangkan.
VI.Refrensi.
https://www.w3schools.com/angular/angular_expressions.asp
Komentar
Posting Komentar