Cara Penggunaan Scope pada Angular JS part 1
Scope adalah sebuah sebuah object yang terdapat didalam Agular JS yang berfungsi bagi menghubungkan antara Controller dan View, derective secara default berasal dari scope yang di miliki oleh parentnya jadi ketika scope yang berda di directive berubah karenanya secara otomatis scope yang yang terdapat parent nya pun akan berubah
Biar lebih paham kita seketika saja ke study case nya mengenai Cara Pemakaian Scope di Angular JS part 1
Yang pertama-tama silahkan teman teman bikin sebuah folder yang bernama Cara pemakaian Scope di Angular JS part 1 didalam folder tersebut buatlah folder js dan di pada folder js bikin lah sebuah folder yang bernama controllers, didalam folder controller silahkan simpan script dibawah ini dengan nama 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('myDirective',function(){
return {
restrict : 'EA',
theme : '<h2>Hello {{dumet}}</h2>',
replace : true,
link : function(scope,elem,attrs){
elem.bind('click',function(){
scope.dumet='Saya kursus disini';
scope.$digest();
});
}
};
});Di file directive.js kita menambahkan sebuah property link yang berfungsi bagi menghubungkan file yang terdapat di directive.js dengan file yang berada di controller, karenanya ketika variable halo Source Code Aplikasi diklik yang berada scope di klik karenanya nilainya akan berubah menjadi halo saya kursus disini
Berikutnya kita akan membangun 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',[]);Sekiranya telah silahkan simpan script dibawah ini dengan nama index.html yang berada di pada folder Cara Pemakaian Scope di Angular JS part 1, yang telah kita bikin sebelumnya.
<!DOCTYPE html>
<html>
<head>
<title>Belajar AngularJs</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>
<b>school</b> dari hasil controller scope </br>
<h2>Hello {{dumet}} </h2>
<hr/>
<b>school</b> dari hasil directive scope </br>
<my-directive> </my-directive>
</div>
</body>
</html>
Nah, bila kita jalankan di browser karenanya hasilnya seperti dibawah ini
- sebelum di klik
- setelah di klik
Oke teman teman lumayan skian panduan saya kali ini mengenai Cara Pemakaian Scope di Angular JS part 1,
Semoga bermanfaat Terimakasih.
Cara Penggunaan Scope pada Angular JS part 2
Sumber https://kursuswebsite.org
