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

Chapter 1 – Component & Lifecycle – Angular 2 tutorial bahasa

1
Degananda.com -

Pada ulasan dengan tag pemula starter pack ini akan membahas mengenai angular 2 dari 0. Project yang akan dibuat adalah “note management” dimana kita dapat menambahkan, mengubah, membaca dan menghapus note kita. Note adalah sebuah catatan yang berupa text yang kita buat. Project ini akan menggunakan angular-cli.

pre-requiste

Sebelum memulai membaca chapter ini, pastikan anda telah memiliki node js dan angular cli pada latop atau komputer anda. Jika belum maka bacalah chapter sebelum ini(chapter 0) untuk mengikuti ulasan mengenai installasi angular cli dan node js. Editor yang kami gunakan adalah visual studio code namun anda bebas menggunakan editor apapun sesuai dengan preferensi pribadi. Kami menggunakan visual studio code karena memiliki integrated terminal dan merupakan software yang dibuat oleh microsoft. Microsoft adalah salah satu perusahaan yang terlibat dalam pengembangan ecmascript sehingga vcs(visual studio code) mendapatkan dukungan dari pengembang ecmascript. Pastikan anda tersambung dengan internet karena modul yang akan digunakan pada chapter ini maupun selanjutnya akan diunduh melalui internet dengan bantuan npm(node package manager).

untuk mempermudah dalam organisasi repo pada github selalu gunakan tags untuk melihat source pada masing-masing chapter. TAGS 1.0 Berati source tersebut digunakan pada chapter 1.

Screen Shot 2017-05-17 at 8.43.03 PM

source github pada ulasan chapter ini adalah :

https://github.com/degananda/angular-note/tree/1.0

1. Komponen

1.1 Membuat komponen

Pada angular-cli untuk membuat komponen perintah yang ditulis adalah

Ng g component nama_komponen

Pastikan anda berada pada folder angular yang telah dibuat dengan menggunakan perintah ng new. Perintah ng g component com-note akan menghasilkan sebuah folder com-note dan empat buah file didalamnya yaitu :

  1. Com-note.component.css , file ini digunakan untuk memberikan styling dengan menggunakan css pada komponen contohnya seperti memberikan warna text, background ataupun hal-hal lain yang dapat dilakukan dengan css. Namun, file css ini hanya berlaku untuk komponent com-note. Komponen lain selain itu tidak mendapatkan styling dari file css tersebut.
  2. Com-note.component.html , file ini digunakan untuk menuliskan kode html pada komponen atau dengan kata lain adalah template(view). Hampir semua syntax html berlaku namun ada beberapa syntax yang tidak dapat dituliskan. Contohnya syntax <center> akan membuat komponen menjadi error. Namun hal ini tidak perlu dirisaukan karena syntax-syntax umum seperti <p>, <div>, <table>, <span>, <ul> , <li> dan lain-lain dapat digunakan.
  3. Com-note.component.spec.ts , file spec ini digunakan angular untuk keperluan unit testing. Setiap file ts yang dihasilkan dari angular cli memiliki file .spec.ts. Untuk pembahasan lebih lanjut mengenai testing pada angular 2 dapat dilihat di : https://angular.io/docs/ts/latest/guide/testing.html
  4. Com-note.component.ts , file typescript yang merupakan class pada komponen tersebut(dapat disebut sebagai controller). Salah satu yang dapat dilakukan di file ini adalah sebagai event handler pada komponen. Namun tidak hanya itu, banyak hal yang dapat dilakukan di file ini. Seiring dengan bertambahnya chapter akan semakin banyak fungsi dan kegunaan dari file ini.

Berikut ini adalah isi dari com-note.component.ts

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

@Component
   selector: 'app-com-note',
   templateUrl: './com-note.component.html',
   styleUrls: ['./com-note.component.css']
 })
 export class ComNoteComponent implements OnInit {

  constructor() { }

  ngOnInit() {
   }

}

1.1.1 Oninit

