Skip to main content
Pengenalan AngularJS

Belajar Angular JS Pengenalan Scope View dan Controller

Masih kita membahas tentang Belajar Angular JS ,kali ini kita buat kelanjutan nya yaitu tentang Belajar Angular JS Pengenalan Scope, View dan Controller. Seperti pada pemabahasan awal mengenal AngularJS, kita akan melanjutkan pembahasan berikutnya agar lebih terfokus untuk mempelajari AngularJS.Untuk lebih terarah dalam memahami pembahasan ini, pahami terlebih dahulu materi sebelumnya tentang apa itu Directive dan data Binding pada AngularJS.

Baca : Pengenalan Directive dan Data Binding

Topik Pembahasan Belajar Angular:

  • Pengenalan Scope
  • Pengenalan View
  • Pengenalan Controller
  • Contoh Source Code

Langsung kita mulai pembahasan pertama tentang Pengenalan Scope, View dan Controller

PENGENALAN SCOPE PADA ANGULAR JS

Scope adalah Objek yang terdapat pada angularJS yang berguna untuk menghubungkan antara Controller dengan View. Jika kita balik dipembahasan sebelumnya tentang awal belajar AngularJS, seperti contoh pada source code Data Binding, kita akan melihat source code “$scope”. Itulah penggunaan Scope pada AngularJS.

PENGENALAN VIEW PADA ANGULAR JS

View dalam framework AngularJS adalah tampilan paling depan atau tampilan yang terlihat oleh user sebagai pengunjung website. Bisa juga dikatakan bagian FrontEnd web. View menggunakan engine HTML dengan proses rendering dari Controller dan Model menggunakan Expression.

PENGENALAN CONTROLLER PADA ANGULAR JS

Controller berfungsi sebagai penghubung antara Model dengan View, biasanya semua proses bisnis diletakkan didalam Controller. Controller adalah tempat kita menulis logika program. Pada controller kita bisa memanipulasi model dan view. Pada satu aplikasi kita bisa memiliki beberapa controller berbeda. Controller memiliki property yang disebut scope. Anggap saja tempat untuk menampung data dan method milik controller.

CONTOH KODE PENGGABUNGAN SCOPE, VIEW DAN CONTROLLER

<html ng-app>
<head>
<title>My Angular App</title>
<!-- Versi Online -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<!-- Versi OFFline -->
<script src="lib/angular.min.js"></script>
</head>
<!-- BAGIAN VIEW -->
<body ng-controller="MainCtrl">
<p> {{nama}} </p>
<p> {{hobi}} </p>
</body>
</html>
<!-- BAGIAN CONTROLLER -->
<script type="text/javascript"></p>
<!-- BAGIAN SCOPE -->
function mainCtrl($scope){
$scope.nama="RIDWAN";
var hobi="BROWSING";
}
</script>

Sedikit penjelasan Script:

Kita sudah set nama dengan “Ridwan”, maka nama disini akan menampilkan Ridwan, Sedangkan variabel hobi tidak akan menampilkan data meski kita sudah set hobi dengan “Browsing”, hal ini karena variabel hobi hanya berlaku di lokal.

PENJELASAN DETAIL

Berikut kita akan coba membahas tentang Controller dan hubungan dengan view dan scope. Controller pada dasarnya hanyalah sebuah fungsi javascript biasa. Lihat contoh Kode berikut:

<script>
function hai($scope){
$scope.nama="IWAN";
$scope.hobi="Googling";
{
</script></p>

Sedikit keterangan, pada objek $scope terdapat variabel bernama nama, dimana isi dari variabel nama berupa tulisan “IWAN” dan variabel nama tersebut bisa kita akses melalui VIEW. Untuk mengaksesnya kita menambahkan attribute ng-controller untuk memanggil fungsi dari controller yang telah dibuat dengan nama”hai”. berikut kode pemanggilan nya :

<div ng-controller="hai">
<!-- Tampil Data -->
</div>

Jadi pada controller terdapat sebuah object khusus bernama $scope yang memungkinkan kita berkomunikasi antara controller dan view yang artinya semua variabel yang diset menggunakan objek $scope dapat kita akses melalui View.
Contoh :

<body ng-app="">
<div ng-controller="hai">
<h3 style="color:#3BCCE4"
{{nama}}
</h3>
<p>{{hobi}}</p>
</div>
</body></p>

Dan berikut Complete Kode Untuk Scope, View dan Controller AngularJS

<html ng-app>
<head>
<title>My Angular App</title>
<!-- Versi Online -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<!-- Versi OFFline -->

</head>
<!-- BAGIAN VIEW -->
<body ng-app="">
<div ng-controller="hai">
<h3 style="color:#3BCCE4">
{{nama}}
</h3>
<p>{{hobi}}</p>
</div>
</body>
</html>
<!-- BAGIAN CONTROLLER -->
<script type="text/javascript">
<!-- BAGIAN SCOPE -->
function hai($scope){
$scope.nama="IWAN";
$scope.hobi="Googling";
{
</script>

Coba Jalankan dan Lihat Hasilnya

Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com