AngularJS - Modul

Hai, para programer masa depan! Hari ini, kita akan mendalaminya dunia modul AngularJS. Jangan khawatir jika Anda baru dalam programming; saya akan mengarahkan Anda langkah demi langkah, seperti yang telah saya lakukan bagi banyak murid dalam tahun-tahun mengajar saya. Mari kita memulai perjalanan menarik ini bersama!

AngularJS - Modules

Apa Itu Modul AngularJS?

Imaginasikan Anda membangun struktur Lego yang besar. Daripada mencoba mengkonstruksi segalanya sekaligus, Anda mungkin akan membuat potongan yang lebih kecil dan mudah untuk dikelola yang kemudian dapat digabungkan. Itu tepat apa yang dilakukan modul dalam AngularJS!

Modul dalam AngularJS adalah wadah untuk bagian-bagian berbeda dari aplikasi Anda. Mereka membantu Anda mengatur kode Anda, membuatnya mudah untuk dipelihara dan dipahami. Pahami mereka sebagai kotak yang rapih berlabel tempat Anda menyimpan fungsionalitas berbeda dari aplikasi Anda.

Modul Aplikasi

Modul aplikasi adalah seperti kotak utama yang memegang semua kotak lain. Itu tempat aplikasi AngularJS Anda dimulai. Mari kita buat modul aplikasi pertama kita:

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

Ini apa yang terjadi dalam baris ini:

angular.module() adalah fungsi yang membuat modul baru.
'myApp' adalah nama yang kita berikan pada modul kita.
Array kosong [] adalah tempat kita akan daftar dependensi modul kita mungkin punya (kita akan melihat itu nanti).

Modul Controller

Sekarang kita memiliki kotak utama (modul aplikasi), mari kita tambahkan beberapa kotak kecil di dalamnya. Salah satu dari ini adalah modul controller. Controller di AngularJS mengelola data aplikasi Anda. Ini adalah cara Anda membuat controller:

myApp.controller('MyController', function($scope) {
$scope.message = "Hello, AngularJS!";
});

mari kitauraikan ini:

myApp.controller() menambahkan controller baru ke modul myApp kita.
'MyController' adalah nama yang kita berikan pada controller ini.
Fungsi menentukan apa yang dilakukan controller ini.
$scope adalah objek khusus yang memungkinkan controller untuk berkomunikasi dengan view (HTML).

Menggunakan Modul

Sekarang kita telah membuat modul kita, bagaimana kita sebenarnya menggunakannya? Itu lebih mudah daripada yang Anda pikirkan! Anda hanya perlu merujuk ke mereka dalam HTML Anda. Ini adalah cara:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MyController">
<h1>{{message}}</h1>
<script src="app.js"></script>
</body>
</html>

Perhatikan beberapa hal penting di sini:

ng-app="myApp" memberitahu AngularJS bahwa ini adalah tempat aplikasi kita tinggal.
ng-controller="MyController" menerapkan controller kita ke body.
{{message}} akan menampilkan pesan yang kita tentukan dalam controller.

Contoh

Mari kita gabungkan semua ini dengan contoh yang sedikit lebih kompleks. Kita akan membuat aplikasi daftar todo sederhana:

// app.js
var todoApp = angular.module('todoApp', []);

todoApp.controller('TodoController', function($scope) {
$scope.todos = [
{text: 'Belajar AngularJS', done: false},
{text: 'Buat aplikasi', done: false}
];

$scope.addTodo = function() {
$scope.todos.push({text: $scope.newTodo, done: false});
$scope.newTodo = '';
};
});

Dan ini adalah HTML yang sesuai:

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Todo List</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="TodoController">
<h2>Daftar Todo</h2>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done': todo.done}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="newTodo" placeholder="Tambahkan todo baru">
<input type="submit" value="Tambahkan">
</form>
<script src="app.js"></script>
</body>
</html>

Output

Ketika Anda menjalankan kode ini, Anda akan melihat aplikasi daftar todo sederhana. Anda dapat menambahkan todo baru dan mengecek mereka sebagai selesai. Magic terjadi melalui interaksi antara modul kita (didefinisikan di app.js) dan HTML kita.

Kesimpulan

Dan begitulah! Kita telah mengembara melalui dunia modul AngularJS, dari konsep dasar ke aplikasi daftar todo yang berjalan. Ingat, modul seperti blok Lego - mereka membantu Anda membangun struktur kompleks piece by piece. Seperti Anda terus mengembara dalam petualangan AngularJS Anda, Anda akan menemukan banyak lagi cara untuk menggunakan modul untuk membuat aplikasi web yang kuat dan efisien.

Terus latih, tetap curioso, dan terutama, bersenang-senang dalam coding! Siapa tahu? Aplikasi revolusioner berikutnya mungkin hanya berada di ujung jari Anda!

Metode	Deskripsi
angular.module()	Membuat modul baru
module.controller()	Menambahkan controller baru ke modul
ng-app	Directive untuk auto-bootstrap aplikasi AngularJS
ng-controller	Directive untuk menentukan controller
ng-repeat	Directive untuk mengulang set HTML elemen
ng-model	Directive untuk membind input ke variabel
ng-submit	Directive untuk menentukan perilaku submit untuk form
ng-class	Directive untuk menyetel kelas CSS secara dinamis

Credits: Image by storyset