Malay

Tutorial AngularJS

Aplikasi AngularJS

AngularJS - Aplikasi Bootstrap

Halo, para programer yang sedang belajar! Hari ini, kita akan memulai perjalanan yang menarik ke dunia AngularJS dan belajar bagaimana memulai sebuah aplikasi menggunakan bootstrap. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya akan mengarahkan Anda langkah demi langkah dalam proses ini, dan memastikan Anda mengerti setiap bit kode yang kita tulis. Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita masuk ke dalam!

AngularJS - Bootstrap Application

Apa Itu AngularJS?

Sebelum kita memulai memulai aplikasi kita, mari kitaambil waktu untuk memahami apa itu AngularJS. AngularJS adalah kerangka kerja JavaScript yang kuat yang membantu kita dalam membangun aplikasi web dinamis. Itu seperti pisau Swiss Army bagi pengembang web, menyediakan alat-alat untuk membuat hidup kita lebih mudah dan kode kita lebih terorganisir.

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

Memulai Aplikasi AngularJS

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

Langkah 1: Menyiapkan HTML

Pertama-tama, 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>App AngularJS Pertama Saya</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h1>Selamat Datang di App AngularJS Saya!</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 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 akan menjadi 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 selanjutnya.

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 = "Halo, Dunia AngularJS!";
});

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 menset $scope.message ke pesan kita. Ini akan ditampilkan di HTML kita di tempat {{ message }}.

Memahami Magiknya

Sekarang, Anda mungkin bertanya-tanya, "Bagaimana hal ini bekerja bersamaan?" Pertanyaan yang bagus! Biarkan saya menjelaskan:

  1. Ketika halaman dimuat, AngularJS mencari direktif ng-app. Ini memberitahu AngularJS dimana untuk mulai bekerja.
  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 menset message di $scope, yang seperti seorang kurir antara JavaScript kita dan HTML.
  5. Akhirnya, AngularJS mengganti {{ message }} di HTML kita dengan pesan yang kita tentukan.

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

Memperluas Aplikasi Kita

Sekarang kita sudah mengenal 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>App To-Do AngularJS Saya</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h1>Daftar Tugas Saya</h1>
<div ng-controller="TodoController">
<input type="text" ng-model="newTask">
<button ng-click="addTask()">Tambah Tugas</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 = ['Belajar AngularJS', 'Bangun aplikasi'];

$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 di 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 coding adalah seperti belajar bahasa baru - itu memerlukan latihan dan kesabaran. Tetapi dengan setiap langkah, Anda menjadi semakin mahir dalam bahasa pengembangan web.

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

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

Terus jelajah, terus kode, dan yang paling penting, terus bersenang-senang! Dunia pengembangan web luas dan menarik, dan Anda baru saja membuat langkah pertama Anda ke dalamnya. Sampai jumpa lagi, selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Aplikasi Notepad
Tutorial Seterusnya:
AngularJS - Aplikasi Daftar Masuk