Indonesia

Tutorial AngularJS

Aplikasi AngularJS

AngularJS - Aplikasi Bootstrap

Halo, para pemrogram yang bersemangat! Hari ini, kita akan memulai perjalanan menarik ke dunia AngularJS dan belajar bagaimana memulai sebuah aplikasi. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya akan menghidahkan Anda langkah demi langkah dalam proses ini, memastikan Anda memahami setiap bit kode yang kita tulis. Jadi, ambil minuman favorit Anda, rajinlah, dan mari kita masuk ke dalam!

AngularJS - Bootstrap Application

Apa Itu AngularJS?

Sebelum kita memulai memulai aplikasi kita, mari kitaambil sedikit waktu untuk memahami apa itu AngularJS. AngularJS adalah kerangka kerja JavaScript yang kuat yang membantu kita bangun aplikasi web dinamis. Itu seperti pisau瑞士军刀 untuk pengembang web, menyediakan alat untuk membuat hidup kita mudah dan kode kita lebih terorganisir.

Pertimbangkan AngularJS sebagai asisten yang membantu mengatur kode Anda dan membuatnya mudah untuk menciptakan situs web interaktif. Itu seperti memiliki seorang teman super cerdas yang membantu Anda membangun hal yang menakjubkan!

Memulai Aplikasi AngularJS

Sekarang, mari kita masuk ke bagian menarik - memulai aplikasi AngularJS kita. Memulai adalah hanya istilah yang indah untuk mengatakan "memulai" atau "menginisialisasi" aplikasi kita. Itu seperti memasukkan kunci di starter mobil Anda - itu membuat semua hal berjalan!

Langkah 1: Menyiapkan HTML

Pertama, kita perlu menciptakan file HTML yang akan menjadi dasar aplikasi AngularJS kita. mari kita sebutnya index.html:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My First AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h1>Welcome to My AngularJS App!</h1>
<div ng-controller="MainController">
<p>{{ message }}</p>
</div>
<script src="app.js"></script>
</body>
</html>

mari kitauraikan ini:

  1. Atribut ng-app="myApp" di dalam tag <html> memberitahu AngularJS bahwa ini adalah elemen root dari aplikasi kita.
  2. Kita menyertakan pustaka AngularJS menggunakan tag <script>.
  3. Kita memiliki <div> dengan ng-controller="MainController". Ini adalah tempat kita menampilkan konten dinamis kita.
  4. {{ message }} adalah placeholder untuk data yang kita akan tentukan di JavaScript kita.
  5. Kita menghubungkan ke file app.js kita, yang kita akan buat berikutnya.

Langkah 2: Membuat File JavaScript

Sekarang, mari kita buat file app.js kita:

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

app.controller('MainController', function($scope) {
$scope.message = "Hello, AngularJS World!";
});

Ini adalah apa yang terjadi:

  1. Kita menciptakan module Angular bernama 'myApp' menggunakan angular.module('myApp', []).
  2. Kita menentukan controller bernama 'MainController' menggunakan app.controller().
  3. Dalam controller, kita mengatur $scope.message ke pesan kita. Ini akan ditampilkan di HTML kita di tempat {{ message }}.

Memahami Magic

Sekarang, Anda mungkin bertanya-tanya, "Bagaimana ini semua bekerja bersama?" Pertanyaan bagus! Mari saya menjelaskan:

  1. Ketika halaman dimuat, AngularJS mencari direktif ng-app. Ini memberitahu AngularJS di mana untuk memulai kerjanya.
  2. Kemudian, ia mencari module yang kita tentukan (myApp) dan menginisialisasinya.
  3. Selanjutnya, ia menemukan direktif ng-controller dan menghubungkannya ke MainController kita.
  4. Controller mengatur message di $scope, yang seperti seorang kurir antara JavaScript kita dan HTML.
  5. Akhirnya, AngularJS mengganti {{ message }} di HTML kita dengan pesan yang sebenarnya.

Itu seperti tari yang teratur, dengan setiap bagian memainkan perannya dengan sempurna!

Memperluas Aplikasi Kita

Sekarang kita sudah menguasai dasar-dasar, mari kita menambahkan sedikit fungsi ke aplikasi kita. Kita akan membuat daftar tugas sederhana:

Perbarui index.html Anda:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My AngularJS To-Do App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h1>My To-Do List</h1>
<div ng-controller="TodoController">
<input type="text" ng-model="newTask">
<button ng-click="addTask()">Add Task</button>
<ul>
<li ng-repeat="task in tasks">{{ task }}</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>

Dan perbarui app.js Anda:

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

app.controller('TodoController', function($scope) {
$scope.tasks = ['Learn AngularJS', 'Build an app'];

$scope.addTask = function() {
if($scope.newTask) {
$scope.tasks.push($scope.newTask);
$scope.newTask = '';
}
};
});

mari kitauraikan apa yang baru:

  1. Kita menambahkan field input dengan ng-model="newTask". Ini membuat binding dua arah antara input dan $scope.newTask.
  2. ng-click="addTask()" di tombol memberitahu AngularJS untuk memanggil fungsi addTask() saat diklik.
  3. ng-repeat="task in tasks" membuat item list untuk setiap tugas dalam array kita.
  4. Dalam JavaScript kita, kita inisialisasi $scope.tasks dengan dua tugas.
  5. Fungsi addTask() menambahkan tugas baru ke array dan membersihkan field input.

Kesimpulan

Selamat! Anda baru saja memulai aplikasi AngularJS pertama Anda dan bahkan menambahkan sedikit fungsi kepadanya. Ingat, belajar mengoding adalah seperti belajar bahasa baru - itu memerlukan latihan dan kesabaran. Tetapi dengan setiap langkah, Anda menjadi semakin mahir dalam bahasa pengembangan web.

Saat kita selesai, ini adalah tabel yang menggabungkan direktif AngularJS utama yang kita gunakan:

Direktif Tujuan
ng-app Menentukan elemen root dari aplikasi AngularJS
ng-controller Menentukan controller yang digunakan untuk elemen HTML
ng-model Membuat binding data dua arah
ng-click Menentukan fungsi yang dijalankan saat elemen diklik
ng-repeat Mengulang section HTML untuk setiap item dalam array

Terus jelajahi, terus kode, dan terutama, tetap bersenang! Dunia pengembangan web luas dan menarik, dan Anda baru saja mengambil langkah pertama kepadanya. Sampaijumpa lagi, selamat coding!

Credits: Image by storyset

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