Malay

Tutorial AngularJS

Aplikasi AngularJS

AngularJS - Aplikasi Notepad: Membangun Aplikasi Web Pertama Anda

Hai, para pemula pemrograman! Saya sangat gembira untuk memandu Anda melalui perjalanan menarik dalam membuat aplikasi web pertama Anda menggunakan AngularJS. Sebagai seseorang yang telah mengajarkan pemrograman selama lebih dari satu dekade, saya dapat menjamin Anda bahwa pada akhir panduan ini, Anda akan memiliki aplikasi notepad yang berfungsi dan pemahaman yang kuat tentang dasar-dasar AngularJS. Jadi, mari kita mulai!

AngularJS - Notepad Application

Apa Itu AngularJS?

Sebelum kita mulai mengoding, mari kita pahami apa itu AngularJS. Bayangkan Anda sedang membangun sebuah rumah. AngularJS seperti kerangka yang menyediakan struktur dan alat untuk membuat proses membangun rumah Anda menjadi lebih mudah dan lebih terorganisir. Itu adalah kerangka JavaScript yang membantu kita membuat aplikasi web dinamis dengan kurang usaha.

Menyiapkan Lingkungan Pengembangan

Pertama-tama, kita perlu mengatur ruang kerja kami. Jangan khawatir; itu lebih mudah daripada mengatur meja kerja nyata!

  1. Buka editor teks favorit Anda (saya merekomendasikan Visual Studio Code untuk pemula).
  2. Buat folder baru bernama "AngularJS-Notepad".
  3. Dalam folder ini, buat tiga file:
  • index.html
  • app.js
  • style.css

Membuat Struktur HTML

Ayo mulai dengan file index.html kami. Ini seperti rancangan rumah kita.

<!DOCTYPE html>
<html ng-app="notepadApp">
<head>
<title>AngularJS Notepad</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="NotepadController">
<h1>My Notepad</h1>
<textarea ng-model="noteContent"></textarea>
<p>Jumlah karakter: {{noteContent.length}}</p>
</body>
</html>

mari kitauraikan ini:

  • ng-app="notepadApp": Ini memberitahu AngularJS bahwa ini adalah akar aplikasi kita.
  • ng-controller="NotepadController": Ini menentukan controller mana yang harus mengelola bagian ini dari halaman.
  • ng-model="noteContent": Ini mengikat textarea ke variabel noteContent dalam controller kita.
  • {{noteContent.length}}: Ini adalah ekspresi yang menampilkan panjang catatan kita.

Menyempurnakan Aplikasi

Sekarang, mari kita tambahkan sedikit gaya untuk membuat notepad kita terlihat bagus. Dalam file style.css, tambahkan:

body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}

textarea {
width: 100%;
height: 200px;
margin-bottom: 10px;
}

h1 {
color: #333;
}

CSS ini akan memusatkan konten kita, mengatur font yang bagus, dan menggaya textarea serta heading.

Membuat Aplikasi AngularJS

Sekarang ke bagian menarik - mari kita hidupkan notepad kita dengan AngularJS! Dalam file app.js:

var app = angular.module('notepadApp', []);

app.controller('NotepadController', function($scope) {
$scope.noteContent = '';
});

mari kitauraikan ini:

  1. Kita membuat module AngularJS bernama 'notepadApp'.
  2. Kita tentukan controller bernama 'NotepadController'.
  3. Dalam controller, kita inisialisasi noteContent sebagai string kosong.

Menambahkan Fitur Lebih Banyak

Sekarang kita memiliki notepad dasar, mari kita tambahkan beberapa fitur untuk membuatnya berguna!

1. Fitur Simpan dan Muat

Mari kita tambahkan tombol untuk menyimpan dan memuat catatan. Update HTML Anda:

<body ng-controller="NotepadController">
<h1>My Notepad</h1>
<textarea ng-model="noteContent"></textarea>
<p>Jumlah karakter: {{noteContent.length}}</p>
<button ng-click="saveNote()">Simpan Catatan</button>
<button ng-click="loadNote()">Muat Catatan</button>
</body>

Dan update app.js Anda:

app.controller('NotepadController', function($scope) {
$scope.noteContent = '';

$scope.saveNote = function() {
localStorage.setItem('savedNote', $scope.noteContent);
alert('Catatan tersimpan!');
};

$scope.loadNote = function() {
$scope.noteContent = localStorage.getItem('savedNote') || '';
alert('Catatan dimuat!');
};
});

Di sini, kita menggunakan localStorage untuk menyimpan dan memuat catatan. Bayangkan ini seperti buku catatan kecil di mana browser Anda dapat mencatat informasi untuk diingat kemudian.

2. Fitur Hitung Kata

Mari kita tambahkan fitur hitung kata. Update HTML Anda:

<p>Jumlah karakter: {{noteContent.length}} | Jumlah kata: {{wordCount()}}</p>

Dan tambahkan fungsi ini ke controller Anda dalam app.js:

$scope.wordCount = function() {
return $scope.noteContent.split(/\s+/).filter(function(n) { return n != '' }).length;
};

Fungsi ini membagi konten catatan oleh spasial dan menghitung elemen non-kosong, memberikan kita jumlah kata.

Menggabungkan Semua

Berikut adalah tabel yang menguraikan direktif dan ekspresi AngularJS utama yang kita gunakan:

Direktif/Ekspresi Tujuan
ng-app Menentukan akar elemen aplikasi AngularJS
ng-controller Menentukan controller mana yang harus digunakan untuk elemen HTML
ng-model Mengikat nilai kontrol HTML ke data aplikasi
ng-click Menentukan ekspresi AngularJS yang dievaluasi saat elemen diklik
{{ekspresi}} Menampilkan nilai ekspresi

Selamat! Anda baru saja membuat aplikasi AngularJS pertama Anda. Kita telah meliputi dasar-dasar penyiapan aplikasi AngularJS, penggunaan controller, kerja dengan model, dan bahkan penyimpanan data secara lokal.

Ingat, belajar pemrograman seperti belajar bahasa baru. Itu memerlukan latihan, kesabaran, dan kekerasan. Jangan frustasi jika sesuatu tidak langsung berjalan - itu semua bagian dari proses belajar. Terus eksperimen dengan aplikasi notepad Anda, cobalah menambahkan fitur baru, dan terutama, bersenang-senang!

Dalam tahun-tahun mengajar saya, saya telah melihat banyak siswa berubah dari pemula menjadi pengembang ahli. Anda saat ini sedang dalam perjalanan menarik itu. Terus coding, terus belajar, dan sebelum Anda tahu, Anda akan membuat aplikasi web kompleks dengan mudah!

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Aplikasi ToDo
Tutorial Seterusnya:
AngularJS - Aplikasi Bootstrap