AngularJS - Modul

Halo, para pemrogram masa depan! Hari ini, kita akan mendalaminya dunia modul AngularJS. Jangan khawatir jika Anda baru belajar pemrograman; saya akan memandu Anda secara langkah demi langkah, seperti yang telah saya lakukan untuk ribuan murid selama tahun-tahun mengajar. Mari kita mulai perjalanan menarik ini bersama!

AngularJS - Modules

Apa itu Modul AngularJS?

Bayangkan Anda membangun struktur Lego yang besar. Daripada mencoba membangun segala sesuatu sekaligus, Anda mungkin akan membuat piece-pieces kecil dan dapat dikelola yang kemudian dapat digabungkan. Itu tepat apa yang dilakukan modul di AngularJS!

Modul di AngularJS adalah wadah untuk bagian-bagian berbeda dari aplikasi Anda. Mereka membantu Anda mengatur kode, membuatnya mudah untuk dipelihara dan dipahami. Bayangkan mereka seperti kotak yang di labeli rapih tempat Anda menyimpan fungsionalitas berbeda dari aplikasi Anda.

Modul Aplikasi

Modul aplikasi seperti kotak utama yang menempatkan 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 di baris ini:

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

Modul Controller

Sekarang kita memiliki kotak utama (modul aplikasi), mari kita tambahkan beberapa kotak kecil didalamnya. Salah satu di antaranya adalah modul controller. Controllers 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 kepada 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 sudah membuat modul kita, bagaimana kita sebenarnya menggunakan mereka? Itu lebih mudah daripada yang Anda pikirkan! Anda hanya perlu mengacu mereka di 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 tempat aplikasi kita berada.
ng-controller="MyController" menerapkan controller kita ke body.
{{message}} akan menampilkan pesan yang kita tentukan di controller.

Contoh

Mari kita gabungkan semuanya dengan contoh yang sedikit lebih kompleks. Kita akan membuat aplikasi todo list sederhana:

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

todoApp.controller('TodoController', function($scope) {
$scope.todos = [
{text: 'Pelajari AngularJS', done: false},
{text: 'Bangun sebuah 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>Todo List</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 todo list sederhana. Anda dapat menambahkan todos dan mengecek mereka sebagai selesai. Magic terjadi melalui interaksi antara modul kita (didefinisikan di app.js) dan HTML kita.

Kesimpulan

Dan begitu saja! Kita telah berpergian melalui dunia modul AngularJS, dari konsep dasar ke aplikasi todo list yang berjalan. Ingat, modul seperti blok Lego - mereka membantu Anda membangun struktur kompleks satu piece-pieces. Sebagai Anda terus mengaduksi AngularJS, Anda akan menemukan lebih banyak cara untuk menggunakan modul untuk membuat aplikasi web yang kuat dan efisien.

Terus latih, tetap curiga, dan terutama, bersenang-senang dalam pemrograman! Siapa tahu? Aplikasi revolusioner berikutnya mungkin hanya di jari Anda!

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

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - DOM HTML

Tutorial Selanjutnya:

AngularJS - Form