Malay

Tutorial AngularJS

Aplikasi AngularJS

AngularJS - Aplikasi Todo

Hai, para pemrogram yang sedang berkembang! Hari ini, kita akan memulai sebuah perjalanan menarik ke dunia AngularJS dengan membuat sebuah aplikasi Todo yang sederhana namun kuat. Sebagai guru ilmu komputer yang ramah di lingkungan Anda, saya sangat senang untuk memandu Anda dalam proses ini, bahkan jika Anda belum pernah menulis baris kode sebelumnya. Jadi, ambil minumannya yang favorit, rias diri Anda, dan mari kita masuk ke dalam!

AngularJS - ToDo Application

Apa Itu AngularJS?

Sebelum kita mulai mengoding, mari kita spends some time untuk memahami apa itu AngularJS. Bayangkan Anda sedang membangun sebuah rumah. HTML adalah dasar dan tembok, CSS adalah cat dan hiasan, dan JavaScript adalah listrik dan pipa. AngularJS seperti sebuah kru konstruksi yang sangat efisien yang membantu Anda menggabungkan semua elemen ini dalam cara yang cerdas dan terorganisir.

AngularJS adalah kerangka kerja JavaScript yang kuat yang memperpanjang vocabulary HTML untuk aplikasi Anda. Ini sangat baik dalam membuat aplikasi single-page yang 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 root dari aplikasi kita.
  • ng-controller="TodoController": Ini menentukan controller 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 sebuah aplikasi', done: false}
];

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

Ini adalah apa yang terjadi:

  • Kita membuat sebuah modul AngularJS bernama 'todoApp'.
  • Kita menentukan sebuah controller bernama 'TodoController'.
  • Di dalam controller, kita membuat sebuah array dari item todo dan sebuah fungsi untuk menambahkan todo baru.
  • $scope adalah seperti jembatan antara HTML dan JavaScript kita. Itu memungkinkan kita mengakses variabel dan fungsi di 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="Tambah">
</form>
</body>

mari kitauraikan ini:

  • ng-repeat="todo in todos": Ini membuat sebuah <li> baru untuk setiap todo di array 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 form disubmit.
  • ng-model="newTodo": Ini mengikat input ke variabel newTodo di controller.

Menyusun App Kita

Akhirnya, mari kita tambahkan sedikit styling 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 telah membuat aplikasi AngularJS pertama Anda. Berikut adalah tabel yang menggabungkan konsep utama AngularJS yang kita gunakan:

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

Ingat, belajar mengoding seperti belajar bahasa baru. Ini memerlukan waktu dan latihan, tetapi dengan kekerasan, Anda akan membuat aplikasi kompleks dalam waktu singkat. Terus mengoding, terus belajar, dan terutama, bersenang-senang!

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Pelbagai bahasa
Tutorial Seterusnya:
AngularJS - Aplikasi Notepad