Malay

Tutorial AngularJS

Aplikasi AngularJS

Penubahan persekitaran pembangunan AngularJS

Hai sana, bakal pengembang web! Saya sangat gembira menjadi panduanmu dalam perjalanan menarik ini ke dunia AngularJS. Sebagai seseorang yang telah mengajar sains komputer lebih dari satu dekade, saya bisa katakan bahwa menyiapkan persekitaran pembangunanmu seperti menyiapkan dapur sebelum memasak makanan kualitas restoran. Itu mungkin 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 memasuki pengaturan, mari kita mengerti apa itu AngularJS. Bayangkan Anda 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 secara harmonis.

AngularJS adalah kerangka kerja JavaScript yang kuat yang memperluas kemampuan HTML, membuatnya mudah untuk menciptakan aplikasi web single-page dinamik. Itu seperti memberi superpower ke HTMLmu!

Mengapa Kita Butuh Persekitaran Pembangunan?

Mungkin Anda bertanya-tanya, "Kenapa kita tidak mulai mengoding sekarang?" Well, Anda bisa, tapi itu seperti mencoba memasak makanan lima porsi di dapur tanpa alat atau peralatan. Sebuah persekitaran pembangunan yang sesuai memberikan Anda semua tools yang Anda butuhkan untuk menulis, menguji, dan menjalankan aplikasi AngularJS Anda secara efisien.

Menyiapkan Persekitaran AngularJS Anda

Sekarang, mari kita masuk ke bisnis. Berikut ini yang harus kita lakukan:

1. Install Node.js

Node.js adalah seperti mesin dari persekitaran pembangunan kita. Itu adalah JavaScript runtime yang memungkinkan kita menjalankan JavaScript di komputer kita, diluar browser web.

  1. Pergi ke 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. Install npm (Node Package Manager)

Berita bagus! npm biasanya datang bersamaan dengan Node.js. Itu seperti sebuah pustaka besar di mana Anda bisa 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. Install AngularJS

Sekarang, mari kita buat magik terjadi. Kita akan menggunakan npm untuk menginstal AngularJS. Dalam command prompt atau terminal Anda, ketik:

npm install angular

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

4. Set Up a Simple AngularJS Project

mari kita buat proyek dasar untuk memastikan bahwa semua hal berjalan. Pertama, buat folder baru untuk proyek Anda. Anda bisa melakukan ini melalui penjelajah berkas atau menggunakan command line:

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

Sekarang, mari kita buat dua file di folder ini:

  1. index.html
  2. app.js

Berikut ini 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 dari aplikasi AngularJS kita.
  • Kita menyertakan pustaka AngularJS dan file app.js kita menggunakan tag <script>.
  • <div ng-controller="MainController"> menghubungkan HTML kita ke pengawas yang kita tentukan di app.js.
  • {{ greeting }} adalah ekspresi AngularJS yang akan menampilkan nilai greeting dari pengawas kita.

Dalam app.js:

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

5. Run Your Application

Untuk melihat aplikasi Anda dalam aksi, Anda akan memerlukan server web. Untuk tujuan pengembangan, Anda bisa menggunakan paket live-server. Install itu secara global menggunakan npm:

npm install -g live-server

Kemudian, 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 menyiapkan persekitaran pembangunan AngularJS Anda dan menciptakan 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 menyiapkan persekitaran Anda adalah langkah pertama dalam perjalanan Anda untuk menjadi master AngularJS.

Dalam les berikutnya, kita akan mendalami konsep AngularJS dan mulai membangun aplikasi yang lebih kompleks. Sampai itu, jangan ragu untuk bermain dengan setup baru Anda. Cobalah mengubah pesan atau menambahkan elemen lain ke HTML Anda. Cara terbaik untuk belajar adalah dengan melakukan!

Happy coding, dan jumpa lagi di les berikutnya!

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Pandangan Umum
Tutorial Seterusnya:
AngularJS - Arsitektur MVC