Malay

Tutorial AngularJS

Aplikasi AngularJS

AngularJS - Aplikasi Timer

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

AngularJS - Timer Application

Apa Itu AngularJS?

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

Menyiapkan Proyek Kita

Langkah 1: Menambahkan AngularJS

Pertama-tama, kita perlu menambahkan AngularJS ke proyek kita. Itu seperti mengundang seorang teman super pintar untuk membantu kita dalam kerjakan tugas. 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 peralatan ajaib yang kita bicarakan sebelumnya.

Langkah 2: Membuat Struktur HTML

Sekarang, mari kita buat struktur dasar aplikasi timer kita. Bayangkan ini sebagai sketsa rencana 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 aplikasi Angular bernama "timerApp".
  • ng-controller="TimerController": Ini menerapkan controller (yang kita akan buat segera) 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 tempat magis 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:

  1. var app = angular.module('timerApp', []);: Ini membuat aplikasi AngularJS kita.

  2. app.controller('TimerController', function($scope, $interval) { ... });: Ini menetapkan controller kita. Bayangkan ini sebagai otak aplikasi kita.

  3. $scope.time = 0;: Ini menginisialisasi timer kita ke 0.

  4. Fungsi startTimer, stopTimer, dan resetTimer:

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

Bagaimana Semua Itu 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 pengikatan 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 seperti yang diperlukan.

Konsep Tingkat Lanjut

Sekarang kita sudah menguasai dasar-dasar, mari kita lihat beberapa konsep yang lebih tingkat lanjut kita gunakan:

Inyektasi Dependensi

Anda mungkin telah melihat $scope dan $interval di fungsi controller kita. Ini adalah dependensi yang AngularJS "inyektasi" ke dalam controller kita. Itu seperti kerangka ini memberikan kita peralatan khusus untuk digunakan dalam kode kita.

Services

$interval adalah service AngularJS. Services adalah potongan kode yang dapat digunakan kembali dan melakukan 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 melihat banyak hal, dari struktur HTML dasar ke controller dan service AngularJS. Ingat, belajar mengoding seperti belajar bahasa baru - itu memerlukan latihan dan kesabaran. Jangan khawatir jika segala sesuatu tidak langsung berjalan. Tetap mencoba, dan segera Anda akan membuat aplikasi web yang menakjubkan!

Saat kita mengakhiri, saya teringat kelas pemrograman pertama saya ketika seorang siswa bertanya, "Kapan saya akan tahu bahwa saya seorang pemrogram yang nyata?" 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!

Happy coding, para master AngularJS masa depan!

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Aplikasi Cuaca
Tutorial Seterusnya:
AngularJS - Aplikasi Leaflet