AngularJS - Kongsi Aplikasi

Hai sana, para ahli AngularJS masa depan! Hari ini, kita akan memulakan sebuah perjalanan menarik ke dunia aplikasi kongsi menggunakan AngularJS. Sebagai guru sains komputer yang ramah di lingkungan jiran, saya gembira untuk menghidangkan anda dalam petualangan ini. Jangan bimbang jika anda baru dalam programming - kita akan mulakan dari asas dan maju ke arah atas. Jadi, ambil secangkir kopi (atau minuman kegemaran anda), dan mari kita masuk ke dalam!

AngularJS - Share Application

apa itu AngularJS?

Sebelum kita masuk ke dalam aplikasi kongsi, mari kitaambil sedikit masa untuk memahami apa itu AngularJS. AngularJS adalah kerangka kerja JavaScript yang kuat yang membantu kita membina aplikasi web dinamik. Ia seperti sebuah pisau tiga sisik Switzerland untuk pengembang web, menyediakan alat untuk membuat hidup kita lebih mudah dan kod kita lebih teratur.

Sejarah Singkat

AngularJS dicipta oleh Google pada tahun 2010, dan ia cepat menjadi popular di kalangan pengembang. Ia dinamakan "Angular" kerana penggunaan kurungan sudut (<>) dalam HTML, dan "JS" adalah singkatan JavaScript. Cerdas, kan?

Menyiapkan Persekitaran Kerja

Untuk mula dengan AngularJS, kita perlu menyiapkan persekitaran pembangunan kita. Jangan bimbang; ia lebih mudah daripada mengassembly furnitur IKEA!

Langkah 1: Sertakan AngularJS dalam Projek Anda

Pertama, kita perlu menyertakan pustaka AngularJS dalam fail HTML kita. Kita boleh melakukan ini dengan menambahkan tag script dalam seksyen <head> fail HTML kita:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>

Baris ini mengambil pustaka AngularJS dari pelayan Google. Ia seperti memesan pizza secara online - anda mendapatkan apa yang anda perlukan dihadapan pintu anda!

Membuat Aplikasi AngularJS Pertama

Sekarang kita sudah mempunyai AngularJS siap digunakan, mari kita buat aplikasi pertama kita. Kita akan mulakan dengan sesuatu yang mudah - aplikasi "Hello, World!".

Langkah 2: Tetapkan HTML

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<h1>{{ greeting }}</h1>
</div>

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

mari kita pecahkan ini:

ng-app="myApp": Ini memberitahu AngularJS bahawa ini adalah elemen akar aplikasi kita.
ng-controller="myCtrl": Ini menentukan pengawal bagi aplikasi kita.
{{ greeting }}: Ini adalah ekspresi AngularJS yang akan menunjukkan nilai greeting.
Dalam script, kita buat module AngularJS dan pengawal, kemudian menetapkan nilai greeting.

Bila anda buka fail HTML ini di pelayar, anda akan melihat "Hello, World!" ditunjukkan. Selamat! Anda baru saja membuat aplikasi AngularJS pertama anda!

Kongsi Data Antara Pengawal

Sekarang, mari kita masuk ke inti pelajaran kita - kongsi data antara bahagian-bahagian berbeza aplikasi kita. Ini adalah penting untuk membina aplikasi kompleks di mana komponen berbeza perlu berkomunikasi antara satu sama lain.

Menggunakan Services

Servis dalam AngularJS adalah cara yang bagus untuk kongsi data antara pengawal. Anggap servis sebagai penolong yang dapat membawa mesej antara bahagian-bahagian berbeza aplikasi anda.

mari kita buat aplikasi mudah yang kongsi data antara dua pengawal menggunakan servis:

<!DOCTYPE html>
<html ng-app="shareApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="Controller1">
<h2>Controller 1</h2>
<input type="text" ng-model="message">
<button ng-click="shareMessage()">Kongsi Mesej</button>
</div>

<div ng-controller="Controller2">
<h2>Controller 2</h2>
<p>Mesej Kongsi: {{ sharedMessage }}</p>
</div>

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

app.service('ShareService', function() {
var message = '';
return {
setMessage: function(msg) {
message = msg;
},
getMessage: function() {
return message;
}
};
});

app.controller('Controller1', function($scope, ShareService) {
$scope.shareMessage = function() {
ShareService.setMessage($scope.message);
};
});

app.controller('Controller2', function($scope, ShareService) {
$scope.sharedMessage = ShareService.getMessage();
$scope.$watch(function() {
return ShareService.getMessage();
}, function(newValue) {
$scope.sharedMessage = newValue;
});
});
</script>
</body>
</html>

mari kita pecahkan ini:

Kita buat servis yang dipanggil ShareService yang mempunyai method untuk menetapkan dan mendapatkan mesej.
Controller1 mempunyai medan input dan butang. Bila butang diklik, ia menetapkan mesej dalam ShareService.
Controller2 menunjukkan mesej kongsi. Ia menggunakan $watch untuk mengemaskini mesej yang ditunjukkan bila ia berubah dalam servis.

Contoh ini menunjukkan bagaimana kita boleh menggunakan servis untuk kongsi data antara dua pengawal. Ia seperti menyuruh catatan di kelas, tetapi jauh lebih efektif!

Teknik Kongsi Data Lanjut

Sebagai kita terus maju dalam perjalanan AngularJS kita, kita akanjumpa teknik lanjut untuk kongsi data. Berikut adalah jadual yang menggabungkan beberapa daripada kaedah ini:

Kaedah	Deskripsi	Kesgunaan
Services	Objek singleton untuk kongsi data dan logik	Kongsi data antara pengawal
Events	Buat dan siarkan peristiwa	Komunikasi antara lingkungan induk dan anak
$rootScope	Lingkungan aplikasi seluruh	Kongsi data di seluruh aplikasi
Factories	Sama seperti servis, tetapi lebih fleksibel	Membuat dan mengonfigurasikan objek kongsi
Values	Objek nilai mudah	Kongsi data konfigurasi

Setiap kaedah ini mempunyai kekuatan dan kesgunaan tersendiri. Sepanjang anda menjadi familiar dengan AngularJS, anda akan belajar bila untuk menggunakan setiap satu.

Kesimpulan

Dan di situ anda ada, rakan-rakan! Kita telah mengambil langkah pertama ke dunia aplikasi kongsi dengan AngularJS. Kita telah belajar bagaimana untuk menyiapkan aplikasi AngularJS, membuat pengawal, dan kongsi data antara mereka menggunakan servis.

Ingat, belajar untuk mengoding adalah seperti belajar menunggang basikal - mungkin kelihatan berayun-rayun pada awalnya, tetapi dengan latihan, anda akan mampu melaju dengan cepat. Terus cuba, terus kod, dan terutamanya, bersenang-senang!

Dalam pelajaran berikutnya, kita akan masuk lebih mendalam ke dalam arahan AngularJS dan bagaimana mereka boleh membuat aplikasi kita lebih dinamik dan interaktif. Sampaijumpa lagi, kod yang gembira!

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Aplikasi Peta

Tutorial Seterusnya:

AngularJS - Aplikasi Cuaca