AngularJS - Pandangan Umum

Hai sana, para pengembang web masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia AngularJS. Jangan khawatir jika Anda baru dalam pemrograman - saya akan menjadi panduan ramah Anda, dan kita akan mengambil langkah ini satu demi satu. Pada akhir panduan ini, Anda akan memiliki pemahaman yang kuat tentang apa itu AngularJS. Jadi, mari kita mulai!

AngularJS - Overview

Fitur Umum

AngularJS seperti sebuah pisau Switzerland untuk pengembangan web. Itu adalah kerangka JavaScript yang kuat yang membantu kita bangun aplikasi web dinamis dengan mudah. Bayangkan Anda membangun sebuah rumah - AngularJS menyediakan Anda semua alat dan rancangan yang Anda butuhkan untuk menciptakan struktur yang indah dan fungsional.

Berikut adalah beberapa fitur umum yang membuat AngularJS menonjol:

Arsitektur Model-View-Controller (MVC): Ini seperti memiliki sebuah kotak alat yang teratur. Itu membantu memisahkan data aplikasi Anda (Model), antarmuka pengguna (View), dan logika bisnis (Controller).
Dua Arah Data Binding: Pahami ini seperti sebuah cermin ajaib. Ketika Anda mengubah sesuatu di satu sisi, itu secara otomatis diperbarui di sisi lain!
Inyektasi Dependensi: Ini seperti memiliki seorang asisten pribadi yang memberikan Anda persis apa yang Anda butuhkan, ketika Anda membutuhkannya.
Directives: Ini adalah petunjuk khusus yang memberitahu AngularJS bagaimana perilakunya. Itu seperti mengajarkan trick baru kepada seorang anjing yang sudah pintar!

mari kita lihat contoh sederhana untuk melihat beberapa fitur ini dalam aksi:

<!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>
<div ng-controller="MyController">
<h1>Hello, {{name}}!</h1>
<input type="text" ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.name = 'World';
});
</script>
</body>
</html>

Dalam contoh ini, kita menggunakan arsitektur MVC (ng-app, ng-controller), data binding dua arah (ng-model), dan direktif sederhana (ng-controller). Ketika Anda mengetik di field input, Anda akan melihat salam terupdate secara real-time. Magic, kan?

Fitur Utama

Sekarang kita sudah mencicipi, mari kita masuk lebih dalam ke fitur utama AngularJS:

Scope: Ini seperti lem yang menghubungkan aplikasi Anda. Ini adalah tempat data model Anda berada.
Controller: Pahami ini sebagai otak aplikasi Anda. Ini adalah tempat Anda menentukan perilaku.
Expressions: Ini seperti snippet kode kecil yang Anda dapat sematkan langsung di HTML Anda.
Filters: Ini adalah transformator data Anda. Mereka dapat memformat data Anda seperti yang Anda inginkan.

mari kita lihat ini dalam aksi:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Core Features</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello, {{name | uppercase}}!</h1>
<p>Your favorite fruit is: {{fruit}}</p>
<button ng-click="changeFruit()">Change Fruit</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.name = 'World';
$scope.fruit = 'Apple';
$scope.changeFruit = function() {
$scope.fruit = 'Banana';
};
});
</script>
</body>
</html>

Dalam contoh ini, kita menggunakan scope ($scope), controller (MyController), ekspresi ({{name}}), dan filter (| uppercase). Tombol menunjukkan bagaimana kita dapat mengubah data di scope.

Konsep

mari kita pecah beberapa konsep utama di AngularJS:

Modules: Ini seperti wadah untuk bagian-bagian berbeda aplikasi Anda. Mereka membantu mengatur kode Anda.
Services: Ini adalah potongan kode yang dapat digunakan kembali dan dapat dibagikan di seluruh aplikasi Anda.
Directives: Kita sudah membahas ini sebelumnya, tapi mereka sangat penting sehingga layak mendapat panggilan lagi. Mereka memperpanjang HTML dengan attribute dan elemen baru.
Templates: Ini adalah file HTML Anda dengan markup khusus AngularJS.

