Angular 4 - Instalasi dan Tutorial Angular CLI

Angular-CLI merupakan generator untuk project Angular 2 dan 4 (serta versi diatasnya), dengan menggunakan bantuan Angular-CLI ini kita tidak perlu lagi setup banyak kebutuhan dasar seperti susunan folder, cara run, cara build dan lain-lain. Kesemuanya itu telah ada perintahnya (command) melalui Angular-CLI. Seperti halnya Ember.js yang mempunyai Ember-CLI, Vuejs dengan Vue-CLI dan React dengan create-react-app maka seperti itu pula fungsi Angular-CLI bagi Angular.

Pada saat artikel ini ditulis Angular-CLI sudah mencapai versi stable yakni 1.0.4, Anda bisa lihat release history lebih lengkapnya disini. Dengan sudah mencapai versi stable artinya Angular-CLI juga sudah siap untuk dipakai di production atau project dengan skala yang lebih besar dan kompleks. Secara fitur sudah dikatakan mumpuni dan memenuhi kebutuhan para developer namun juga akan tetep ada perbaikan dan penyesuaian secara berkala yang biasanya tidak akan breaking versi yang lebih lama.

Tutorial Instalasi Angular CLI

• Pastikan kamu sudah memasang nodejs ya, kalau belum bisa diunduh disini. Sebaiknya unduh versi LTS (Long Time Support) agar lebih stabil dan minim bug.

• Pasang Angular-CLi di global dengan cara npm install -g @angular/cli atau jika Anda ingin memasang versi terakhir bisa dengan npm install -g @angular/cli@latest

Tutorial Penggunaan Angular CLI

Membuat Project Baru

Dengan Angular CLI kita bisa membuat project baru Angular 2 dan 4 dengan mudah, berikut adalah cara untuk membuat project baru menggunakan Angular CLI :

• Pertama generate folder project dengan perintah ng new PROJECT_NAME. Perintah ini akan membuat folder project Angular Anda dengan cepat. Setelah membuat folder project, Angular CLI juga akan memasangkan kan dependensi yang dibutuhkan secara otomatis sehingga biasanya proses ini akan memakan waktu yang cukup lama tergantung pada kondisi dan kecepatan internet Anda.

• Setelah proses diatas selesai berikutnya kita akan menjalankan project yang sudah dibuat dengan cara

// untuk pidah ke folder project
cd PROJECT_NAME

// untuk menjalankan project
ng serve

• Buka peramban kesayangan Anda dan akses halaman http://localhost:4200/, jika semua langkah berjalan dengan lancar Anda akan dibawa ke halaman dasar project Angular Anda.

• Project yang di-generate ini sudah termasuk dengan kemampuan hot reload ketika Anda mengubah file didalamnya.

Membuat Komponen Baru

Selain kemampuan men-generate folder awal, Angular-CLI juga bisa men-generate banyak hal di project Anda, seperti component. untuk men-generate komponen Anda bisa menggunakan perintah

ng generate component my-new-component

// atau

ng g component my-new-component

Dengan cara semudah ini, maka kita sudah membuat component baru.

Membuat Service Baru

Service merupakan bagian yang bisa Injectable di Angular, fitur ini sering digunakan untuk wrap logic yang lumayan kompleks sehingga tidak langsung terekspos di component. Beberapa orang juga menggunakan service untuk menjadi state management dan menjadi jembatan antar component untuk saling melempar data. Untuk men-generate service dengan **Angular-CLI ** bisa dengan perintah :

ng generate service my-new-service

// atau

ng g service my-new-service

Membuat Custom Pipe

Pipe/filter merupakan fitur yang digunakan untuk melakukan manipulasi data seperti formatting, penambahan beberapa kata aga sesuai dengan tampilan yang diinginkan dan lainnya. Pipe atau yang pada AngularJS dikenal dengan filter sudah ada sejak versi pertama Angular namun pada versi 2 dan 4 kembali dibawa dengan beberapa peningkatan performa. Untuk men-generate pipe/filter dengan Angular-CLI bisa menggunakan perintah :

ng generate pipe my-new-pipe

// atau

ng g pipe my-new-pipe

Fitur-fitur lain

Selain sedikit disebutkan diatas, Angular CLI juga punya banyak kemampuan lainnya, untuk fitur selengkapnya bisa dilihat di Github Angular CLI.

Angular ID

Bila Anda ingin belajar Framework Angular, silahkan bergabung dan baca artikel dari medium AngularID

Semoga bermanfaat,

Ditulis oleh Irfan Maulana

Salam