AngularJS - Aplikasi Dalam Talian

Pengenalan

Hai sana, para maestro AngularJS masa depan! Saya begitu gembira menjadi panduannya dalam perjalanan menarik ke dunia aplikasi AngularJS dalam talian. Sebagai seseorang yang telah mengajar pemrograman selama tahun-tahun yang lebih banyak daripada yang sayainginkan ( mari katakan saya ingat saat cakram lempeng benar-benar lempeng), saya dapat menjamin anda bahawa pada akhir panduan ini, anda akan mencipta aplikasi AngularJS dalam talian pertama anda dengan keyakinan.

AngularJS - In-line Application

Apa Itu Aplikasi Dalam Talian?

Sebelum kita melompat ke kod, mari kita faham apa yang dimaksud oleh "aplikasi dalam talian". Bayangkan anda di sebuah buffét ( ikutkan saya disini, saya janji analogi ini akan membuat sense). Aplikasi dalam talian adalah seperti memiliki semua hidangan kesukaan anda di dalam satu piring - semua yang anda perlukan ada di sana, siap untuk digunakan. Dalam istilah AngularJS, ini berarti kita akan menulis keseluruhan aplikasi dalam satu fail HTML. Tiada fail JavaScript terpisah, tiada modul eksternal - hanya kebaikan AngularJS murni.

Menyiapkan Aplikasi Dalam Talian Pertama Anda

Langkah 1: Skelet HTML

Mari kita mulai dengan dasar fail HTML kami:

<!DOCTYPE html>
<html>
<head>
<title>Aplikasi Dalam Talian AngularJS Pertama Saya</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

Ini mungkin nampak familiar jika anda telah melakukan pengembangan web sebelumnya. Jika tidak, jangan khawatir! Kita hanya mensetting dokumen HTML dasar dan menyertakan pustaka AngularJS dari CDN (Content Delivery Network). Bayangkan ini seperti mengundang AngularJS ke pesta coding kita.

Langkah 2: Menambah Direktif ng-app

Sekarang, mari kita katakan kepada AngularJS di mana aplikasi kita tinggal:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Aplikasi Dalam Talian AngularJS Pertama Saya</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

Kami menambah ng-app="myApp" ke tag <html>. Ini seperti meletakkan sebuat tanda besar di rumah anda katakan, "AngularJS tinggal di sini!" Bagian myApp adalah nama yang kita berikan kepada aplikasi kita.

Mencipta Controller Pertama

Apa Itu Controller?

Dalam AngularJS, controller adalah seperti otak aplikasi anda. Ia mengurus data dan perilaku bagi sebahagian khusus aplikasi anda. Mari kita buat satu!

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

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

mari kitauraikan ini:

Kita menambah ng-controller="MainController" ke tag <body>. Ini memberitahu AngularJS bahawa sebahagian daripada HTML ini dikawal oleh controller ini.
Dalam tag <script>, kita mencipta modul aplikasi kita dengan angular.module('myApp', []).
Kemudian kita tentukan controller kita menggunakan app.controller(). Parameter $scope adalah bagaimana kita memindahkan data antara controller dan pandangan (HTML) kita.
Kita menetapkan properti greeting di $scope. Ini menjadikannya tersedia di HTML kita.
Dalam HTML, kita gunakan {{greeting}} untuk memaparkan nilai greeting.

Menambah Interaksi Pengguna

Mari kita buat aplikasi kita sedikit lebih interaktif dengan menambah butang yang mengubah salam:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Aplikasi Dalam Talian AngularJS Pertama Saya</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>
<button ng-click="changeGreeting()">Ubah Salam</button>

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

Ini adalah yang baru:

Kita menambah butang dengan direktif ng-click. Ini memberitahu AngularJS untuk memanggil fungsi changeGreeting() apabila butang diklik.
Dalam controller kita, kita tentukan fungsi changeGreeting() di $scope. Fungsi ini mengubah nilai greeting.

Pemasangan Data Dalam Tindakan

Salah satu ciri paling kuat AngularJS adalah pemasangan data dua hala. Mari kita lihat ia dalam tindakan:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Aplikasi Dalam Talian AngularJS Pertama Saya</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>
<input type="text" ng-model="name">
<p>Hello, {{name}}!</p>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Welcome to our AngularJS App!";
$scope.name = "Anonymous";
});
</script>
</body>
</html>

Dalam contoh ini:

Kita menambah medan input dengan ng-model="name". Ini mengikat nilai input ke properti name di $scope.
Kita memaparkan nilai name menggunakan {{name}} dalam paragraf.
Sementara anda mengetik di medan input, anda akan melihat salam mengubah secara real-time. Itu adalah keajaiban pemasangan data dua hala!

Kesimpulan

Selamat! Anda telah mencipta aplikasi AngularJS dalam talian pertama anda. Kita telah meliputi dasar mensetting aplikasi AngularJS, mencipta controller, mengurus interaksi pengguna, dan mengimplimentasikan pemasangan data dua hala. Ingat, seperti belajar apa jua kemahiran baru, memahami AngularJS memerlukan latihan. Jadi jangan takut untuk mencuba, merobohkan hal-hal, dan belajar dari kesilapan anda. Itu adalah bagaimana kita semua menjadi pengembang seperti yang kita adalah hari ini!

Terus kod, terus belajar, dan terutamanya, bersenang-senang! Ingat, setiap ahli pernah menjadi pemula. Perjalanan AngularJS anda baru saja dimulai!

Ini adalah jadual yang menggabungkan direktif AngularJS utama yang kita gunakan:

Direktif	Tujuan
ng-app	Menentukan dan memulakan aplikasi AngularJS
ng-controller	Menentukan controller untuk sebahagian aplikasi
ng-click	Menentukan fungsi untuk dipanggil saat elemen diklik
ng-model	Mengikat input, select, atau textarea ke properti di `$scope`

Terus kod, terus belajar, dan terutamanya, bersenang-senang! Ingat, setiap ahli pernah menjadi pemula. Perjalanan AngularJS anda baru saja dimulai!

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Muat Naik Fail

Tutorial Seterusnya:

AngularJS - Menu Pandu