degananda ferdian
lifelong learner — urip iku urup, currently working on accenture.
http://degananda.com

Angular – Modules

By degananda ferdian
0
Degananda.com -

Angular

Angular adalah merupakan web framework yang digunakan untuk membangun aplikasi website dengan menggunakan html dan javascript. Tetapi, penulisan kode official yang direkomendasikan adalah menggunakan typescript (ts). Nantinnya typescript ini akan dicompile menjadi javascript karena typescript adalah superset dari javascript yang memiliki beberapa fitur yang tidak dimiliki oleh javascript misalkan mendefinisikan tipe data.

Penggunaan typescript ini akan membantu kita para developer dalam menuliskan javascript (ES6). Angular menggunakan beberapa library. Beberapa diantarannya merupakan library inti yang harus digunakan pada aplikasi dan ada juga library yang bersifat opsional(tidak harus digunakan). Contoh library opsional adalah Http yaitu library yang digunakan untuk melakukan http request(post/get/put/delete) pada suatu endpoint. Sedangkan library yang wajib ada adalah BrowserModule karena terkait dengan proses render dan mekanisme pertukaran data pada browser ataupun DOM.

Coding

Kita akan menggunakan html untuk menulis atau membuat template dari angular dengan menggunakan angular markup atau syntax html / directive yang khusus ada pada angular seperti ngFor untuk looping ngIf untuk menampilkan atau menghilangkan suatu elemen dan lain sebagainnya. Untuk memanage template yang kita buat dengan html dan angular markup maka diperlukan suatu class. Pembuatan class ini dilakukan oleh ES6 dan ditambah kekuatan dari typescript yang semakin memudahkan dalam coding. Pada bagian application logic akan menggunakan services. Service ini dapat dimanfaatkan di berbagai class sehingga meningkatkan efisiensi.

Angular memiliki root module yang bertanggung jawab untuk melakukan boostraping(sebuah modul kecil yang berfungsi untuk mengaktifasi komponen/program yang lebih komplex dengan menggunakan mekanisme tertentu) yang berguna untuk melaunch aplikasi angular.  Setelah bootstraping maka aplikasi akan ditampilkan dibrowser dan angular akan menghandle user interaction sesuai dengan kode/instruksi yang kita tulis.

Angular bersifat Modular

Baca juga

Aplikasi angular bersifat modular. Secara harfiah modular berarti suatu desain dari sistem yang tersusun atas sistem – sistem kecil yang menyusun keseluruhan sistem. Sistem kecil ini disebut sebagai modul. Sehingga modul adalah bagian parsial dari suatu sistem yang menyusun sistem tersebut. Modularity (whole system) pada angular disebut dengan ngModule.

Module & AppModule

Dalam ngModule ini terdapat modul-modul penyusunnya. Contoh dibawah ini ngModule tersusun atas BrowserModule, ReactiveFormModule dan lain sebagainnya. Ibaratkan ngModule ini sebagai suatu toolbox yang didalamnya terdapat banyak sekali tool yang memiliki fungsi tertentu.

@NgModule({
 declarations: [
 AppComponent,
 ComNoteComponent
 ],
 imports: [
 BrowserModule,
 ReactiveFormsModule,
 FormsModule,
 ],
 providers: [
 ServiceNoteService
 ],
 bootstrap: [AppComponent]
})

Dalam setiap aplikasi angular setidaknya terdapat satu buah ngModule yang juga dapat disebut sebagai root module dan dinamai dengan AppModule. Jika kita menggunakan angular universal maka aplikasi akan memiliki dua ngModule pertama untuk client(AppModule) dan kedua untuk server (AppServerModule). Angular universal dapat memungkinkan untuk melakukan proses render di server(nodejs).

Angular menggunakan decorator untuk mendefinisikan jenis dari suatu class. Misalkan untuk mendefinisikan suatu service maka digunakan decorator @Injectable , untuk mendefinisikan pipe maka digunakan decorator @Pipe begitupula untuk mendefinisikan ngModule maka digunakanlan decorator @ngModule. Sehingga fungsi decorator adalah suatu kode yang digunakan untuk mendefinisikan jenis suatu class pada javascript. Decorator ini diperkenalkan pada es7.

