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

Module & Komponen pada angular 2 (Penjalasan + Coding)

0
Degananda.com -

Ulasan ini merupakan versi angular non-cli, untuk saat ini yang paling populer dan sangat membantu adalah angular-cli. Tutorial mengenai angular cli dapat dilihat di :

https://degananda.com/category/angular-2/pemula-starter-pack/

source code pada ulasan ini dapat didapatkan di : https://github.com/degananda/degananda.com.blog.angular/tree/1.0.0



Module

Component
Module pada angular berfungsi untuk menghandle “library” yang digunakan pada project. Pada sebuah project angular 2 minimal memiliki satu buah model sebagai root module dan biasannya diberikan nama “AppModule”. Pada module memiliki empat buah properti yang sangat penting. Empat properti ini adalah ditemuakan pada file app.module.ts. yang secara default akan tergenerate apabila menggunakan git “quickstart” yang disediakan oleh google. Pada module terdapat berbagai komponen yang dapat ditambahkan.

  1. Declaration
    “view class”, pada MVC declaration ini berfungsi untuk melakukan load terhadap komponen yang ada pada project ataupun pipe dan directive.
  2. Exports , digunakan untuk melakukan export pada component yang nantinnya dapat digunakan untuk proses templating.
  3. Import, digunakan untuk melakukan import “modul” yang digunakan pada rootmodule.
  4. Providers, digunakan untuk membuat services
  5. Bootstrap, main view yang diakses saat membuka aplikasi angular 2.

Beruntungnya dengan menggunakan quickstart yang telah disediakan oleh google, tidak perlu melakukan konfigurasi manual untuk mendeklarasikan modul dan komponen default karena telah disediakan pada git tersebut (kecuali properties export) :D. Kita hanya perlu untuk memodifikasi dan menambahkan source code untuk project kita tanpa bersusah payah untuk melakukan konfigurasi manual. Penjelasan lebih lanjut dapat di ikuti disini.

library
Componentsama halnya dengan angular 1 , angular js memiliki berbagai library yang sangat membantu dalam pembuatan project. Misalnya, library http untuk melakukan request ataupun cookies untuk manajemen cookies. pada angular 2 juga terdapat library namun berbeda cara menuliskannya pada source code. Untuk memanggil (import) library pada angular 1 dilakukan dengan cara :

Import komponen dari library.

import { BrowserModule } from '@angular/platform-browser';

masukan kedalam properties pada module.

import { BrowserModule } from '@angular/platform-browser';

Komponen

komponen adalah bagian dari modul yang menghandle variable, class, controller. Angular 2 menghandle tersebut menjadi sebuah class (untuk controller).  Secara umum fungsi komponen adalah :

  1. Sebagai tempat menentukan template (view yang akan dipanggil)
  2. Sebagai controller
  3. Menentukan event yang akan terjadi (bukan eventhandler), misalnya jika tombol di klik pada view akan memanggil sebuah fungsi tertentu pada komponen. event handler dilakukan pada template/view.

Contohnya adalah komponen ORANG. maka orang tersebut harus memiliki :

  1. Aktivitas (memakan, membaca, menulis)
  2. Variable (nama, tinggi, umur dan lain-lain)

ketiga hal tersebut dapat kita definisikan pada komponen di angular JS. yang sangat berfungsi untuk membuat project. Google mendesain angular 2 berdasarkan komponen-komponen kecil yang saling bersinergi dan dapat terintegrasi antar komponen.

Template

as simple as “file html(hypertext markup language)” pada tempate ini jika dianalogikan pada object orang yakni sebagai tubuh. Tubuh dapat menghandle kegiatan-kegiatan yang dilakukan anggota tubuhnya. Template hanya “menghandle” sementara detail kegiatan tersebut akan didefinisikan pada Komponen.
Sehingga untuk menampilkan data maka perlu kerjasama antara komponen dan template. Komponen akan mendefinisikan isi dari data, struktur dari datannya dan bagaimana cara mendapatkan data tersebut (misal melalui http get/post atau as simple as read json file). Sedangkan template akan melakukan BINDING terhadap data tersebut sehingga browser akan menampilkannya. Untuk proses binding akan dijelaskan pada ulasan ketiga 😀 ~

