Cara Membuat Custom Directive Menggunakan Angular JS Part 1
Halo teman teman di kesempatan kali ini saya akan membahasa panduan mengenai, Cara Membangun Kembangkan Directive Menggunakan Angular JS Part 1, di panduan sebelumnya saya telah membahas mengenai pengertian Directive, seperti yang kita ketahui bahwa Directive adalah sebuah tag khusus ynag dimiliki oleh Angular JS. Di pembahasan mengenai Cara Membangun Custome Directive Menggunakan Angular JS kita akan mencoba membangun sebuah directive sendiri yang sesuai dengan keperluan.
Oke teman teman kita seketika saja berikut, Cara Membangun Kembangkan Directive Menggunakan Angular JS Part 1, bagi cara pemakaian tag, directive di Angular JS dibagi menjadi 4 , di antaranya yaitu,
- Element Directive ( <my-directive></my-directive> )
- Attribute Directive ( <div my-directive></div> )
- Class Directive ( <div class=”my-directive”></div> )
- Comment Directive ( <!–directive:my-directive–> )
Berikutnya setelah teman teman paham mengenai cara pemakaian tag directive yang terdapat di Angular JS, berikutnya kita akan lihat sebuah struktur yang sangat basic dari kembangkan directive di pada Angular JS, bagi mengunaan kembangkan directive di ketika membangun directive kita diharuskan mengembalikan sebuah object directive yang mempunyai beberapa property diantaranya ,
Silahkan teman teman simpan script dibawah ini dengan nama MyDirective.js, dengan cara buatlah sebuah folder baru bernama Cara Membangun Kembangkan Directive Menggunakan Angular JS Part 1 didalam folder tersebuat buatlah folder baru dengan nama “js” dan didalam folder “js” bikin lah sebuah folder yang bernama directives kemudian silahkan simpan script di bawah ini di folder tersebut dengan nama MyDirective.js
app.directive('myDirective',function(){
return {
restrict:'EA',
tema:'<h2>Hello {{dumet}}</h2>'
};
});Kemudian kita bikin lah sebuah view, dengan nama app.js yang disimpan di pada folder js berikut script nya seperti dibawah ini,
var app=angular.module('FirstApp',[]);Berikutnya didalam folder js kita bikin sebuah folder baru yang bernama controllers didalam folder controllers kita bikin sebuah file yang bernama MainController.js masukan script dibawah ini di MainController.js tersebut
app.controller('MainController',['$scope', function($scope){
$scope.dumet=Source Code Aplikasi;
}]);Berikutnya silahkan masukan script HTML dibawah ini dengan nama index.html didalam folder Cara Membangun Kembangkan Directive Menggunakan Angular JS Part 1
<html>
<head>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js></script>
<script src=js/app.js></script>
<script src=js/controllers/MainController.js></script>
<script src=js/directives/MyDirective.js></script>
</head>
<body ng-app=FirstApp>
<div ng-controller=MainController>
<my-directive>
</my-directive>
<hr/>
<div my-directive></div>
</div>
</body>
<html>
Jikalau dijalankan di browser karenanya hasilnya seperti dibawah ini,
Oke taman teman bagainama lumayan gampang bukan? Cara Membangun Kembangkan Directive Menggunakan Angular JS Part 1 nya,
Semoga bermanfaat, terima kasih
https://www.kursuswebsite.org/cara-membuat-custom-directive-mengunakan-angular-js-part-2/
Sumber https://kursuswebsite.org