Berikut adalah contoh yang menampilkan beberapa konsep ini:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Concepts</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>{{greeting}}</h1>
<button ng-click="sayHello()">Say Hello</button>
</div>

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

app.service('GreetingService', function() {
this.getGreeting = function() {
return "Hello, AngularJS!";
};
});

app.controller('MyController', function($scope, GreetingService) {
$scope.sayHello = function() {
$scope.greeting = GreetingService.getGreeting();
};
});
</script>
</body>
</html>

Contoh ini menunjukkan module (myApp), service (GreetingService), controller menggunakan inyektasi dependensi, dan template dengan markup AngularJS.

Keuntungan AngularJS

AngularJS datang dengan sejumlah keuntungan:

Mudah Dipelajari: Struktur intuitifnya membuatnya ramah bagi pemula.
Komponen Dapat Digunakan Kembali: Tulis sekali, gunakan berkali-kali!
Pengujian Mudah: AngularJS dirancang dengan tes dalam pikiran.
Dukungan Komunitas: Sebuah komunitas yang luas dan aktif berarti bantuan selalu tersedia.

Kerugian AngularJS

Tapi seperti semua alat, itu tidak tanpa tantangan:

Masalah Kinerja: Aplikasi kompleks kadang-kadang bisa berjalan lambat.
Kurva Belajar: Meskipun mudah untuk mulai, memahami AngularJS memerlukan waktu.
Versi: Perubahan signifikan antara versi bisa sulit.

Direktif AngularJS

Direktif adalah saus rahasia AngularJS. Mereka memungkinkan Anda menciptakan komponen yang dapat digunakan kembali dan memperpanjang kemampuan HTML. Berikut adalah tabel dari beberapa direktif umum:

Direktif	Deskripsi
ng-app	Inisialisasi aplikasi AngularJS
ng-controller	Menentukan controller untuk aplikasi
ng-model	Mengikat input ke properti
ng-repeat	Mengulang elemen untuk setiap item dalam koleksi
ng-click	Menentukan perilaku klik
ng-show	Menampilkan atau menyembunyikan elemen
ng-hide	Menyembunyikan atau menampilkan elemen
ng-if	Menghapus atau membuat ulang elemen di DOM
ng-class	Mengikat satu atau lebih kelas CSS dinamis
ng-style	Memungkinkan gaya dinamis

mari kita lihat beberapa direktif ini dalam aksi:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Directives</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>
</head>
<body>
<div ng-controller="MyController">
<h1 ng-class="{red: isRed, bold: isBold}">Hello, AngularJS!</h1>
<button ng-click="toggleRed()">Toggle Red</button>
<button ng-click="toggleBold()">Toggle Bold</button>

<h2>My Fruits:</h2>
<ul>
<li ng-repeat="fruit in fruits">{{fruit}}</li>
</ul>

<input type="text" ng-model="newFruit">
<button ng-click="addFruit()">Add Fruit</button>

<p ng-show="fruits.length > 3">You have a lot of fruits!</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.isRed = false;
$scope.isBold = false;
$scope.fruits = ['Apple', 'Banana', 'Orange'];

$scope.toggleRed = function() {
$scope.isRed = !$scope.isRed;
};

$scope.toggleBold = function() {
$scope.isBold = !$scope.isBold;
};

$scope.addFruit = function() {
if($scope.newFruit) {
$scope.fruits.push($scope.newFruit);
$scope.newFruit = '';
}
};
});
</script>
</body>
</html>

Contoh ini menunjukkan beberapa direktif: ng-class, ng-click, ng-repeat, ng-model, dan ng-show. Itu menunjukkan bagaimana direktif ini dapat menciptakan aplikasi web dinamis dan interaktif hanya dengan beberapa baris kode.

Dan itu saja! Kita telah melakukan perjalanan singkat melalui AngularJS, dari fitur umum ke konsep utama dan direktif. Ingat, cara terbaik untuk belajar adalah dengan melakukan, jadi jangan khawatir untuk mencoba contoh ini dan menciptakan sendiri. Selamat coding, para master AngularJS masa depan!

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Rumah

Tutorial Seterusnya:

AngularJS - Tetapan persekitaran