[Angular 7][1] Instalasi

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
Thursday, 07 Mar 2019

Hello world,

Saya ingin membahas mengenai Angular. Lebih tepatnya yang versi 7. Pada pembahasan pertama ini saya mulai dari pengenalan, kebutuhan dan cara instalasinya. Angular sendiri sudah cukup populer di kalangan para programmer. Menurut beberapa sumber saya dapat simpulkan bahwa Angular adalah salah satu framework MVC dalam membangun aplikasi web berbasis Javascript yang memiliki keunggulan dalam dokumentasi yang terstruktur dan cukup lengkap. Dikembangkan oleh tim Angular di Google dan juga komunitas tentunya. Angular 7 stable baru rilis sekitar September/Oktober 2018 laluan dan saat ini sudah muncul versi 8 beta (bisa di lihat di blog resminya). Wow cepat sekali rasanya. Oke langsung saja masuk ke kebutuhan.

Kebutuhan :

1. NodeJs

Diharusnya versi 8.x atau 10.x. Saya menggunakan versi 10.15.0. Untuk cek versi kita bisa menjalankan  node -v pada cmd nodejs

Untuk download Nodejs klik di sini

2. Text Editor

Banyak text editor yang beredar di luar sana. Menurut saya semua hampir sama. Mungkin rekomendasi saya bisa pilih VSCode atau Brackets.


Tahap Instalasi

1. Install Angular CLI

Tahap ini mengharuskan kita meng-install Angular ClI secara global. Buka cmd lalu jalankan npm install -g @angular/cli. Lalu klik enter. Tunggu sejenak sampai proses selesai.

2. Membuat Aplikasi

Pada tahap ini kita sudah bisa memulai membuat aplikasi pertama kita. Tentukan folder yang akan kita gunakan sebagai workspace (tempat aplikasi) lalu jalankan ng new namaweb di dalam workspace. Kalian bisa mengganti namaweb menjadi nama lain yang diinginkan lalu klik enter.  Selanjutnya akan muncul pertanyaan Would you like to add Angular routing? kita ketik saja y lalu klik enter. Lalu akan muncuk lagi pilihan format stylesheet seperti css, sass, less. Di sini saya memilih css lalu klik enter lagi. Tunggu beberapa saat sampai proses selesai. Saat proses selesai akan terbentuk folder baru sesuai namaweb kita dalam folder workspace kita kira-kira seperti di bawah ini.


 3. Menjalankan Aplikasi

Buka folder aplikasi kita dengan cd namaweb lalu jalankan ng serve --open atau ng serve -o. Tunggu beberapa saat sampai server siap di jalankan dan aplikasi kita akan terbuka di browser. Contohnya seperti di bawah ini. Untuk menghentikan serve bisa dengan Ctrl + C.


Selanjutnya kita bisa membuat perubahan simpel pada beberapa bagian seperti Title, Text dan style. Pertama buka src/app/app.component.ts (lihat contoh di bawah). Kita bisa mengganti title pada web kita. 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'namaweb';
}

Lalu kalau kita perhatikan pada kode di atas mengacu pada templateUrl, kita bisa mengubah isi dari file app.component.html, begitu juga dengan style-nya di app.component.css.

Mungkin segitu saja dulu, sampai jumpa di post selanjutnya.

Selamat mencoba :)