CrashCourse

This project was generated with Angular CLI version 13.3.3.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Pengenalan Angular

Basis dari Angular yaitu component driven, dimana komponen adalah potongan UI yang termasuk template html, logic, dan styling. Sifatnya dapat digunakan kembali (reusable) dan bisa diembed ke template html lainnya dengan tag XML. Contoh dasarnya seperti ini,

Bisa menggunakan tag yang diinject maupun javascript expression ke dalam html template.

[] untuk melakukan directive property (mirip seperti di react), () untuk melakukan event handling.

Pakai Input untuk menerima data props dan meneruskan ke class, Output berfungsi sebagai output emitter.

Output Emitter memungkinkan untuk memanggil method dari kelas parent yang mengembed component tersebut.

Two-ways data binding, dimana [] untuk menerima input data, dan () untuk output atau menjalankan suatu function. Karena sifat binding tersebut, sehingga secara realtime data yang ditampilkan akan sesuai dengan apa yang di-inputkan.

Sebenarnya, kita bisa melakukan output emitter ke parent apabila event yang diperlukan hanya untuk satu handler. Apabila ingin beberapa komponen untuk bereaksi pada suatu perubahan event, diperlukan Subject, Subscription, dan Observable. Nantinya akan dibuat suatu layer service baru dengan nama UIService yang bertanggung jawab atas presentasi yang ada.

Sedangkan untuk routing, silahkan melakukan penambahan routing pada app.module.ts, bisa dilakukan konfigurasi seperti kebutuhan debug / enableTracing. Lalu ganti tag pada template,

Selanjutnya yaitu buat komponen baru seperti About, dan buat navigasi sederhana dengan RouterLink. Kenapa tidak menggunakan href, karena itu akan refresh page secara seutuhnya, RouterLink bisa membantu agar input data tetap tersedia dan tidak hilang.

Angular memiliki struktur sebagai berikut:

• Component
• Module Di dalam component, terdapat beberapa parameter yaitu selector, templateUrl, dan styleUrls.

Component yang telah dideklarasikan akan diinject ke dalam templateUrl bersamaan dengan styleUrls yang ada.

Module adalah file yang utama dalam angular, dimana semuanya diatur dan dideklarasikan apabila ingin ditambahkan suatu halaman baru ke dalam aplikasi.

Sekian dari materi summary pembelajaran Angular.