Selain itu, decorator juga akan mendeskripsikan metadata yang harus ada pada class tersebut. Contohnya pada decorator pipe , metadata yang harus ada adalah name dan pure (tipe dari pipe). Namun tidak semuannya harus dituliskan dikarenakan ada beberapa metadata yang terdefinisi secara default. Kita dapat menggubahnya dengan cara melakukan overwrite terhadap metadata tersebut.

@Pipe({
 name: 'pipeSearch',
 pure : false
})

Pada kode diatas kita melakukan overwrite terhadap metadata pure yang secara default seharusnya bernilai true. Pada kasus decorator @ngModule terdapat empat metadata wajib yang harus didefinisikan yaitu :

  1. declaration
  2. imports
  3. providers
  4. bootstrap.

ngModuleClass

ngModuleClass ditandai dengan decorator @ngModule. ngModuleClass bertanggung jawab bagaimana menggabungkan banyak modul sehingga dapat menjadi satu kesatuan sistem yang utuh. Class inilah(AppModule) yang akan melakukan proses broostrap. AppModule adalah nama dari class sedangkan ngModule adalah jenis dari suatu class. Sehingga AppModule adalah nama class yang bersifat sebagai rootmodule/ngModule.

@NgModule({
 imports: [ BrowserModule ],
 declarations: [ AppComponent ],
 bootstrap: [ AppComponent ]
})

seperti telah dijelaskan diatas bahwa decorator berfungsi untuk memberikan jenis terhadap suatu class dan akan mengikatkan beberapa metadata. Pada decorator @NgModule terdapat tiga metadata utama yakni :

  • imports 
    merupakan metadata yang menampung modul – modul apa saja yang akan digunakan oleh aplikasi. Contoh diatas adalah browserModule. Modul yang berfungsi untuk menghandle mekanisme pertukaran data pada browser.
  • declaration
    metadata yang menjelaskan komponen – komponen apa saja yang ada pada aplikasi. Ketika kita membuat komponen baru maka harus ditambahkan kesini.
  • boostrap
    merupakan root component atau penjelasan mudahnya adalah komponen yang bersifat seperti index.html (yang akan diakses pertama kali oleh user saat membuka aplikasi angular).

selain tiga metadata utama diatas juga terdapat beberapa metadata lainnya yang ada di decorator @ngModule yakni :

  • Providers
    menjelaskan daftar services yang digunakan oleh aplikasi
  • Export
    Merupakan subset dari metadata import yang digunakan untuk memberitahukan kepada angular komponen mana yang dapat digunakan oleh template-template lain. Tapi biasannya kita perlu mendefinisikan metadata ini karena apa yang ingin kita export ke template lain? sangat jarang untuk mengexport AppComponent / rootcomponent.

kode yang mendefinisikan module mana yang digunakan untuk melakukan boostraping terletak pada file /src/main.ts

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

kesimpulan

 

  1. decorator berfungsi untuk memberikan “jenis” pada suatu class. Misalkan class tersebut berjenis pipe/component/injectable(service)/ngModule dan lain sebagainnya.
  2. decorator akan mendefinisikan metadata yang harus ada pada class (mirip seperti fungsi interface pada class).
  3. Angular dibangun secara modular. Artinnya tersusun atas modul-modul parsial
  4. Aplikasi angular minimal memiliki satu buah ngModule , tetapi juga dapat lebih dari satu (misalkan menggunakan angular univesal untuk melakukan rendering pada sisi server).
  5. ngModule(AppModule) adalah rootModule yang bertanggung jawab untuk melakukan bootstraping
  6. Bootstraping adalah mekanisme yang dilakukan oleh suatu program yang kecil/simpel guna mengakstivasi program komplex yang lain. Atau pandangan kami pribadi adalah seperti “pengungkit” dengan pengungkit dapat mengangkut beban yang lebih besar.