Indonesia

Tutorial AngularJS

Aplikasi AngularJS

Pengaturan Lingkungan AngularJS

Halo sana, para pengembang web masa depan! Saya sangat gembira menjadi panduan Anda dalam perjalanan menarik ini ke dunia AngularJS. Sebagai seseorang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya dapat mengatakan bahwa mengatur lingkungan pengembangan Anda adalah seperti mempersiapkan dapur Anda sebelum memasak makanan kelas dunia. Mungkin itu bukan bagian yang paling menarik, tapi itu sangat penting untuk kesuksesan. Jadi, mari kita lipat lengan dan mulai!

AngularJS - Environment Setup

Apa Itu AngularJS?

Sebelum kita masuk ke pengaturan, mari kitaambil sedikit waktu untuk memahami apa itu AngularJS. Gamalkan Anda sedang membangun sebuah rumah. HTML akan menjadi dasar dan tembok, CSS akan menjadi cat dan hiasan, dan JavaScript akan menjadi listrik dan pipa. AngularJS? Well, itu seperti memiliki tim ahli desain interior dan arsitek yang memastikan bahwa semua hal bekerja bersama secara lancar.

AngularJS adalah kerangka kerja JavaScript yang kuat yang memperluas kemampuan HTML, membuatnya mudah untuk membuat aplikasi web single-page dinamis. Itu seperti memberikan superpowers ke HTML Anda!

Mengapa Kita Butuh Lingkungan Pengembangan?

Mungkin Anda bertanya-tanya, "Buatlah kita mulai mengoding sekarang?" Well, Anda bisa, tapi itu seperti mencoba memasak hidangan lima piring dalam dapur tanpa alat atau peralatan. Lingkungan pengembangan yang baik memberikan Anda semua tools yang Anda butuhkan untuk menulis, menguji, dan menjalankan aplikasi AngularJS Anda secara efisien.

Mengatur Lingkungan AngularJS Anda

Sekarang, mari kita masuk ke bisnis. Berikut adalah apa yang kita butuhkan:

1. Instal Node.js

Node.js adalah seperti mesin dari lingkungan pengembangan kita. Itu adalah runtime JavaScript yang memungkinkan kita menjalankan JavaScript di komputer kita, di luar browser web.

  1. Buka situs web resmi Node.js (https://nodejs.org/).
  2. Unduh versi yang direkomendasikan untuk sebagian besar pengguna.
  3. Jalankan penginstal dan ikuti petunjuk.

Untuk memeriksa apakah Node.js terinstal dengan benar, buka command prompt atau terminal Anda dan ketik:

node --version

Anda seharusnya melihat nomor versi Node.js jika itu terinstal dengan benar.

2. Instal npm (Node Package Manager)

Berita bagus! npm biasanya datang bersamaan dengan Node.js. Itu seperti sebuah pustaka raksasa di mana Anda dapat meminjam (atau dalam kasus ini, mengunduh) paket kode yang sudah ditulis untuk digunakan dalam proyek Anda.

Untuk memeriksa apakah npm terinstal, ketik:

npm --version

3. Instal AngularJS

Sekarang, mari kita ke bagian yang menarik. Kita akan menggunakan npm untuk menginstal AngularJS. Dalam command prompt atau terminal Anda, ketik:

npm install angular

Perintah ini memberitahu npm untuk pergi mendapatkan paket AngularJS dan menginstalnya di komputer Anda.

4. Set Up Proyek AngularJS Sederhana

Ayo buat proyek dasar untuk memastikan bahwa semua hal berjalan. Pertama, buat folder baru untuk proyek Anda. Anda bisa melakukan ini melalui file explorer atau menggunakan baris perintah:

mkdir my-angular-project
cd my-angular-project

Sekarang, mari kita buat dua file di folder ini:

  1. index.html
  2. app.js

Berikut adalah apa yang index.html Anda seharusnya seperti:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My First AngularJS App</title>
<script src="node_modules/angular/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainController">
<h1>{{ greeting }}</h1>
</div>
</body>
</html>

Dan ini adalah app.js Anda:

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

app.controller('MainController', function($scope) {
$scope.greeting = 'Hello, AngularJS!';
});

mari kitauraikan ini:

  • Dalam index.html, kita membuat struktur HTML dasar.
  • Atribut ng-app="myApp" memberitahu AngularJS bahwa ini adalah elemen root aplikasi AngularJS kita.
  • Kita menyertakan pustaka AngularJS dan file app.js kita menggunakan tag <script>.
  • <div ng-controller="MainController"> menghubungkan HTML kita ke pengontrol yang kita tentukan di app.js.
  • {{ greeting }} adalah ekspresi AngularJS yang akan menampilkan nilai greeting dari pengontrol kita.

Dalam app.js:

  • Kita membuat modul AngularJS bernama myApp.
  • Kita tentukan pengontrol bernama MainController.
  • Dalam pengontrol, kita menetapkan properti greeting di objek $scope, yang AngularJS gunakan untuk mengirim data antara pengontrol dan pandangan (HTML kita).

5. Jalankan Aplikasi Anda

Untuk melihat aplikasi Anda dalam tindakan, Anda memerlukan server web. Untuk tujuan pengembangan, Anda dapat menggunakan paket live-server. Instalnya secara global menggunakan npm:

npm install -g live-server

Lalu, di direktori proyek Anda, jalankan:

live-server

Ini akan memulai server web lokal dan membuka browser default Anda untuk menampilkan aplikasi Anda. Anda seharusnya melihat "Hello, AngularJS!" di halaman.

Kesimpulan

Selamat! Anda baru saja mengatur lingkungan pengembangan AngularJS Anda dan membuat aplikasi AngularJS pertama Anda. Mungkin itu terlihat seperti banyak langkah, tapi percayalah, itu akan menjadi mudah dengan latihan. Ingat, setiap ahli pernah menjadi pemula, dan mengatur lingkungan Anda adalah langkah pertama dalam perjalanan Anda menjadi ahli AngularJS.

Dalam les berikutnya, kita akan mendalam konsep AngularJS dan mulai membuat aplikasi yang lebih kompleks. Sampai saat itu, jangan khawatir untuk mencoba setup baru Anda. Cobalah mengubah pesan penghargaan atau menambahkan elemen lain ke HTML Anda. Cara terbaik untuk belajar adalah dengan melakukan!

Selamat coding, dan jumpa lagi di les berikutnya!

Metode Deskripsi
angular.module() Membuat atau mengambil kembali modul AngularJS
module.controller() Mendaftarkan pengontrol baru ke dalam modul
$scope Objek yang merujuk ke model aplikasi
ng-app Direktif yang mendeklarasikan elemen root aplikasi AngularJS
ng-controller Direktif yang menentukan pengontrol untuk elemen HTML
{{ }} Sintaks ekspresi di AngularJS untuk menampilkan nilai

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Tinjauan Umum
Tutorial Selanjutnya:
AngularJS - Arsitektur MVC