<div class="template">

<h1> this is tempalte </h1>

</div>

lets Code~, untuk memulai coding pastikan menggunakan quickstart dari google untuk mengikuti ulasan ini. Tujuan ulasan ini adalah membuat “content” dan “footer” secara sederhana dengan menggunakan angular 2

requirement

  1. Mengikuti ulasan : https://degananda.com/2016/12/21/1-installasi-dan-menjalankan-angular-2/
  2. Sedikit pengetahuan mengenai typescript. (namun jika tidak mengerti tidak masalah karena dapat di ikuti meskipun sama sekali tidak mengerti typescript).

1.  Membuat komponen dan template content

a. buat file komponen content.component.ts dan content.component.html

content.komponen.ts

import { Component } from '@angular/core';
@Component({
selector : 'media-content',
templateUrl : './app/content.component.html'
})
export class ContentComponent {

}
  • untuk membuat component pada angular JS diperlukan untuk melakukan load library Component dari @angular/core.
  • selector berfungsi untuk mendefinisikan kode html yang digunakan untuk memanggil komponen tersebut melalui template dalam hal ini untuk memanggil komponen content menggunkan directive atau kode html media-content.
  • @component({}) tidak diahiri dengan menggunkana semicolon (“;”) karena komponen ini akan diexport menjadi class ContentComponent. penulis class lebih baik diawali dengan menggunakan huruf Besar.
  • templateURl adalah lokasi dari template(view html) tempat menyimpan kode html yang akan ditampilkan pada browser.

content.komponen.html

<div>
<h1> Ini Konten </h1>
<hr />
</div>

2. Modifikasi file app.component.ts dan app.module.ts sehingga dapat “load” atau menggunakan komponen yang dibuat(content.component).

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { ContentComponent } from './content.component';

@NgModule({
imports:      [ BrowserModule ],
declarations: [
AppComponent,
ContentComponent
],
bootstrap:    [ AppComponent ]
})
export class AppModule { }
  • Import ContentComponent untuk mengimport class komponen yang telah dibuat pada file content.component.ts
  • melakukan inject pada properties declaration agar directive atau kode html pada selector komponen (media-content) dapat dipanggil melalui AppComponent tentunnya pada viewnya (app.component.html)

app.component.ts


import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './app/app.component.html'
})
export class AppComponent  { name = 'Angular'; }
  • Root komponent. yang merupakan komponen yang berhubungan langsung dengan bootstrap (komponen yang dipanggil pertama kali saat melakukan load angular).

app.component.html

<media-content></media-content>
  • memanggil directive yang telah dibuat pada properties selector di komponen content.component.ts

3. Membuat file komponen footer.component.ts dan footer.component.html
footer.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'media-footer',
templateUrl : './app/footer.component.html'
})
export class FooterComponent {

}

footer.component.html

<div>
<h1> This is footer</h1>
</div>

4. Memodifikasi kembali file app.component.html dan app.module.ts untuk melakukan load atau memasukan komponen footer yang beru saja dibuat.

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { ContentComponent } from './content.component';
import { FooterComponent } from './footer.component';

@NgModule({
imports:      [ BrowserModule ],
declarations: [
AppComponent,
ContentComponent,
FooterComponent
],
bootstrap:    [ AppComponent ]
})
export class AppModule { }
  • Meload footer.component sama halnya pada saat melakukan loading content component.

app.component.html

<media-content></media-content>
<media-footer></media-footer>
  • memanggil directive media-content dan media-footer.

5. Done ~ Jalankan pada browser.

screen-shot-2016-12-21-at-2-40-41-pm