Modul AngularJS mendefinisikan sebuah aplikasi.
Modul ini adalah wadah untuk bagian-bagian yang berbeda dari sebuah aplikasi.
Modul ini merupakan wadah untuk kontroler aplikasi.
Controller selalu milik modul.
Membuat Modul
Sebuah modul dibuat dengan menggunakan AngularJS fungsi angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>The "myApp" parameter mengacu pada elemen HTML di mana aplikasi akan berjalan.
Sekarang Anda dapat menambahkan controller, arahan, filter, dan banyak lagi, untuk aplikasi AngularJS Anda.
Menambahkan Controller
Menambahkan controller untuk aplikasi Anda, dan merujuk pada kontroler dengan ng-controller direktif:
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>
Cobalah sendiri " Anda akan belajar lebih banyak tentang pengendali nanti dalam tutorial ini.
Menambahkan Directive a
AngularJS memiliki seperangkat built-in arahan yang dapat Anda gunakan untuk menambahkan fungsionalitas ke aplikasi Anda.
Untuk referensi lengkap, kunjungi kami AngularJS direktif referensi .
Selain itu Anda dapat menggunakan modul untuk menambahkan arahan Anda sendiri untuk 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> Cobalah sendiri " Anda akan belajar lebih banyak tentang arahan nanti dalam tutorial ini.
Modul dan Controller di File
Hal ini umum dalam aplikasi AngularJS untuk menempatkan modul dan pengendali dalam file JavaScript.
Dalam contoh ini, "myApp.js" berisi definisi modul aplikasi, sementara "myCtrl.js" berisi controller:
Contoh
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>
Cobalah sendiri " myApp.js
var app = angular.module( "myApp" , []);
 | The [] parameter dalam definisi modul dapat digunakan untuk menentukan modul tergantung. |
|---|
| Tanpa [] parameter, Anda tidak menciptakan modul baru, tapi mengambil yang sudah ada. |
|---|
myCtrl.js
app.controller( "myCtrl" , function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Fungsi dapat Mencemari Global Namespace
fungsi global harus dihindari dalam JavaScript. Mereka dapat dengan mudah ditimpa atau dihancurkan oleh skrip lain.
AngularJS modul mengurangi masalah ini, dengan menjaga semua fungsi lokal untuk modul.
Kapan Muat Perpustakaan
Sementara itu adalah umum dalam aplikasi HTML untuk menempatkan script pada akhir <body> elemen, direkomendasikan bahwa Anda memuat perpustakaan AngularJS baik dalam <head> atau di awal <body> .
Hal ini karena panggilan ke angular.module hanya dapat disusun setelah perpustakaan telah dimuat.
Contoh
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>
Cobalah sendiri "