Indonesia

Tutorial AngularJS

Aplikasi AngularJS

Panduan Awal Mengenai.Controllers di AngularJS

Hai, para pengembang web yang sedang belajar! Hari ini, kita akan mendalam ke dunia yang menarik dari AngularJS Controllers. Jangan khawatir jika Anda masih baru dalam pemrograman – saya akan menjadi panduan yang ramah untukmu dalam perjalanan ini, menjelaskan segala sesuatu secara langkah demi langkah. Jadi, ambillah secangkir kopi, dan mari kita mulai!

AngularJS - Controllers

Apa Itu Controllers di AngularJS?

Sebelum kita masuk ke kode, mari kita pahami apa itu controllers dalam AngularJS. Picturkan controllers sebagai otak dari aplikasi Anda. Mereka bertanggung jawab untuk mengelola data dan perilaku halaman web Anda. Seperti bagaimana seorang pengontrol lalu lintas mengelola aliran kendaraan, controllers AngularJS mengelola aliran data dalam aplikasi Anda.

Peran Controllers

Controllers di AngularJS mempunyai beberapa tujuan penting:

  1. Mereka menginisialisasi data objek $scope.
  2. Mereka menambah perilaku ke objek $scope.
  3. Mereka bertindak sebagai jembatan antara pandangan ( apa yang pengguna lihat) dan model (data).

Sekarang, mari kita lihat bagaimana kita dapat membuat dan menggunakan controllers di AngularJS.

Controller AngularJS Pertama Anda

mari mulai dengan contoh sederhana untuk merasakan air.

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

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

mariuraikan ini:

  1. Kita mendefinisikan sebuah aplikasi AngularJS menggunakan ng-app="myApp".
  2. Kita membuat sebuah controller bernama MyFirstController menggunakan ng-controller.
  3. Dalam JavaScript kita, kita mendefinisikan controller dan menetapkan properti greeting di $scope.
  4. Dalam HTML kita, kita menggunakan {{ greeting }} untuk menampilkan nilai greeting.

Ketika Anda menjalankan kode ini, Anda akan melihat "Hello, AngularJS!" ditampilkan di halaman. Menggembira, kan?

Menambah Perilaku ke Controllers

Controllers tidak hanya untuk menampilkan data; mereka juga dapat menambah perilaku ke aplikasi Anda. mari buat contoh yang lebih interaktif:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Controller AngularJS Interaktif</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="CounterController">
<h2>Count: {{ count }}</h2>
<button ng-click="increment()">Increment</button>
<button ng-click="decrement()">Decrement</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('CounterController', function($scope) {
$scope.count = 0;

$scope.increment = function() {
$scope.count++;
};

$scope.decrement = function() {
$scope.count--;
};
});
</script>
</body>
</html>

Dalam contoh ini:

  1. Kita membuat CounterController yang menginisialisasi variabel count ke 0.
  2. Kita menedefinisikan dua fungsi: increment() dan decrement().
  3. Kita menggunakan ng-click untuk mengikat fungsi ini ke tombol klik.

Sekarang, ketika Anda mengklik tombol "Increment", hitungan naik, dan ketika Anda mengklik "Decrement", hitungan turun. Itu seperti memiliki mesin hitung kecil di halaman web Anda!

Bekerja dengan Forms

Controllers sangat berguna saat bekerja dengan forms. mari buat form sederhana yang menyapa pengguna:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Controller Form AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="GreetingController">
<form ng-submit="greet()">
<input type="text" ng-model="name" placeholder="Masukkan namamu">
<button type="submit">Sapa Saya!</button>
</form>
<h2>{{ greeting }}</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('GreetingController', function($scope) {
$scope.name = '';
$scope.greeting = '';

$scope.greet = function() {
if ($scope.name) {
$scope.greeting = 'Hello, ' + $scope.name + '!';
} else {
$scope.greeting = 'Silakan masukkan nama.';
}
};
});
</script>
</body>
</html>

Ini apa yang terjadi:

  1. Kita menggunakan ng-model="name" untuk mengikat field input ke properti name di controller kita.
  2. Fungsi greet() dipanggil saat form disubmit.
  3. Jika nama dimasukkan, kita membuat salam yang pribadi. Jika tidak, kita meminta nama.

Contoh ini menunjukkan bagaimana controllers dapat menangani input pengguna dan memperbarui pandangan sesuai nya.

Metode Controller

mari rangkum metode utama yang kita gunakan di controllers kita:

Metode Deskripsi
$scope.variableName Digunakan untuk mendefinisikan variabel yang dapat diakses di pandangan
$scope.functionName = function() {...} Digunakan untuk mendefinisikan fungsi yang dapat dipanggil dari pandangan
ng-click="functionName()" Digunakan di HTML untuk memanggil fungsi saat elemen diklik
ng-model="variableName" Digunakan untuk mengikat field input ke variabel di controller
ng-submit="functionName()" Digunakan untuk memanggil fungsi saat form disubmit

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dunia Controllers AngularJS. Kita telah menjelajahi dasar-dasar membuat controllers, menambah perilaku, dan bekerja dengan forms. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba konsep ini.

Dalam tahun-tahun pengajaran saya, saya menemukan bahwa cara terbaik untuk belajar adalah dengan melakukan. Jadi, mari Anda berlatih: coba membuat aplikasi daftar tugas sederhana menggunakan apa yang Anda pelajari tentang controllers. Mulai dengan menambah item, kemudian coba fitur seperti menandai item selesai atau menghapusnya.

Sekarang Anda teruskan perjalanan AngularJS Anda, Anda akan menemukan bahwa controllers hanya permulaan. Ada banyak hal lain untuk dieksplorasi, dari services ke directives dan lebih lanjut. Tetapi untuk sekarang, pukul punggung Anda – Anda telah berada dalam jalan untuk menjadi ahli AngularJS!

Semoga sukses dalam coding, dan ingat: di dunia pemrograman, setiap kesalahan adalah kesempatan untuk belajar sesuatu yang baru!

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Ekspresi
Tutorial Selanjutnya:
AngularJS - Filter