Indonesia

Tutorial AngularJS

Aplikasi AngularJS

Terjemahan ke Bahasa Indonesia

AngularJS - Aplikasi In-line

Pengenalan

Halo sana, para maestro AngularJS masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan yang menarik ke dunia aplikasi in-line AngularJS. Sebagai seseorang yang telah mengajar pemrograman selama bertahun-tahun ( mari katakan saja saya ingat saat disket masih fleksibel), saya bisa menjamin Anda bahwa setelah tutorial ini, Anda akan dapat membuat aplikasi in-line AngularJS pertama Anda dengan kepercayaan.

AngularJS - In-line Application

Apa Itu Aplikasi In-line?

Sebelum kita memasuki kode, mari kita pahami apa yang dimaksud dengan "aplikasi in-line." Bayangkan Anda di sebuah buffet ( ikuti saya disini, saya berjanji analogi ini akan membuat sense). Aplikasi in-line adalah seperti memiliki semua makanan kesukaan Anda di dalam satu piring - semua yang Anda butuhkan ada di sana, siap digunakan. Dalam istilah AngularJS, ini berarti kita akan menulis keseluruhan aplikasi dalam satu file HTML. Tidak ada file JavaScript terpisah, tidak ada modul eksternal - hanya kebaikan AngularJS murni.

Menyiapkan Aplikasi In-line Pertama Anda

Langkah 1: Kerangka HTML

Mari kita mulai dengan dasar file HTML kita:

<!DOCTYPE html>
<html>
<head>
<title>Aplikasi In-line AngularJS Pertama Saya</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

Ini mungkin terlihat familiar jika Anda telah melakukan pengembangan web sebelumnya. Jika tidak, jangan khawatir! Kita hanya mengatur dokumen HTML dasar dan menyertakan pustaka AngularJS dari Content Delivery Network (CDN). Bayangkan ini seperti mengundang AngularJS ke pesta pemrograman kita.

Langkah 2: Menambahkan Direktif ng-app

Sekarang, mari kita katakan ke AngularJS dimana aplikasi kita berada:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Aplikasi In-line AngularJS Pertama Saya</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

Kita menambahkan ng-app="myApp" ke tag <html>. Ini seperti menaruh sebuah tanda besar di rumah Anda mengatakan, "AngularJS tinggal di sini!" Bagian myApp adalah nama yang kita berikan ke aplikasi kita.

Membuat Controller Pertama

Apa Itu Controller?

Dalam AngularJS, controller adalah seperti otak dari aplikasi Anda. Itu mengelola data dan perilaku bagian tertentu dari aplikasi Anda. Mari kita buat satu!

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Aplikasi In-line AngularJS Pertama Saya</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Hello, AngularJS World!";
});
</script>
</body>
</html>

mari kitauraikan ini:

  1. Kita menambahkan ng-controller="MainController" ke tag <body>. Ini memberitahu AngularJS bagian mana dari HTML dikendalikan oleh controller ini.
  2. Dalam tag <script>, kita membuat modul aplikasi kita dengan angular.module('myApp', []).
  3. Kita kemudian menentukan controller kita menggunakan app.controller(). Parameter $scope adalah cara kita memindahkan data antara controller dan view (HTML kita).
  4. Kita menetapkan properti greeting di $scope. Ini membuatnya tersedia di HTML kita.
  5. Dalam HTML, kita menggunakan {{greeting}} untuk menampilkan nilai greeting.

Menambahkan Interaksi Pengguna

Mari kita membuat aplikasi kita sedikit lebih interaktif dengan menambahkan tombol yang mengubah pesan:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Aplikasi In-line AngularJS Pertama Saya</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>
<button ng-click="changeGreeting()">Ganti Pesan</button>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Hello, AngularJS World!";
$scope.changeGreeting = function() {
$scope.greeting = "Greetings, Earthling!";
};
});
</script>
</body>
</html>

Ini adalah apa yang baru:

  1. Kita menambahkan tombol dengan direktif ng-click. Ini memberitahu AngularJS untuk menjalankan fungsi changeGreeting() saat tombol ditekan.
  2. Dalam controller kita, kita menentukan fungsi changeGreeting() di $scope. Fungsi ini mengubah nilai greeting.

Data Binding Dalam Aksi

Salah satu fitur yang paling kuat di AngularJS adalah data binding dua arah. Mari kita lihatnya dalam aksi:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Aplikasi In-line AngularJS Pertama Saya</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>
<input type="text" ng-model="name">
<p>Hallo, {{name}}!</p>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Selamat datang ke aplikasi AngularJS kami!";
$scope.name = "Anonim";
});
</script>
</body>
</html>

Dalam contoh ini:

  1. Kita menambahkan field input dengan ng-model="name". Ini mem-bind nilai input ke properti name di $scope.
  2. Kita menampilkan nilai name menggunakan {{name}} dalam paragraf.
  3. Ketika Anda mengetik di field input, Anda akan melihat pesan hallo di paragraf update secara real-time. Itu adalah keajaiban data binding dua arah!

Kesimpulan

Selamat! Anda telah membuat aplikasi in-line AngularJS pertama Anda. Kita telah melihat dasar-dasar penyiapan aplikasi AngularJS, membuat controller, mengelola interaksi pengguna, dan mengimplentasikan data binding dua arah. Ingat, seperti belajar keterampilan baru, memahami AngularJS memerlukan latihan. Jadi jangan takut untuk mencoba, merusak sesuatu, dan belajar dari kesalahan Anda. Itu adalah bagaimana kita semua menjadi pengembang seperti saat ini!

Berikut adalah tabel yang menggabungkan direktif AngularJS penting yang kita gunakan:

Direktif Tujuan
ng-app Menentukan dan bootstraps aplikasi AngularJS
ng-controller Menentukan controller untuk bagian tertentu dari aplikasi Anda
ng-click Menentukan fungsi yang akan dijalankan saat elemen diklik
ng-model Bind input, select, atau textarea ke properti di $scope

Terus coding, terus belajar, dan terutama, bersenang-senang! Ingat, setiap ahli pernah menjadi pemula. Perjalanan AngularJS Anda baru saja dimulai!

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Unggah File
Tutorial Selanjutnya:
AngularJS - Menu Nav