AngularJS - Overview

Hai teman-teman 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 Anda, dan kita akan bergerak langkah demi langkah. Pada akhir tutorial ini, Anda akan memiliki pengertian yang kuat tentang apa itu AngularJS. Mari kita mulai!

Fitur Umum

AngularJS seperti sebuah pisau Switzerland untuk pengembangan web. Ini adalah kerangka kerja JavaScript yang kuat yang membantu kita membangun 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 terorganisir. Ini membantu memisahkan data aplikasi Anda (Model), antarmuka pengguna (View), dan logika bisnis (Controller).
Dua-way Data Binding: PERTAMAkan 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, pada saat Anda butuhnya.
Directives: Ini adalah petunjuk khusus yang memberitahu AngularJS bagaimana perilakunya. Itu seperti mengajarkan trick baru kepada seekor anjing yang sudah cerdas!

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), two-way data binding (ng-model), dan direktif sederhana (ng-controller). Ketika Anda mengetik di field input, Anda akan melihat salam diperbarui 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 mengikat aplikasi Anda bersama. Ini adalah tempat data model Anda tinggal.
Controller: PERTAMAkan ini seperti otak dari aplikasi Anda. Ini adalah tempat Anda menentukan perilaku.
Expressions: Ini seperti potongan kode kecil yang Anda dapat sematkan langsung di HTML Anda.
Filters: Ini adalah transformer data Anda. Mereka dapat memformat data Anda sesuai dengan kehendak Anda.

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 dalam scope.

Konsep

Mari kitauraikan beberapa konsep penting di AngularJS:

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

Ini 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 Belajar: Struktur intuitifnya membuatnya ramah bagi pemula.
Komponen Dapat Digunakan Kembali: Tulis sekali, gunakan berkali-kali!
Pengujian Mudah: AngularJS dirancang dengan pengujian dalam pikiran.

Kerugian AngularJS

Tapi seperti semua alat, itu juga tidak tanpa tantangan:

Masalah Kinerja: Aplikasi kompleks kadang-kadang bisa berjalan lambat.
Kurva Belajar: Meskipun mudah untuk memulai, 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:

Directive	Description
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 saat diklik
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 CSS class secara dinamis
ng-style	Mengijinkan 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 hingga konsep utama dan direktifnya. 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 - Beranda

Tutorial Selanjutnya:

AngularJS - Pengaturan Lingkungan