AngularJS - Aplikasi Carta
Hai, para pemrogram yang sedang mencari ilmu! Hari ini, kita akan memulakan sebuah perjalanan yang menarik ke dunia AngularJS dan aplikasi carta. Sebagai guru sains komputer yang ramah di lingkungan sekitar anda, saya gembira untuk memandu anda dalam pengembaraan ini. Jangan bimbang jika anda baru dalam bidang pemrograman - kita akan mulakan dari asas dan maju ke arah yang lebih tinggi. Jadi, ambil secangkir kopi (atau minuman kesukaan anda), dan mari kita masuk ke dalam!
Apa Itu AngularJS?
Sebelum kita mula membuat carta, mari kita memahami apa itu AngularJS. Bayangkan anda sedang membina sebuah rumah. AngularJS adalah seperti kerangka kerja yang membantu anda membina rumah anda secara efisien. Ia adalah kerangka kerja aplikasi web front-end berdasarkan JavaScript yang terbuka dan mudah membuat aplikasi single-page dinamik.
Ciri Kekhususan AngularJS
| Ciri | Deskripsi |
|---|---|
| Pembindungan Data Dua Hala | Secara automatik menyelaraskan data antara model dan pandangan |
| Inyeksi Ketergantungan | Membantu membuat komponen yang boleh digunakan semula, mudah dipelihara, dan ujian |
| Direktif | Membolehkan anda melanjutkan HTML dengan atribut dan unsur custom |
| Templat | Menggunakan HTML dengan penanda khusus sebagai templat |
| Arkitektur MVC | Mengikuti corak Model-View-Controller untuk organisasi yang lebih baik |
Menyiapkan Aplikasi Carta Kami
Sekarang kita sudah mempunyai pengetahuan asas tentang AngularJS, mari kita siapkan aplikasi carta kami. Kita akan menggunakan pustaka yang dipanggil Chart.js bersama AngularJS untuk membuat carta yang indah dan responsif.
Langkah 1: Sertakan Fail Yang Diperlukan
Pertama, kita perlu menyertakan AngularJS dan Chart.js dalam fail HTML kita. Tambahkan baris berikut di dalam seksyen <head> fail HTML anda:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>Langkah 2: Buat Modul AngularJS
Sekarang, mari kita buat modul AngularJS kami. Dalam fail JavaScript anda, tambahkan:
var app = angular.module('chartApp', []);Baris ini mencipta modul AngularJS bernama 'chartApp'. Ber fikirkan itu seperti membuat buku resipi baru untuk pengembaraan membuat carta kami!
Membuat Carta Pertama
Berasa gembira untuk melihat some magic visual? Mari kita buat carta pertama - carta bar sederhana yang menunjukkan populariti bahasa pemrograman.
Langkah 1: Siapkan HTML
Dalam fail HTML anda, tambahkan yang berikut:
<div ng-app="chartApp" ng-controller="ChartController">
<canvas id="myChart" width="400" height="200"></canvas>
</div>Ini mencipta elemen canvas di mana carta kita akan digambar. Direktif ng-app dan ng-controller menghubungkan HTML kita ke aplikasi dan pengawal AngularJS kami.
Langkah 2: Buat Pengawal
Dalam fail JavaScript anda, tambahkan:
app.controller('ChartController', function($scope) {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['JavaScript', 'Python', 'Java', 'C++', 'Ruby'],
datasets: [{
label: 'Populariti Bahasa Pemrograman',
data: [12, 19, 3, 5, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});Wah, itu banyak kod! Tetapi jangan bimbang, mari kita pecahkan ini:
- Kita cipta pengawal bernama 'ChartController'.
- Kita dapatkan konteks elemen canvas kita.
- Kita cipta objek Carta baru, menentukan ia adalah carta bar.
- Kita menyediakan data untuk carta, termasuk label dan dataset.
- Kita menetapkan pilihan untuk carta, seperti memulakan sumbu y dari nol.
Membuat Carta Dinamik
Carta statik adalah menarik, tetapi carta dinamik adalah lebih menarik! Mari kita ubah carta kita untuk menggunakan data dari skop AngularJS kami.
Langkah 1: Kemaskini Pengawal
Ubah pengawal anda menjadi seperti ini:
app.controller('ChartController', function($scope) {
$scope.languages = ['JavaScript', 'Python', 'Java', 'C++', 'Ruby'];
$scope.popularity = [12, 19, 3, 5, 2];
$scope.updateChart = function() {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: $scope.languages,
datasets: [{
label: 'Populariti Bahasa Pemrograman',
data: $scope.popularity,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
};
$scope.updateChart();
});Di sini, kita telah memindahkan data ke dalam variabel $scope dan mencipta fungsi updateChart.
Langkah 2: Tambah Input Pengguna
Mari kita tambah beberapa medan input supaya pengguna boleh mengubah data carta:
<div ng-app="chartApp" ng-controller="ChartController">
<canvas id="myChart" width="400" height="200"></canvas>
<div ng-repeat="language in languages">
{{language}}: <input type="number" ng-model="popularity[$index]" ng-change="updateChart()">
</div>
</div>Sekarang, sebagai anda mengubah nombor di medan input, carta akan automatik update!
Kesimpulan
Tahniah! Anda telah mencipta aplikasi carta dinamik pertama anda menggunakan AngularJS dan Chart.js. Kita telah meliputi banyak permulaan hari ini, dari memahami asas AngularJS hinggalah membuat carta interaktif.
Ingat, menjadi mahir dalam pemrograman adalah seperti belajar masakan - ia memerlukan latihan, percubaan, dan kesediaan untuk belajar dari kesilapan. Jadi, jangan takut untuk main dengan kod, cuba jenis carta yang berbeza, atau tambahkan ciri-ciri baru.
Dalam tahun-tahun pengajaran saya, saya telah melihat pelajar-pelajar dari pemula menjadi pencipta aplikasi yang menakjubkan. Dengan kesabaran dan kecurigaan, anda akan dapat mencipta visualisasi data kompleks dan indah dalam masa yang singkat!
Terus kod, terus belajar, dan lebih importantly, bersenang-senang! Sampaijumpa lagi, selamat membuat carta!
Credits: Image by storyset