Angular for Beginer : Memulai Project Frontend Dengan Angular 17

11 bulan yang lalu, 7 min read

Angular adalah sebuah platform pengembangan web open-source yang dikembangkan oleh Google. Ini adalah framework JavaScript yang digunakan untuk membangun aplikasi web berbasis klien (client-side). Angular memberikan pendekatan terstruktur dalam pengembangan aplikasi web dengan menggunakan konsep-konsep seperti two-way data binding, dependency injection, modularitas, dan lainnya.

Apa itu Angular?

Berikut adalah beberapa konsep utama dalam Angular:

Komponen (Components): Angular membangun aplikasi menggunakan komponen-komponen. Komponen adalah bagian dasar dari aplikasi yang menggabungkan logika, tampilan (HTML), dan gaya (CSS). Setiap komponen dapat digunakan kembali dan memiliki siklus hidup yang terkait dengan pembuatan, pembaruan, dan penghancuran.

Modul (Modules): Modul adalah cara Angular mengatur dan mengelompokkan komponen, direktif, layanan, dan fitur lainnya. Modul membantu dalam memecah aplikasi menjadi bagian-bagian yang terpisah dan terkelola.

Template dan Data Binding: Angular menggunakan sintaksis template yang deklaratif untuk mendefinisikan tampilan aplikasi. Data binding memungkinkan sinkronisasi otomatis antara model (data) dan tampilan (UI), termasuk two-way data binding yang

Direktif (Directives): Direktif adalah instruksi yang diberikan kepada Angular untuk memanipulasi DOM atau merubah tampilan. Beberapa direktif bawaan Angular melibatkan manipulasi DOM, seperti *ngIf, *ngFor, dan lainnya.

Dependency Injection (DI): Angular menggunakan sistem Dependency Injection untuk mengelola dependensi antar komponen. Ini memudahkan pengelolaan objek yang diperlukan oleh suatu komponen dan memfasilitasi pengujian dan penggantian komponen dengan lebih mudah.

Router: Angular menyediakan router untuk mengelola navigasi antar halaman atau komponen dalam aplikasi web. Ini memungkinkan pengguna untuk berpindah-pindah antar bagian aplikasi tanpa perlu memuat ulang seluruh halaman.

HTTP Client: Angular menyediakan modul HttpClient yang memudahkan pengambilan data dari server melalui protokol HTTP. Ini digunakan untuk berkomunikasi dengan backend server dan mendapatkan atau mengirim data.

Formulir (Forms): Angular menyediakan dukungan untuk pengelolaan formulir HTML dengan fitur validasi, binding, dan pemantauan perubahan.

TypeScript: Angular ditulis menggunakan TypeScript, yang merupakan superset dari JavaScript. TypeScript memberikan fitur-fitur seperti tipe data statis, inferensi tipe, dan dukungan untuk pengembangan yang lebih aman dan terstruktur.

Setup Angular

Untuk menggunakan angular, pastikan kita sudah menginstall NodeJS terlebih dahulu

Install Angular CLI

Buka terminal dan jalankan perintah:

npm install -g @angular/cli

Tentukan dimana Project Angular akan diinstall.

Kemudian jalankan perintah:

ng new my-angular-app

Setelah menginstall lalu silahkan masuk

cd  my-angular-app

Berikut ini penjelasan dari folder diatas

node_modules adalah folder dari node js
src/app adalah dimana code angular disimpan, untuk proses coding akan didalam folder src/app
assets digunakan untuk menyimpan data - data assets seperti icon, gambar, dll

Silahkan jalankan perintah dibawah ini, untuk menjalankan Angular

yarn start

Buka browser https://localhost:4200

Buat route

Buka terminal dan masukan perintah

ng g c home

Edit app.routers.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

export const routes: Routes = [
    {
        path:'',
        component:HomeComponent
    }
];

Edit app.component.html

<router-outlet></router-outlet>

Buka broswer

Selanjutnya Buat halaman about, Buka terminal dan masukan perintah

ng g c about

Edit app.routers.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

export const routes: Routes = [
    {
        path: '',
        component: HomeComponent
    },
    {
        path: 'about',
        component: AboutComponent
    }
];

Lalu buka browser

Pada tahapan ini kita sudah berhasil membuat halaman pada angular yaitu halaman Home dan About.

Uji coba tampilkan data variable kedalam component

Edit about.component.ts

Tambahkan variable name

export class AboutComponent {

  name: string = "John Doe";

}

Lalu edit component about.component.html

<p>about works!</p>
<h1>Name {{name}}</h1>

Lalu buka browser

Pada gambar diatas, kita sudah berhasil menampilkan variable name kedalam component Angular