lifelong learner — urip iku urup, currently working on accenture.

Memulai Belajar Membuat dan Mendesain Website dengan Angular pada 2020

0
Degananda.com -

angular_logo_2020

Angular adalah framework yang digunakan untuk membangun aplikasi front-end dari website. Framework angular berbasiskan bahasa pemrograman typescript (superset dari javascript). Mempelajari angular pada tahun 2020 masih sangat relevan dikarenakan perkembangan serta komunitasnya masih sangat kuat.

Angular merupakan framework yang digunakan untuk membuat single page application (SPA). Sehingga client aplikasi front-end ini hanya perlu di proses satu kali saja

angular lebih cocok digunakan pada project berskala enterprise karena memiliki aturan yang ketat. Hal ini sangat baik, mengingat semakin ketat suatu framework maka struktur project semakin rapi dan konsisten. sangat cocok digunakan oleh tim berskala besar yang memiliki turn rate tinggi.

sangat disarankan untuk terlebih dahulu mempelajari ketiga bahasa pemrograman dibawah ini sebelum memulai belajar membangun website dengan angular

  1. javascript – nyawa dari angular, framework angular dibangun dengan menggunakan javascript serta memang dirancang khusus untuk javascript
  2. html – nyawa dari sebuah template website.
  3. css – nyawa dari desain dan tampilan suatu website. untuk mengatur tata letak, warna hingga ukuran komponen – komponen pada website.

Memulai Belajar Membuat dan Mendesain Website dengan Angular

Untuk memulai belajar membuat website dengan angular, hal yang paling mendasar yang harus dipersiapkan adalah environment pemrogramannya. Tanpa environment pemrograman ini , angular tidak dapat dijalankan pada laptop / komputer secara lokal.

Mempersiapkan laptop atau komputer untuk angular cukup dengan tiga langkah

langkah 1 – install node js

angular bergantung pada node js sehingga npm(node package manager) perlu untuk di install pada komputer atau laptop

https://nodejs.org/en/about/releases/

unduh installer nodejs dan jalankan proses installasi. Kemudian pastikan nodejs telah terinstall dengan menggunakan perintah berikut ini pada powershell(jika menggunakan windows) atau gunakan terminal jika menggunakan mac maupun linux

node -v

pastikan versi nodejs tertera pada konsol

node_angular_starting_memulai.png

langkah 2 – install angular

gunakan NPM (node package manager) untuk melakukan installasi pada angular. perlu di ingat, pastikan menggunakan node js versi 10, 12 atau 14. hanya ketiga versi tersebut yang dapat dikenali oleh angular pada saat ulasan ini ditulis.

install_angular_selesai.png

berikut adalah perintah untuk memulai proses installasi angular dengan npm

npm install -g @angular/cli

perintah -g berarti angular akan di install secara global. Sehingga, project angular dapat di inisiasi/di buat pada berbagai lokasi folder. Proses installasi ini akan memakan waktu cukup lama dikarenakan ukuran angular yang cukup besar.

langkah 3 – membuat project angular

setelah proses installasi angular secara global selesai, maka selanjutnya project angular siap buat dan kita telah siap untuk memulai belajar memrogram website frontend dengan angular.

proses_pembuatan_project_angular.png

gunakan perintah dibawah ini untuk menginisiasi atau membuat project angular

ng new [nama_aplikasi[

Untuk proses pembelajaran sebaiknya skip semua bootstrap yang tersedia (angular routing, pilih N).Sehingga nantinya dapat membuat dan belajar  routing secara manual. untuk proses styling disarankan menggunakan SAAS karena sangat baik untuk otomasi dan konsistensi desain. tunggu hingga proses pembuatan project angular selesai.

pembuatan project ini akan memakan waktu cukup lama karena ukuran sumber kode project angular relatif cukup besar.

perintah menjalan angular

ng serve

setelah pembuatan project selesai, masuk ke direktori project angular dan jalankan perintah diatasuntuk menjalankan angular pada browser

ingat bahwa secara default angular akan berjalan pada port 4200 (localhost:4200).

Done. enjoy pemrograman angular 🙂

angular_berhail_berjalan_dengan_baik.png

(Visited 79 times, 1 visits today)

Leave a Reply