## **Apa itu Angular?**

\
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.

\
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.

\
Berikut adalah beberapa konsep utama dalam Angular:

&nbsp;
- **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.


&nbsp;
- **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.


&nbsp;
- **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


&nbsp;
- **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.


&nbsp;
- **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.


&nbsp;
- **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.


&nbsp;
- **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.


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


&nbsp;
- **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.



&nbsp;
## **Setup Angular**

Untuk menggunakan angular, pastikan kita sudah menginstall **NodeJS** terlebih dahulu

\
**Install Angular CLI**

Buka terminal dan jalankan perintah:

```shell
npm install -g @angular/cli
```

\
Tentukan dimana Project Angular akan diinstall.

\
Kemudian jalankan perintah:

```shell
ng new my-angular-app
```

\
Setelah menginstall lalu silahkan masuk

```shell
cd  my-angular-app
```

\
![MFNhE5h.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/MF_Nh_E5h_fb9dc6be35.png)

\
Berikut ini penjelasan dari folder diatas

&nbsp;
- **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

&nbsp;
```shell
yarn start
```

\
Buka browser **https://localhost:4200**

\
![MXESu4g.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/MXE_Su4g_3cb3776a8d.png)


\
**Buat route**

\
Buka terminal dan masukan perintah

```shell
ng g c home
```

\
Edit **app.routers.ts**

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

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

```

\
Edit **app.component.html**

```html
<router-outlet></router-outlet>
```

\
Buka broswer

![z0KnmK2.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/z0_Knm_K2_ea7a104132.png)

\
Selanjutnya Buat halaman about, Buka terminal dan masukan perintah

```shell
ng g c about
```

&nbsp;
Edit **app.routers.ts**

```javascript
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

![SEzOiXu.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/S_Ez_Oi_Xu_74a7c55cd3.png)


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

&nbsp;
## **Uji coba tampilkan data variable kedalam component**

Edit **about.component.ts**

\
Tambahkan variable name

```javascript
export class AboutComponent {

  name: string = "John Doe";

}

```

\
Lalu edit component **about.component.html**

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

```

\
Lalu buka browser

![QIDaKhK.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/QI_Da_Kh_K_fa62f16e61.png)

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

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.

large_Ilb8DAC.png

medium_Ilb8DAC.png

small_Ilb8DAC.png

thumbnail_Ilb8DAC.png

Ilb8DAC.png

Angular for Beginer : Memulai Project Frontend Dengan Angular 17

small_my_photo.jpg

thumbnail_my_photo.jpg

my_photo.jpg

Agik Setiawan