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 3: Membuat dan Mengubah Style Component

Component merupakan bagian terpenting dari Angular untuk menghasilkan blok-blok HTML yang membentuk suatu halaman. Masing-masing component dapat berdiri sendiri atau menjadi sub component dari component lain (biasa disebut dengan child component)   dan bisa digunakan berulangkali di halaman yang berbeda (reusable). Secara garis besar Angular component   terdiri atas: HTML template untuk menampilkan HTML objek kepada pengguna Typescript class, digunakan untuk menulis logika aplikasi ataupun behaviour dari component tersebut CSS untuk mengubah style/tampilan component Membuat Component Cara yang paling mudah untuk membuat component adalah dengan Angular CLI, buka terminal dan pastikan Anda sudah berada di dalam direktori   aplikasi Angular lalu jalankan perintah berikut: ng generate component hello-world Perintah di atas secara otomatis akan membuat folder dengan nama hello-world (src/app/hello-world) dan di dalam folder tersebut Anda akan menemukan file: hello-world.component.ts
Posting Komentar
Baca selengkapnya