OnInit pada com-note.component.ts merupakan fungsi yang dieksekusi ketika komponen com-note pertama kali dibuat atau dieksekusi. OnInit merupakan salah satu fase pada angular 2 lifecyle. Setiap komponen memiliki lifecycle yang sangat berguna saat melakukan pembuatan aplikasi.

1.1.2 Angular 2 Lifecycle

Berikut ini adalah lifecycle hooks dari sebuah komponen pada angular 2. Berdasarkan website resmi angular.io terdapat 8 lifecycle pada directive dan komponen. Directive adalah marker yang berada pada DOM Element seperti atribut, nama elemen, nama class, dan lain-lain. Secara mudahnya directive dapat disebut sebagai tag yang terdapat pada elemen html. Contohnya elemen : <input type=”text” class=”a” onClick=””>, pada elemen tersebut terdapat directive class dan onClick. Angular memiliki directive tersendiri yang tidak dapat digunakan jika project tersebut dibuat tanpa menggunakan angular. Contoh directive pada angular 2 : [FormGroup] , [Disabled], (click), [style.display], dan lain-lain. Hal tersebut akan dapat kita pelajari lebih lanjut melalui chapter – chapter selanjutnya. Sehingga tidak perlu dihafalkan untuk saat ini. Mengalir saja seperti air, akan hafal dengan sendirinnya.

Komponen memiliki lifecycle yang diatur oleh angular. Angular membuat sebuah komponen, melakukan rendering, melakukan check terhadap terjadinnya pergantian(change) data pada class, dan terahir akan menghancurkan komponen tersebut dari DOM. Berikut ini adalah penjelasan mengenai 8 lifecycle hooks pada angular. Setiap hooks berjalan secara sekuensial yang berarti menunggu hooks sebelumnya selesai dijalankan/eksekusi.

 

Hooks Penjelasan
ngOnChanges() Dipanggil sebelum dilakukan ngOnInit() dan ketika terjadinnya pergantian data pada input properties.
ngOnInit() Dipanggil saat pertama kali melakukan inisiasi pada komponen atau directive. NgOnInit() akan dipanggil setelah ngOnChanges()
ngDoCheck() Dipanggil setelah ngOnInit(). Hooks ini mengindentifikasi perubahan yang tidak dapat dihandle oleh angular.
ngAfterContentInit() Merupakan hooks yang mengakomdasi event saat terdapat konten external(selain dari angular) masuk pada component view. Hook ini hanya terdapat pada komponen.
ngAfterContentChecked() Angular akan melakukan check(perubaan) pada external component. Hook ini hanya terdapat pada komponen.
ngAfterViewInit() Hook yang dipanggil ketika menginisiasi component views dan child views. Hook ini hanya terdapat pada komponen
ngAfterViewChecked() Hook yang dipanggil ketika angular telah melakukan check pada component views dan child views. Hook ini hanya terdapat pada komponen
ngOnDestroy() Hook yang dipanggil sebelum angular menhancurkan(destroy) komponen atau directive.

Tabel 1 Lifecycle hooks pada angular

Penjelasan dan contoh dari penggunaan hook tersebut akan dijelaskan melalui chapter-chapter berikutnya. Untuk saat ini cukup mengerti tentang jenis dan secara gamblang.

1.2 Menampilkan data pada komponen

Setelah membuat komponen com-note, maka selanjutnya kita akan menampilkan text/data pada komponen tersebut. Secara default template dari komponen com-note yang berada pada file com-note.component.html telah diberikan isi yaitu :

<p>

com-note works!

</p>

Anda bebas menggubah isi dari file tersebut dengan syntax-syntax html yang anda ketahui. Untuk menjalankan angular pada browser perintah yang harus dijalankan adalah

Ng serve

Jalankan perintah tersebut diterminal atau pada kasus kami adalah pada integrated terminal yang ada di microsoft visual code maka angular akan menjalankan sebuah web server yang akan mendeploy project tersebut dan secara default akan berjalan pada port 4200.

Screen Shot 2017-05-17 at 8.09.41 PM

url yang harus kita akses untuk membukannya dibrowser adalah http://localhost:4200 sebagaimana tertulis pada console tersebut.

Screen Shot 2017-05-17 at 8.10.24 PM

