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

Mempelajari bahasa pemograman PHP itu buang-buang waktu!

Begitulah kurang lebih maksud dari postingan di group facebook yang saya baca, sambil geleng-geleng kepala dan berucap dalam hati " what the heck you are talking about man !". Tapi tanpa kita sadari ada banyak orang yang sepemikiran dengan si empunya post , mereka menganggap PHP itu adalah sebuah bahasa yang sangat tidak keren, tidak canggih, tidak safe,  terlalu banyak garbage collection sehingga ga well   perform. Saya jadi teringat beberapa waktu yang lalu ketika menghadiri sebuah konferensi teknologi di Jakarta, statement dari seorang IT Manager sebuah perusahaan yang bergerak di industri keuangan " we are not doing PHP here, and will never be while I'm still here " rasanya kembali menegaskan bagaimana bahasa pemograman ini dipandang sebelah mata dan kerap menjadi second citizen. Well, with all due respect.. tidak ada yang salah dengan penilaian tersebut, apalagi jika disampaikan dengan data dan fakta plus experience. Tidak bisa kita pungkiri PHP mem
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