Modul AngularJS

Modul AngularJS mendefinisikan aplikasi.

Modul adalah wadah bagi bagian-bagian yang berbeda dari aplikasi.

Modul adalah wadah kontroler aplikasi.

Kontroler selalu milik suatu modul.

Buat modul

Dengan menggunakan fungsi AngularJS,angular.module Buat sebuah modul:

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" parameter menunjuk ke elemen HTML tempat aplikasi akan berjalan.

Sekarang, Anda dapat menambahkan kontroler, direktif, pengecualian, dan lainnya ke aplikasi AngularJS.

Menambahkan kontroler

Tambahkan kontroler ke aplikasi Anda dan gunakan ng-controller direktif mengacu ke kontroler:

contoh

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName = "Gates";
});
</script>

Coba Sendiri

Anda akan mengetahui lebih lanjut tentang kontroler di bagian belakang tutorial ini.

Menambahkan direktif

AngularJS memiliki sekelompok direktif bawaan yang dapat digunakan untuk menambahkan fitur ke aplikasi.

Untuk referensi penuh, kunjungi referensi direktif AngularJS kami.

Selain itu, Anda dapat menambahkan direktif sendiri ke aplikasi Anda menggunakan modul:

contoh

<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "Saya dibuat di konstruktur direktif!"
  };
});
</script>

Coba Sendiri

Anda akan mengetahui lebih lanjut tentang direktif di bagian belakang tutorial ini.

modul dan kontroler di berkas

Menempatkan modul dan kontroler di dalam berkas JavaScript adalah hal yang biasa dalam aplikasi AngularJS.

Dalam contoh ini, "myApp.js" mengandung definisi modul aplikasi, sementara "myCtrl.js" mengandung kontroler:

contoh

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/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>

Coba Sendiri

myApp.js

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

Parameter [] dalam definisi modul dapat digunakan untuk mendefinisikan modul yang tergantung.

Jika tidak ada parameter [] dalam dalam, Anda tidak membuat modul baru, melainkan mencari modul yang sudah ada.

myCtrl.js

app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName= "Gates";
});

Fungsi dapat mempolusi ruang nama global

Dilarang menggunakan fungsi global dalam JavaScript. Mereka mudah dihapus atau dirusak oleh skrip lain.

Modul AngularJS mengurangi masalah ini dengan menjaga semua fungsi di dalam modul lokal.

kapan memuat pustaka

walaupun menempatkan skrip di dalam aplikasi HTML <body> pada akhir elemen <head> adalah hal yang umum, tetapi disarankan untuk <head> atau <body> memuat pustaka AngularJS di awal.

ini karena hanya setelah memuat pustaka baru dapat dikompilasi referensi angular.module penggunaannya.

contoh

<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.staticfile.net/angular.js/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 = "Bill";
  $scope.lastName = "Gates";
});
</script>
</body>
</html>

Coba Sendiri