Namun, yang tertera pada browser adalah text “app works!” lalu dimana komponent “com-note” kita ? jawabannya adalah komponen com-note masih belum kita integrasikan dengan modul(app-module) dari angular. Untuk memanggil komponen tersebut maka kita perlu memanggilnya melalui app-module.ts dan app-component.html. Beruntungnya, angular-cli telah menghandle integrasi antara app-module.ts dengan setiap komponen yang dibuat melalui perintah ng g component. Penjelasan lebih lanjut mengenai module terdapat pada chapter 3.

 

import { AppComponent } from './app.component';
 import { ComNoteComponent } from './com-note/com-note.component';
 // dari newbie untuk newbie
 @NgModule({
 declarations: [
 AppComponent,
 ComNoteComponent

 

Pada gambar diatas dapat terlihat bahwa pemanggilan komponen com-note dilakukan secara otomatis oleh angular-cli hal ini sangat membantu kita dalam pembuatan aplikasi karena dapat menghemat waktu. Bayangkan jika memiliki lebih dari 20 komponen , maka waktu yang dapat dihemat sangat luarbiasa. Namun angular tidak menghandle integrasi antara komponen dengan app-component.html. Sehingga kita harus secara manual memanggil komponen com-note pada app-component.html. Syntax yang harus kita tuliskan yaitu selector dari komponen com-note yang dapat kita lihat pada com-note.component.ts.

@Component({
selector: 'app-com-note',
templateUrl: './com-note.component.html',
styleUrls: ['./com-note.component.css']
})

dari kode diatas dapat diketahui bahwa selector dari komponen com-note adalah “app-com-note”. Sehingga sytax yang digunakan untuk memanggil komponen tersebut adalah “<app-com-note></app-com-note>”. Syntax tersebut harus kita tuliskan pada file app-component.html yang merupakan template dari app-module.ts. berikut ini adalah syntax yang kita tuliskan pada file app-component.html.

<app-com-note></app-com-note>

Setelah menuliskan kode diatas simpan maka secara otomatis angular-cli akan melakukan kompilasi terhadap project, lalu browser juga secara otomatis melakukan reload atau refresh.Screen Shot 2017-05-17 at 8.16.02 PM

Komponen com-note telah berhasil dipanggil. Selanjutnya, jika kita mengubah isi dari com-note.component.html maka text yang tampil pada browser juga akan berbeda tanpa kita perlu me-reload browser karena angular-cli akan melakukan secara otomatis.

Screen Shot 2017-05-17 at 8.17.05 PM

1.3 Mendesain komponen com-note

Pada ebook ini, aplikasi yang akan dibuat adalah note atau catatan yang meliputi pembuatan catatan, listing, penghapusan dan mengubah(edit) isi dari catatan. Desain dari komponen note tertera digambar dibawah ini, namun anda dapat secara bebas membuat desain dari komponen note sesuai dengan preferensi pribadi. Berikut ini adalah desain note sederhana dengan menggunakan css tanpa framework(pada chapter selanjutnya akan diperkenalkan bagaimana menggunakan materialize framework pada angular).

Screen Shot 2017-05-17 at 8.17.39 PM

berikut ini adalah isi dari com-note.component.html

<div class="note">
  <div class="note_content">
    Hello, ini note saya 😀
  </div>
  <div class="note_action">
    <a class="btn">Edit</a> <a class="btn">Delete</a>
  </div>
</div>

berikut ini adalah isi dari com-note.component.css

.note {
 box-shadow: 0px 0px 3px 0px #c1c1c1;
 padding: 30px;
 background: #fff9c4;
 }

.note_content {
 padding: 15px 0px 15px 0px;
 font-size: 20px;
 }

.note_action { margin-top: 30px; }

.btn {
 padding: 5px 8px 5px 8px;
 border: 1px #1e88e5 solid;
 border-radius: 3px;
 color: #414141;
 margin-right: 5px;
 background: #ffffff;
 cursor: pointer;
 }

 

Berikut ini adalah souce github untuk mempermudah dalam mempelajari

https://github.com/degananda/angular-note/tree/1.0