Indonesia

Tutorial AngularJS

Aplikasi AngularJS

AngularJS - First Application

Selamat datang, para pemula pengembang! Hari ini, kita akan memulai perjalanan menarik ke dunia AngularJS. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk menggapai Anda melalui aplikasi AngularJS pertama Anda. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan mengambil langkah-langkah perlahan-lahan, dan sebelum Anda mengetahui, Anda akan menciptakan aplikasi web dinamis seperti seorang ahli!

AngularJS - First Application

Membuat Aplikasi AngularJS

mari kita mulai dari dasar. AngularJS adalah kerangka kerja JavaScript yang kuat yang membantu kita membangun aplikasi web interaktif. Pensejukkan saja itu seperti sebuah kotak peralatan ajaib yang membuat halaman web kita hidup!

Untuk membuat aplikasi AngularJS pertama kita, kita perlu mengatur sebuah file HTML sederhana. Berikut adalah penampilannya:

<!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="myCtrl">
<h2>Hallo, {{name}}!</h2>
</div>

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

Mari kitauraikan ini:

  1. Kita mulai dengan struktur HTML standar.
  2. ng-app="myApp" dalam tag <html> memberitahu AngularJS bahwa ini adalah elemen akar aplikasi kita.
  3. Kita sisipkan pustaka AngularJS menggunakan tag <script> di section <head>.
  4. Dalam <body>, kita memiliki <div> dengan ng-controller="myCtrl". Ini menghubungkan HTML kita ke pengendali AngularJS.
  5. Dalam <div> ini, kita memiliki {{name}}. Ini adalah ekspresi AngularJS yang akan menampilkan nilai name.
  6. Akhirnya, kita memiliki tag <script> tempat kita menentukan modul dan pengendali AngularJS kita.

Menjalankan Aplikasi AngularJS

Sekarang kita sudah membuat aplikasi kita, mari lihat bagaimana menjalankan nya:

  1. Simpan kode di atas dalam file yang dinamai index.html.
  2. Buka file ini di browser (seperti Chrome atau Firefox).

Itu saja! Aplikasi AngularJS Anda sekarang sudah berjalan. Apakah itu mudah daripada yang Anda pikirkan?

Output

Ketika Anda membuka file index.html di browser Anda, Anda seharusnya melihat:

Hallo, AngularJS Beginner!

Magic, kan? Tetapi bagaimana ini bekerja? Mari kita masuk lebih dalam!

Bagaimana AngularJS Integrasi dengan HTML

AngularJS secara mudah integrasi dengan HTML melalui apa yang kita sebut "directives". Ini adalah atribut khusus yang memberitahu AngularJS untuk melakukan sesuatu dengan elemen DOM. Mari kita lihat direktif utama yang kita gunakan:

Directive Tujuan
ng-app Menentukan elemen akar dari aplikasi AngularJS
ng-controller Menentukan pengendali mana yang akan digunakan untuk elemen HTML
{{ }} Menampilkan nilai ekspresi

Berikut penjelasan lebih detil:

  1. ng-app: Direktif ini inisiasi aplikasi AngularJS. Ini memberitahu AngularJS untuk mengambil kontrol bagian ini dari halaman. Dalam contoh kita, kita menaruhnya di tag <html>, membuat seluruh halaman menjadi aplikasi AngularJS.

  2. ng-controller: Direktif ini menentukan kelas pengendali JavaScript. Pengendali adalah tempat kita tentukan perilaku aplikasi dengan menentukan fungsi dan nilai. Dalam contoh kita, myCtrl adalah pengendali kita.

  3. {{ }}: Dua kurung kurawal ini adalah ekspresi AngularJS. Mereka memberitahu AngularJS untuk mengevaluasi ekspresi di dalamnya dan menggantinya dengan hasilnya. Dalam kasus kita, {{name}} diganti dengan "AngularJS Beginner".

Sekarang, mari kita lihat kode JavaScript kita:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'AngularJS Beginner';
});

  1. angular.module('myApp', []) membuat modul AngularJS baru bernama 'myApp'. Ini cocok dengan nama kita gunakan di ng-app="myApp".

  2. app.controller('myCtrl', function($scope) { ... }) menentukan pengendali kita. $scope adalah objek khusus yang bertindak sebagai jembatan antara pengendali dan pandangan (HTML kita).

  3. $scope.name = 'AngularJS Beginner' menyetel properti di $scope. Ini adalah yang memungkinkan kita untuk menggunakan {{name}} di HTML kita.

Dan itu dia! Anda baru saja menciptakan dan memahami aplikasi AngularJS pertama Anda. Apakah itu menarik?

Ingat, belajar mengoding adalah seperti belajar bahasa baru. Mungkin terlihat membingungkan pada awalnya, tapi dengan latihan, itu menjadi tabiat. Ketika saya pertama kali mengajar AngularJS, saya punya seorang murid yang sangat bingung oleh semua kurung kurawal itu dan dia mulai menyebutnya "bahasa mustache"! Tetapi pada akhir pelajaran, dia menciptakan aplikasi kompleks dan tersenyum pada kesulitannya awalnya.

Jadi jangan khawatir jika segala sesuatu tidak langsung berjalan. Terus latihan, cobalah memodifikasi kode ( apa yang terjadi jika Anda mengubah 'AngularJS Beginner' menjadi nama Anda sendiri?), dan yang paling penting, bersenang-senang! Dalam pelajaran berikutnya, kita akan jelajahi fitur AngularJS lainnya dan mulai membangun aplikasi yang lebih kompleks. Sampai jumpa, selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Arsitektur MVC
Tutorial Selanjutnya:
AngularJS - Direktif