Modul AngularJS
Modul AngularJS mendefinisikan sebuah aplikasi.
Modul adalah wadah untuk berbagai bagian aplikasi.
Modul adalah wadah untuk pengontrol aplikasi.
Kontroler selalu milik modul.
Membuat Modul
Modul dibuat dengan menggunakan fungsi AngularJS angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
Parameter "myApp" mengacu pada elemen HTML tempat aplikasi akan dijalankan.
Sekarang Anda dapat menambahkan pengontrol, arahan, filter, dan lainnya, ke aplikasi AngularJS Anda.
Menambahkan Pengontrol
Tambahkan pengontrol ke aplikasi Anda, dan rujuk ke pengontrol dengan
ng-controllerarahan:
Contoh
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var
app
= angular.module("myApp",
[]);
app.controller("myCtrl", function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
</script>
Anda akan mempelajari lebih lanjut tentang pengontrol nanti dalam tutorial ini.
Menambahkan Arahan
AngularJS memiliki seperangkat arahan bawaan yang dapat Anda gunakan untuk menambahkan fungsionalitas ke aplikasi Anda.
Untuk referensi lengkap, kunjungi referensi direktif AngularJS kami .
Selain itu Anda dapat menggunakan modul untuk menambahkan arahan Anda sendiri ke aplikasi Anda:
Contoh
<div ng-app="myApp" w3-test-directive></div>
<script>
var app =
angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
Anda akan mempelajari lebih lanjut tentang arahan nanti dalam tutorial ini.
Modul dan Pengontrol dalam File
Adalah umum dalam aplikasi AngularJS untuk meletakkan modul dan pengontrol dalam file JavaScript.
Dalam contoh ini, "myApp.js" berisi definisi modul aplikasi, sedangkan "myCtrl.js" berisi pengontrol:
Contoh
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp"
ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
myApp.js
var app = angular.module("myApp", []);
Parameter [] dalam definisi modul dapat digunakan untuk mendefinisikan modul dependen.
Tanpa parameter [], Anda tidak membuat modul baru, tetapi mengambil yang sudah ada.
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Fungsi dapat Mencemari Namespace Global
Fungsi global harus dihindari dalam JavaScript. Mereka dapat dengan mudah ditimpa atau dihancurkan oleh skrip lain.
Modul AngularJS mengurangi masalah ini, dengan menjaga semua fungsi tetap lokal ke modul.
Kapan Memuat Perpustakaan
Meskipun umum dalam aplikasi HTML untuk menempatkan skrip di akhir
<body>elemen, Anda disarankan untuk memuat perpustakaan AngularJS baik di <head>atau di awal file <body>.
Ini karena panggilan ke angular.modulehanya dapat dikompilasi setelah pustaka dimuat.
Contoh
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp"
ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp",
[]);
app.controller("myCtrl", function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
</script>
</body>
</html>