Malay

Tutorial AngularJS

Aplikasi AngularJS

AngularJS - Pertama Aplikasi

Selamat datang, para pemula pemrogram! Hari ini, kita akan memulai perjalanan menarik ke dunia AngularJS. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengantar Anda melalui aplikasi AngularJS pertama Anda. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan berjalan langkah demi langkah, dan sebelum Anda tahu, Anda akan membuat aplikasi web dinamis seperti seorang ahli!

AngularJS - First Application

Membuat Aplikasi AngularJS

Ayo mulai dari dasar. AngularJS adalah kerangka kerja JavaScript yang kuat yang membantu kita bangun aplikasi web interaktif. Pihakkan hati Anda, 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. Ini 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>Hello, {{name}}!</h2>
</div>

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

Ayo pecah ini:

  1. Kita mulai dengan struktur HTML standar.
  2. ng-app="myApp" di dalam tag <html> memberitahu AngularJS bahwa ini adalah elemen root dari aplikasi kita.
  3. Kita masukkan pustaka AngularJS menggunakan tag <script> di dalam section <head>.
  4. Dalam <body>, kita memiliki <div> dengan ng-controller="myCtrl". Ini menghubungkan HTML kita ke pengawas 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 mendefinisikan modul dan pengawas AngularJS.

Menjalankan Aplikasi AngularJS

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

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

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

Output

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

Hello, AngularJS Beginner!

Magic, kan? Tetapi bagaimana cara ini bekerja? Ayo masuk lebih mendalam!

Bagaimana AngularJS Integrasi dengan HTML

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

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

Berikut penjelasan lebih detil:

  1. ng-app: Directive ini inisialisasi aplikasi AngularJS. Itu memberitahu AngularJS untuk mengambil kendali bagian ini dari halaman. Dalam contoh kita, kita menempatkannya di tag <html>, membuat seluruh halaman menjadi aplikasi AngularJS.

  2. ng-controller: Directive ini menentukan kelas pengawas JavaScript. Pengawas adalah tempat kita mendefinisikan perilaku aplikasi dengan mendefinisikan fungsi dan nilai. Dalam contoh kita, myCtrl adalah pengawas kita.

  3. {{ }}: Dua kurung kurawal ini adalah ekspresi AngularJS. Mereka memberitahu AngularJS untuk mengevaluasi ekspresi di dalamnya dan mengganti itu 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 module AngularJS baru bernama 'myApp'. Ini cocok dengan nama yang kita gunakan di ng-app="myApp".

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

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

Dan itu dia! Anda telah membuat 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 alami. Ketika saya pertama kali mengajar AngularJS, saya memiliki seorang murid yang begitu bingung oleh semua kurung kurawal itu dia mulai menyebutnya "bahasa mustache"! Tetapi menjelang akhir kursus, dia membuat aplikasi kompleks dan tersenyum pada kesulitannya awalnya.

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

Credits: Image by storyset

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