Indonesia

Tutorial AngularJS

Aplikasi AngularJS

AngularJS - Aplikasi Todo

Hai, para programer muda! Hari ini, kita akan memulai perjalanan menarik ke dunia AngularJS dengan membuat aplikasi Todo sederhana namun kuat. Sebagai guru ilmu komputer yang ramah di lingkungan Anda, saya sangat gembira untuk menggapai Anda dalam proses ini, bahkan jika Anda belum pernah menulis baris kode sebelumnya. Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita masuk ke dalam!

AngularJS - ToDo Application

Apa Itu AngularJS?

Sebelum kita mulai mengoding, mari kitaambil waktu untuk memahami apa itu AngularJS. Bayangkan Anda sedang membangun sebuah rumah. HTML akan menjadi dasar dan tembok, CSS akan menjadi cat dan hiasan, dan JavaScript akan menjadi listrik dan pipa. AngularJS seperti tim konstruksi yang sangat efisien yang membantu Anda menyusun semua elemen ini dalam cara yang cerdas dan terorganisir.

AngularJS adalah kerangka kerja JavaScript yang kuat yang memperpanjang vocabulari HTML untuk aplikasi Anda. Itu sangat baik dalam membuat aplikasi single-page dinamis.

Menyiapkan Proyek Kita

Pertama-tama, mari kita siapkan proyek kita. Kita akan memerlukan tiga file:

  1. index.html (file HTML utama kita)
  2. app.js (aplikasi AngularJS kita)
  3. style.css ( stylesheet kita)

Mari kita mulai dengan file HTML kita:

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>My Todo App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="TodoController">
<h1>My Todo List</h1>
<!-- Kita akan menambahkan lebih banyak di sini nanti -->
</body>
</html>

mari kitauraikan ini:

  • ng-app="todoApp": Ini memberitahu AngularJS bahwa ini adalah elemen akar dari aplikasi kita.
  • ng-controller="TodoController": Ini menentukan kontroler mana yang harus digunakan untuk bagian ini dari aplikasi kita.
  • Kita telah menyertakan AngularJS dari CDN, dan menghubungkan file app.js dan style.css kita.

Membuat Aplikasi AngularJS Kita

Sekarang, mari kita buat aplikasi AngularJS kita di app.js:

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

app.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 = '';
};
});

Ini apa yang terjadi:

  • Kita membuat sebuah modul AngularJS bernama 'todoApp'.
  • Kita menentukan sebuah kontroler bernama 'TodoController'.
  • Dalam kontroler, kita membuat array dari item todo dan fungsi untuk menambahkan todo baru.
  • $scope seperti jembatan antara HTML dan JavaScript kita. Itu memungkinkan kita mengakses variabel dan fungsi dalam HTML.

Menampilkan Todo Kita

Mari kita perbarui HTML kita untuk menampilkan todo kita:

<body ng-controller="TodoController">
<h1>My Todo List</h1>
<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>
</body>

mari kitauraikan ini:

  • ng-repeat="todo in todos": Ini membuat sebuah <li> baru untuk setiap todo dalam array todos kita.
  • ng-model="todo.done": Ini mengikat checkbox ke properti 'done' dari todo kita.
  • ng-class="{'done': todo.done}": Ini menerapkan kelas 'done' saat todo.done benar.
  • {{todo.text}}: Ini menampilkan teks dari todo kita.
  • ng-submit="addTodo()": Ini memanggil fungsi addTodo saat formulir dikirimkan.
  • ng-model="newTodo": Ini mengikat input ke variabel newTodo dalam kontroler.

Menyusun gaya Aplikasi Kita

Akhirnya, mari kita tambahkan gaya dasar di style.css:

body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 20px;
}

ul {
list-style-type: none;
padding: 0;
}

li {
margin-bottom: 10px;
}

.done {
text-decoration: line-through;
color: #888;
}

form {
margin-top: 20px;
}

input[type="text"] {
width: 70%;
padding: 5px;
}

input[type="submit"] {
padding: 5px 10px;
}

CSS ini akan membuat aplikasi kita terlihat bersih dan terorganisir.

Kesimpulan

Selamat! Anda baru saja membuat aplikasi AngularJS pertama Anda. Berikut adalah tabel yang menggabungkan konsep AngularJS utama yang kita gunakan:

Konsep Deskripsi
ng-app Menentukan elemen akar dari aplikasi AngularJS
ng-controller Menentukan kontroler mana yang harus digunakan untuk elemen HTML
ng-repeat Mengulang elemen HTML untuk setiap item dalam array
ng-model Mengikat input, select, atau textarea ke properti di scope
ng-submit Menentukan fungsi apa yang harus dijalankan saat formulir dikirimkan
ng-class Secara dinamis menerapkan kelas CSS

Ingat, belajar mengoding seperti belajar bahasa baru. Itu memakan waktu dan latihan, tapi dengan kekerasan, Anda akan dapat membuat aplikasi kompleks dalam waktu singkat. Terus mengoding, terus belajar, dan yang paling penting, bersenang-senang!

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Internationalisasi
Tutorial Selanjutnya:
AngularJS - Aplikasi Catatan