Aplikasi Timer AngularJS

Halo, para pemrogram masa depan! Hari ini, kita akan melangsungkan sebuah perjalanan menarik untuk membuat aplikasi timer menggunakan AngularJS. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan Anda yang ramah dalam petualangan ini, menjelaskan segala sesuatu secara langkah demi langkah. mari kita lipat lengan dan masuk ke dalam!

AngularJS - Timer Application

apa itu AngularJS?

Sebelum kita mulai membuat timer kita, mari kitaambil sedikit waktu untuk memahami apa itu AngularJS. Bayangkan Anda membangun sebuah rumah. AngularJS seperti sebuah kotak alat ajaib yang membuatnya mudah untuk membangun tembok, atap, dan segala sesuatu di antaranya. Itu adalah kerangka kerja JavaScript yang membantu kita membuat aplikasi web dinamis dengan lebih sedikit usaha.

Menyiapkan Proyek Kita

Langkah 1: Menambahkan AngularJS

Pertama-tama, kita perlu menambahkan AngularJS ke proyek kita. Itu seperti mengundang seorang teman super cerdas untuk membantu kita dengan tugas-tugas kita. Kita akan melakukan ini dengan menambahkan baris kode tunggal ke file HTML kita:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

Baris ini memberitahu halaman web kita untuk memuat AngularJS dari server Google. Itu seperti membuka kotak alat ajaib yang kita bicarakan sebelumnya.

Langkah 2: Membuat Struktur HTML

Sekarang, mari kita buat struktur dasar aplikasi timer kita. Bayangkan ini seperti menggambar blueprint rumah kita:

<!DOCTYPE html>
<html ng-app="timerApp">
<head>
<title>AngularJS Timer</title>
</head>
<body ng-controller="TimerController">
<h1>AngularJS Timer</h1>
<p>Waktu: {{time}}</p>
<button ng-click="startTimer()">Mulai</button>
<button ng-click="stopTimer()">Henti</button>
<button ng-click="resetTimer()">Reset</button>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>

mari kitauraikan ini:

ng-app="timerApp": Ini memberitahu AngularJS bahwa seluruh dokumen HTML kita adalah sebuah aplikasi Angular bernama "timerApp".
ng-controller="TimerController": Ini menerapkan controller (yang kita akan buat nanti) ke elemen <body> kita.
{{time}}: Ini adalah tempat timer kita akan menampilkan waktu saat ini.
Tombol-tombol memiliki atribut ng-click, yang akan memicu fungsi saat diklik.

Membuat Aplikasi AngularJS

Langkah 3: Menyiapkan JavaScript

Sekarang, mari kita buat file app.js kita. Ini adalah tempat dimana magik terjadi!

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

app.controller('TimerController', function($scope, $interval) {
$scope.time = 0;
var timer;

$scope.startTimer = function() {
if (!timer) {
timer = $interval(function() {
$scope.time++;
}, 1000);
}
};

$scope.stopTimer = function() {
if (timer) {
$interval.cancel(timer);
timer = null;
}
};

$scope.resetTimer = function() {
$scope.stopTimer();
$scope.time = 0;
};
});

Wah, itu banyak! Mari kitauraikan langkah demi langkah:

var app = angular.module('timerApp', []);: Ini membuat aplikasi AngularJS kita.
app.controller('TimerController', function($scope, $interval) { ... });: Ini menetapkan controller kita. Bayangkan ini sebagai otak aplikasi kita.
$scope.time = 0;: Ini menginisialisasi timer kita ke 0.
Fungsi startTimer, stopTimer, dan resetTimer:

startTimer menggunakan $interval untuk meningkatkan $scope.time setiap detik.
stopTimer membatalkan interval saat kita ingin menghentikan.
resetTimer menghentikan timer dan mengatur waktu kembali ke 0.

Bagaimana Semua Hal Ini Bekerja bersama

Ketika Anda membuka file HTML di browser Anda, AngularJS mulai bekerja. Itu melihat direktif ng-app dan ng-controller dan tahu untuk menggunakan kode JavaScript kita untuk mengontrol halaman.

{{time}} di HTML kita secara otomatis diperbarui setiap kali $scope.time berubah di JavaScript kita. Ini disebut binding data dua arah, dan itu adalah salah satu fitur yang paling menarik di AngularJS!

Ketika Anda mengklik tombol, fungsi yang sesuai di controller kita dipanggil, memperbarui timer sesuai kebutuhan.

Konsep Lanjut

Sekarang kita sudah mengenal dasar-dasar, mari kita lihat beberapa konsep lanjut yang kita gunakan:

Inyektasi Dependensi

Anda mungkin sudah melihat $scope dan $interval di fungsi controller kita. Ini adalah dependensi yang AngularJS "inyekt" ke dalam controller kita. Itu seperti framework memberikan kita alat khusus untuk digunakan dalam kode kita.

Services

$interval adalah service AngularJS. Services adalah kode yang dapat digunakan kembali yang melakukan tugas-tugas khusus. Dalam kasus ini, $interval membantu kita menjalankan fungsi secara berulang di interval yang ditentukan.

Tabel Metode

Berikut adalah tabel metode yang kita gunakan dalam aplikasi timer kita:

Metode	Deskripsi
startTimer()	Memulai timer, meningkatkan waktu setiap detik
stopTimer()	Menghentikan timer
resetTimer()	Menghentikan timer dan mengatur waktu kembali ke nol

Kesimpulan

Selamat! Anda baru saja membuat aplikasi AngularJS pertama Anda. Kita telah menempuh banyak hal, dari struktur HTML dasar hingga controller dan service AngularJS. Ingat, belajar mengoding seperti belajar bahasa baru - itu memerlukan latihan dan kesabaran. Jangan khawatir jika segala sesuatu belum jelas segera. Terus mencoba, dan segera Anda akan membuat aplikasi web yang menakjubkan!

Saat kita selesaikan, saya teringat kelas pemrograman pertamaku saat seorang murid bertanya, "Kapan saya akan tahu bahwa saya seorang pemrogram sebenarnya?" Saya tersenyum dan menjawab, "Saat Anda menyadari bahwa Google adalah teman terbaik setiap pemrogram!" Jadi jangan takut mencari jawaban, mencoba kode, dan terutama, bersenang-senang belajar!

Selamat coding, para master AngularJS masa depan!

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Aplikasi Cuaca

Tutorial Selanjutnya:

AngularJS - Aplikasi Leaflet