Skip to main content
Pengenalan AngularJS

Contoh Module dan Controller Pada AngularJS

Introduction

Masih pembahasan tentang cara belajar Framework AngularJS. Setelah beberapa pembahasan sebelumnya kita sudah pelajari sedikit teori tentang awal belajar AngularJS. Pada tahap ini akan kita buatkan sebuah contoh dasar project web menggunakan Framework AngularJS. 

Demo Video Project

Berikut saya lampirkan Contoh source code yang bisa jadi panduan untuk belajar Framework AngularJS. Tutorial tersedia dalam bentuk Video Hasilnya dan Script Kode Download untuk lebih jelas pemahaman nya.

Download Source Code

Contoh Module

Pada tutorial ini kita akan mengisinya dengan module. Agar lebih gampang module adalah nama dari aplikasi angularjs kita. Nama module ini nanti ditempatkan pada directive ng-app, sebagai tanda dimana aplikasi kita dimulai. Berikut ini adalah kode minimal module angularjs. Sebagai catatan yang dimasukkan pada directive ng-app adalah nama module (myModule) bukan objek angularjs kita (myApp). Ketikkan Kode Berikut Pada editor anda simpan dengan nama : example.html

<!DOCTYPE html>
<html>
<head>
<title>membuat module</title>
<!-- mengimport file angularjs -->
<script type="text/javascript" src="lib/angular.min.js">
</script> <script type="text/javascript">
// membuat module dengan nama myModule dan disimpan pada objek atau variabel myApp
// yang dimasukkan pada directive ng-app nanti adalah myModule bukan myApp
var myApp = angular.module("myModule",[]);
</script>
</head>
<body>
<!-- membuat directive ng-app sebagai tanda awal aplikasi angularjs kita -->


<div id="aplikasiAngularjs" ng-app="myModule">
<!-- karena masih di didalam directive ng-app, seharusnya outoutnya jika dibuka dibrowser adalah 13 -->
{{2+3+8}}
</div>


<!-- buat div lain diluar ng-app -->


<div id="bukanAplikasiAngularjs">
<!-- karena diluar ng-app ekspresi ini akan ditampilkan apa adanya, tidak ada operasi matematika -->
{{2+3+8}}
</div>


</body>
</html>

Keterangan :

  • Pemanggilan AngularJS saya gunakan secara Offline yang saya simpan dalam folder “lib”.
  • Download saja source nya untuk dapatkan file angularJS nya.

Berikut hasil Jika dijalankan via Browser:

Contoh Module AngularJS
Run Project AngularJS

Untuk keterangan source code ada penjelasan disetiap baris nya.

Source Code Kedua Controller dan Scope

Controller adalah tempat kita menulis logika program. Pada controller kita bisa memanipulasi model dan view. Pada satu aplikasi (module) kita bisa memiliki beberapa controller berbeda. Controller memiliki property yang disebut scope. Anggap saja tempat untuk menampung data dan method milik controller. Seperti biasa ketikkan kode berikut di editor simpan dengan nama : example2.html


<!DOCTYPE html>
<html>
<head>
<title>membuat controller</title>
<!-- mengimport file angularjs -->
<script type="text/javascript" src="lib/angular.min.js"></script>
<script type="text/javascript">
// membuat module dengan nama myModule dan disimpan pada objek atau variabel myApp
// yang dimasukkan pada directive ng-app nanti adalah myModule bukan myApp
var myApp = angular.module("myModule",[]);
// membuat controller satu
myApp.controller("ctrlSatu",function($scope){
// memberi nilai awal pada model
$scope.nama = "Ridwan";
$scope.salam = "Hai, Apa Kabar ";
// membuat fungsi untuk menampilkan salam
$scope.tampilkanSalam = function(salam){
alert(salam +" "+ $scope.nama);
};
});
</script>
</head>
<!-- membuat directive ng-app sebagai tanda awal aplikasi angularjs kita -->
<body ng-app="myModule">
<!-- manipulasi data controller satu -->

<div ng-controller="ctrlSatu">
<!-- menampilkan data nama dari controller satu -->
Data nama dari controller satu {{nama}}
<!-- mengubah data nama dari controller satu -->
 Masukkan nama <input type="text" ng-model="nama" /> 
<!-- membuat event click untuk menampilakan salam -->
 Masukkan salam <input type="text" ng-model="salam" />
<button ng-click="tampilkanSalam(salam)">tampilkan salam</button> 
</div>

</body>
</html>

Berikut hasil Run Via Browser:

Contoh Module AngularJS
Run Project AngularJS

Demikian Semoga Bermanfaat.

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