-
Decorator : untuk menandakan file typescript fungsinya untuk apa di angular. contoh : @Component, @Directive, @Pipe dll
-
Component : Bagian terpenting yang digunakan untuk kerangka angular
-
Pipe : Untuk memodifikasi output data, ditandakan dengan " | " dan parameternya menggunakan titik 2 " : "
-
Directive: Untuk memodifikasi elemen html singkatnya, kita bisa set event apa yang bakal kita listen dan apa hasilnya, seperti yang sudah ada di angular contohnya : ngIf, ngClass, ngStyle dll . Bisa juga kita custom.
-
Local Reference : ditandakan dengan tanda "#" di elemen html fungsinya sama dengan id.
-
Observable : sebuah penamaan untuk menangani method asynchronous. Seperti promise. Method yang dipakai adalah subscribe, subscribe akan menunggu untuk perubahan data dan jangan lupa di unsubscribe.
-
: Untuk mengeluarkan template component lain yang diparsing
-
: Untuk membungkus elemen html seperti div tapi mempunya kelebihan khusus salah satunya berhubungan dengan directive yang ada di angular.
-
QueryParams : parameter pretty untuk api endpoint (url) , contoh : friends/12?user . ?user adalah queryparams 10.Interceptors : Service yang di execute dari setiap request. Berguna untuk mengirim autentikasi di header biasanya
-
Resolver Route : Code yang akan di eksekusi sebelum route berhasil di panggil / load
-
Map : untuk merubah object (rxjs)
-
Tap : Untuk mengambil data / mengeksekusi data tanpa merubah data (rxjs)
-
Subject : Tempat untuk menampung subscription. (rxjs)
-
BehaviourSubject : sama seperti subject , bedanya ini bisa mengambil value sebelum nya tanpa pernah melakukan subscription (rxjs)
-
Take : sebuah fungsi untuk memberitahu bahwa kita akan mengambil 1 value dari subject dan hanya 1 kali (jika param yang diisi 1 , tergantung) tidak perlu di unsubscribe manual
-
Persistant Storage : cache / local storage
-
double tanda seru (!!) : menandakan bahwa jika variable berisi null atau undefined dia akan nge return false, kalo ada akan nge return true
-
Event Emitter : Event dom yang dibuat custom, fungsi utamanya agar bisa di listen di component lain.
-
Skeleton : animasi loading placeholder kalo di mobile namanya shimmer
-
State : Semua data atau informasi yang bisa di manage / control dan harus di tampilkan di depan aplikasi
- Local state : data yang tidak mempengaruhi data lainya, seperti properti di component
- Application state: data yang mempengaruhi data lainya
-
Persistent State : Data atau Informasi yang ada di backend, dan akan selalu bertahan jika client side mengalami refresh
-
Alternative Lazy Loading Syntax : If you're using Angular 8+, you can use an alternative syntax for specifying lazy-loaded routes:
Instead of
const routes: Routes = [{ path: 'your-path', loadChildren: './your-module-path/module-name.module#ModuleName' }];
you can use
const routes: Routes = [{ path: 'your-path', loadChildren: () => import('./your-module-path/module-name.module').then(m => m.ModuleName) }];
Please note, that you need to ensure that in your tsconfig.json file, you use
"module": "esnext", instead of
"module": "es2015", Why would you use this syntax? In the future, it'll replace the "string-only" approach (i.e. the first alternative mentioned here). It also will give you better IDE support.
- Angular Universal: sebuah libary tambahan untuk mengubah angular app yang asalanya di render di browser , menjadi di render di server. Ini berguna untuk SEO Search Engine.
How to install it with angular cli:
- ng add @nguniversal/express-engine --clientProject nama_project
- npm install --save @nguniversal/module-map-ngfactory-loader
- import ModuleMapLoaderModule in app.server.module.ts
- ng build:ssr untuk running application
note:
- Jika ada fungsi yang harus render / dijalankan di browser, inject PlatformId dan lakukan pemilihan.
- Untuk deploy app tidak bisa di static host lagi, harus server yang support dengan node js server.