Ads by Yasya El Hakim
Tutorial Lengkap AngularJS: Module - Bagian 3

Module pada AngularJS dapat mendefinisikan suatu aplikasi.
Module adalah tempat untuk berbagai bagian dari suatu aplikasi.
Module adalah tempat untuk controller dari suatu aplikasi.
Controller selalu menjadi bagian dari module.




Membuat Module

Module dapat kita buat dengan menggunakan fungsi AngularJS yaitu angular.module.

<div ng-app="aplikasiKu">...</div>
<script>

var aplikasi = angular.module("aplikasiKu", []);

</script>


Paramater "aplikasiKu" tertuju pada salah satu elemen HTML yang akan dijalankan.

Sekarang kalian dapat menambahkan Controller, Directive, Filter, dan lain-lain kedalam aplikasi AngularJS.

Menambahkan Controller

Tambahkan Controller kedalam aplikasi yang kalian buat dan tautkan dengan Controller dengan menggunakan directive ng-controller.

<div ng-app="aplikasiKu" ng-controller="kontrolKu">
{{ namaDepan + " " + namaBelakang }}
</div>

<script>

var app = angular.module("aplikasiKu", []);

app.controller("kontrolKu", function($scope) {
  $scope.namaDepan = "Yasya";
  $scope.namaBelakang = "El Hakim";
});

</script> 


Outputnya akan seperti berikut:

Yasya El Hakim



Kalian akan mempelajari lebih lanjut tentang Controller pada bagian selanjutnya.

Menambahkan Directive

AngularJS memiliki serangkaian Directive atau arahan built-in (bawaan) yang dapat kalian gunakan untuk menambahkan fungsionalitas ke dalam aplikasi yang kalian buat.

Kalian dapat menggunakan module untuk menambahkan Directive ke dalam aplikasi yang kalian buat sendiri:

<div ng-app="aplikasiKu" elca-tes-directive></div>

<script>
var app = angular.module("aplikasiKu", []);

app.directive("elcaTesDirective", function() {
  return {
    template : "Saya dibuat dengan konstruktor Directive!"
  };
});
</script> 


Outputnya akan seperti berikut:

Saya dibuat dengan konstruktor Directive!



Kalian akan mempelajari lebih lanjut tentang Directive pada bagian selanjutnya.

Module dan Controller pada File

Sangatlah umum dan biasa pada aplikasi yang dibuat dengan menggunakan AngularJS untuk meletakkan module dan controller ke dalam file JavaScript.

Pada controh berikut, "aplikasiKu.js" berisi definisi module dari aplikasi, sedangkan "kontrolKu.js" berisi controller:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<body>

<div ng-app="aplikasiKu" ng-controller="kontrolKu">
{{ namaDepan + " " + namaBelakang }}
</div>

<script src="aplikasiKu.js"></script>
<script src="kontrolKu.js"></script>

</body>
</html>


Berikut isi dari file aplikasiKu.js:

var aplikasi = angular.module("aplikasiKu", []);



Parameter [] dapat kita gunakan untuk mendefinisikan module.

Tanpa menggunakan parameter [], kalian tidaklah membuat modul baru, tetapi mengambil module yang sudah ada.

Berikut isi dari file kontrolKu.js:

app.controller("kontrolKu", function($scope) {
  $scope.namaDepan = "Yasya";
  $scope.namaBelakang = "El Hakim";
}); 


Fungsi pada Global Namespace

Pada JavaScript, Fungsi global harus kita dihindari karena dapat menumpuk atau bertabrakan dengan skript lain.

Tetapi tenang saja, karena AngularJS dapat mengatasinya.

Kapan Harus Memuat Library?

Sangatlah biasa dalam HTML untuk menempatkan skript di akhir elemen <body>, tetapi untuk AngularJS, saya sarankan agar kalian meletakkan Library AngularJS baik di <head> atau di awal <body>.

Hal tersebut dapat terjadi karena pemanggilan angular.module hanya dapat dikompilasi setelah library itu dimuat.

Sebelumnya: Tutorial Lengkap AngularJS: Ekspresi (Expressions) - Bagian 2
Selanjutnya: Tutorial Lengkap AngularJS: Directive - Bagian 4
Daftar Isi: Tutorial Lengkap AngularJS

0Komentar

Sebelumnya Selanjutnya