Indonesia

Tutorial AngularJS

Aplikasi AngularJS

AngularJS - Aplikasi Notepad: Membangun Aplikasi Web Pertama Anda

Hai, para pemula pemrograman! Saya sangat senang 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 tutorial 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 mengerti apa itu AngularJS. Bayangkan Anda sedang membangun sebuah rumah. AngularJS adalah seperti kerangka yang menyediakan struktur dan alat untuk membuat proses membangun rumah Anda menjadi 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 tempat kerja. Jangan khawatir; itu jauh lebih mudah daripada mengatur meja kerja nyata!

  1. Buka editor teks favorit Anda (saya merekomendasikan Visual Studio Code bagi 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>Hitungan 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.

Stylizing Our Application

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, menentukan font yang bagus, dan gayakan textarea dan 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 sebuah modul 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 lain 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>Hitungan 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 disimpan!');
};

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

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

2. Fitur Hitungan Kata

Mari kita tambahkan fitur hitungan kata. Update HTML Anda:

<p>Hitungan karakter: {{noteContent.length}} | Hitungan 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 memecah konten catatan oleh spasial dan menghitung elemen non-kosong, memberikan kita hitungan kata.

Menggabungkan Semua

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

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

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

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

Dalam tahun-tahun pengajaran saya, saya telah melihat banyak siswa bergerak dari pemula menjadi pengembang ahli. Anda berada di dalam perjalanan menarik itu sekarang. 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 Selanjutnya:
AngularJS - Aplikasi Bootstrap