Langsung ke konten utama

Tutorial Angular Bagian 2: Instalasi dan Konfigurasi

Menginstall dan memulai sebuah project dengan Angular dapat dilakukan hanya dengan beberapa langkah saja karena Angular sudah menyediakan CLI (command line interface) yang membuat pekerjaan menjadi jauh lebih mudah. Anda tidak perlu repot-repot membuat atau meng copy-paste file yang dibutuhkan tapi cukup dengan menjalankan perintah di terminal/command prompt maka file yang Anda inginkan akan otomatis terbentuk. Adapun sebelum bekerja dengan Angular, sangat disarankan sekali bagi Anda untuk memiliki pengetahuan dasar mengenai HTML, CSS dan javascript. Hal ini dapat membantu Anda lebih mudah memahami keseluruhan materi dari tutorial ini maupun tutorial lainnya yang berkaitan dengan Angular.

Pre Requisite

Sebelum memulai project dengan Angular pastikan di komputer/laptop Anda sudah terinstall NodeJS dan NPM. Saya tidak akan menjelaskan detail step-by-step instalasi NodeJS dan NPM pada tutorial ini karena dapat Anda temukan secara mandiri di Google, namun saya sarankan untuk menginstall versi LTS yang sudah stabil. 

Angular CLI

Jika NodeJS dan NPM sudah tersedia maka langkah selanjutnya adalah menginstall angular CLI, silakan jalankan perintah berikut ini di terminal:
npm install -g @angular/cli
Untuk mengetahui versi Angular CLI yang baru saja Anda install dapat dilihat dengan perintah berikut:
ng --version
Angular CLI versi 12.2.10

Membuat Project Baru

Untuk membuat project baru Anda dapat menjalankan perintah berikut ini pada terminal:
ng new appku && cd appku
Jangan lupa untuk memilih jawaban berikut ini ketika terminal menampilkan opsi instalasi:
  • Would you like to add Angular routing? [No]
  • Which stylesheet format would you like to use? [CSS]
membuat project appku

 Angular routing adalah komponen yang digunakan untuk keperluan navigasi halaman, kita skip untuk saat ini dan akan dijelaskan pada artikel selanjutnya

 Selain stylesheet dengan format CSS, kita juga dapat menggunakan format sass atau less

Jika Anda perhatikan di dalam folder appku sekarang terdapat beberapa file dan folder seperti pada tampilan di bawah ini:
Angular project structure

Berikut ini adalah penjelasan singkat dari masing-masing file/folder tersebut:
  • angular.json berisi variabel konfigurasi dari project Angular
  • karma.conf.js berisi variabel konfigurasi karmajs untuk testing
  • node_modules berisi library/module NodeJS yang diperlukan
  • package-lock.json adalah lock file yang otomatis terbentuk jika Anda menggunakan NPM, salah satu kegunaan dari file ini adalah agar mesin lain yang melakukan clone terhadap source code Anda selalu mendapatkan versi dependency module yang sama
  • README.md adalah file yang berisi informasi dari project Anda agar mudah dibaca oleh orang lain 
  • src/app adalah folder untuk meletakkan kode utama Anda yang terdiri dari application component, directive, model, interface, module dan sebagainya
  • src/assets adalah folder yang digunakan untuk menyimpan web assets seperti gambar, icon, font dan lain-lain
  • environments adalah folder untuk menyimpan variable environment seperti development, staging dan production.
  • favicon.ico adalah icon aplikasi yang muncul pada tab/window browser
  • index.html adalah file index yang akan menjadi entry point, sama seperti index.html pada umumnya Anda juga dapat menyertakan file javascript dan css di bagian <header> atau memodifikasi HTML meta tag dan yang lainnya
  • main.ts adalah file yang digunakan untuk menginisiasi modul utama Angular
  • polyfills.ts berisi code agar aplikasi kompatibel dijalankan di berbagai browser
  • style.css berisi style global dari aplikasi
  • test.ts digunakan untuk keperluan testing
  • tsconfig.app.json berisi konfigurasi typescript spesifik untuk app
  • tsconfig.json berisi konfigurasi typescript untuk project secara global
  • tsconfig.spec.json berisi konfigurasi typescript untuk testing

Menjalankan aplikasi di server lokal

Anda tidak perlu menyiapkan web server seperti Apache atau NGINX untuk dapat menjalankan aplikasi di environment lokal karena Angular CLI sudah menyediakannya khusus untuk keperluan development, Anda cukup menjalankan perintah ini:

ng --version
lalu buka url http://localhost:4200/ pada browser maka Anda akan mendapati aplikasi Angular sudah berjalan.

Angular di server lokal berjalan pada port 4200


Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

EJSC, co-working space kekinian di Jawa Timur

Dalam rangka memanfaatkan momen cuti lebaran 2023 agar tetap produktif saya menyempatkan diri  mampir ke salah satu co-working space di daerah Pamekasan, Madura. Awalnya cukup surprised ketika googling dan menemukan EJSC ini, sangat tidak menyangka kalau di kota kecil di Provinsi Jawa Timur ini sudah tersedia co-working space yang dapat digunakan oleh siapa saja dengan fasilitas yang lumayan lengkap. Lokasinya sendiri berada di Gedung Karesidenan Kota Pamekasan, persis di seberang alun-alun kota yang lebih dikenal dengan sebutan Arek Lancor. image source: google Berikut ini beberapa kesan positif yang dapat saya simpulkan selama menggunakan co-working space ini dua hari berturut-turut: Akses yang Mudah Ga perlu muter-muter untuk bisa menemukan tempat ini, apalagi sampai nyasar. Google Maps offline? bisa tanya ke warga setempat, pasti rata-rata tahu dimana gedung karesidenan berada. Parkiran Luas Parkiran baik untuk roda empat ataupun roda dua tersedia di halaman depan gedung, waktu sa
Posting Komentar
Baca selengkapnya

Tutorial Angular Bagian 1: Introduction

Angular merupakan salah satu library javascript yang sangat populer untuk membangun user interface aplikasi berbasis web ( web application ). Dikembangkan oleh Google, Angular telah digunakan oleh banyak perusahaan kelas dunia maupun startup yang menginginkan aplikasi mereka dapat berjalan  dengan  smooth  dan tentu saja cepat ketika diakses oleh pengguna. Berikut ini adalah beberapa faktor yang dapat dipertimbangkan mengapa memilih Angular, antara lain: Re-usable Component Mayoritas sebuah  website terdiri atas sedikitnya tiga blok utama yaitu:  Header: memuat menu navigasi, logo dan judul website. Content: memuat informasi utama yang ditujukan bagi pengguna, baik itu artikel, tabel maupun grafik. Footer : memuat informasi seperti copyright, link social media, nomor kontak dan sebagainya. Nah, dari tiga blok diatas, header dan footer  adalah yang jarang sekali berubah, berbeda dengan blok content yang isinya dinamis tergantung dari halaman yang sedang diakses oleh pengguna. Angu
Posting Komentar
Baca selengkapnya