Cara Memberikan Nilai Isolate Scope pada Angular JS Part 1
Halo teman teman di panduan kali ini saya akan menjelaskan mengenai Cara Memberikan Nilai Isolate scope di Angular JS Part 1, sebelum kita masuk kepada pembahasan sebaik nya kita mesti tau dulu pengertian dari Isolate scope di Angular JS tersebut.
Isolate di angular JS adalah sebuah sebuah scope yang yang sifatnya terisolasi berarti proses yang dilakukan hanya didalam area directive saja tanpa mempengaruhi proses yang lainya, biar lebih paham lagi kita seketika aja masuk ke study casenya mengenai Cara Memberikan Nilai Isolate scope di Angular JS, Cara Memberikan Nilai Isolate scope di Angular JS ada dua cara di antaranya yaitu menggunakan :
1. “@” bagi one way text binding
2. “=” bagi two way binding
Nah bagi pembahasan Cara Memberikan Nilai Isolate scope di Angular JS Part 1 kali ini saya akan membahas mengenai @ bagi one way text binding terlebih dahulu, @ bagi one way text binding, yaitu nilai yang dikirim ke isolate scope yang berasal dari directive, biar lebih paham lagi kita seketika aja masuk ke study case nya mengenai Cara Memberikan Nilai Isolate scope di Angular JS Part 1.
Langkah yang pertama-tama silahkan teman teman bikin sebuah folder baru dengan nama Cara Memberikan Nilai Isolate scope di Angular JS Part 1 didalam folder tersebut buatlah folder js dan di pada folder js buatlah sebuah folder yang bernama controllers, didalam folder controller silahkan simpan script dibawah ini dengannama MainController.js
app.controller('MainController',['$scope', function($scope){
$scope.dumet=Source Code Aplikasi;
}]);Langkah berikutnya di folder js silahkan bikin folder baru lagi yang bernama directive, di pada folder directive silahkan simpan script dibawah ini dengan nama directive.js
app.directive('oneWay',function(){
return {
restrict:'E',
scope:{
title:'@'
},
tampilan:'<h2>Title Inside : {{title}}</h2>',
link : function(scope,elem,attrs){
elem.bind('click',function(){
scope.$apply(function() {
scope.title = Source Code Aplikasi;
});
});
}
};
});Dan nanti di browser akan menampilkan sebuah pesan yang berupa title inside : {{title}} dengan variable title.
Berikutnya kita akan merancang sebuah file yang bernama app.js yang disimpan didalam folder js dan silahkan simpan script dibawah ini di pada app.js tersebut
var app=angular.module('FirstApp',[]);Berikutnya silahkan simpan script dibawah ini dengan nama index.html yang berada di pada folder Cara Memberikan Nilai Isolate scope di Angular JS Part 1, yang telah kita bikin sebelumnya.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Angular Js</title>
</head>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js></script>
<script type=text/javascript src=js/app.js></script>
<script type=text/javascript src=js/directive/directive.js></script>
<script type=text/javascript src=js/controllers/MainController.js></script>
<body ng-app=FirstApp>
<div ng-controller=MainController>
<input type=text ng-model=title/> </br> </br>
<one-way title=Cara Memberikan Nilai Isolate Scope di Angular JS Part 1></one-way>
<one-way title=Cara Memberikan Nilai Isolate Scope di Angular JS Part 1></one-way>
</div>
</body>
</html>
Sekiranya dijalankan di bowser karenanya hasilnya seperti dibawah ini :
- Tampilan awal
- Tampilan ketika formnya telah di isi
- Dan ketika isi dari form tersebut kita klik karenanya hasilnya seperti dibawah ini
- Dan silahkan coba klik di bagian kursus karenanya akan berubah menjadi Source Code Aplikasi seperti dibawah ini.
Bagai mana teman teman lumayan gampang bukan Cara Memberikan Nilai Isolate scope di Angular JS Part 1
Demikianlah panduan saya kali ini mengenai Cara Memberikan Nilai Isolate scope di Angular JS Part 1
Terimakasih.
Cara Memberikan Nilai pada Isolate Scope Angular JS Part 2
Sumber https://kursuswebsite.org
