Indonesian (Bahasa Indonesia) translation by Lukman Nulhakim (you can also view the original English article)
Pada salah satu seri tutorial Angular saya sebelumnya, saya membahas dasar-dasar Angular, mulai dari menginstal CLI dan kemudian membahas cara membuat komponen dasar dan mengimplementasikan routing. Lihat posting saya tentang Membuat Aplikasi Pertama Anda: Tingkat Dasar, untuk penyegaran pada instalasi Angular CLI dan alat lain yang direkomendasikan untuk membuat aplikasi Angular dengan mudah.
Aplikasi informasi negara yang kita buat dalam seri itu bagus untuk memulai menggunakan Angular, tetapi memiliki kekurangan dalam beberapa fitur. Misalnya, kita menyimpan informasi yang ingin kita tampilkan kepada user kita di dalam array. Namun, dalam tutorial ini, kita akan bergerak di luar sejumlah kecil data dan mempersilahkan user mencari database libray yang tersedia dari CDNJS.
Berikut ini adalah aplikasi yang akan kita buat:
Dalam tutorial pengantar seri ini, saya menyebutkan bahwa kita akan mendapatkan semua data library kita dengan bantuan API CDNJS. Saya juga menyebutkan bahwa dua komponen dalam aplikasi kita akan menggunakan data dari respons yang dikembalikan untuk menampilkan informasi yang berguna kepada user.
Dalam posting ini, kita akan menulis semua kode yang diperlukan untuk mengakses informasi tentang library yang berbeda dalam satu file bernama library.service.ts.
Kita buat file seperti pada tutorial lain yang bernama create your first Angular app: storing and accessing data. Dalam kasus ini, kita simpan data secara lokal di dalam array dan kemudian tulis beberapa metode di dalam class service untuk mengakses informasi dari lokasi pusat. Kali ini kita akan melakukan hal yang serupa.
Membuat class LibraryService
Beberapa hal akan sedikit berbeda dari saat terakhir ketika kita mendefinisikan class service. Pada saat itu, data disimpan secara lokal sehingga kita dapat mengaksesnya secara langsung. Kali ini, kita akan mendapatkan data dari server, jadi kita harus mengimpor set dependensi yang berbeda.
Kita juga harus memodifikasi metode yang kita gunakan untuk mengakses data kita karena informasi tersebut tidak akan tersedia secara instan saat ini. Dengan mengingat hal-hal ini, mari kita mulai menulis kode untuk LibraryService.
Kita akan mengimpor dua dependensi untuk class LibraryService kita. Dependensi Injectableyang tersedia di dalam @angular/core akan memungkinkan kita untuk menyuntikkan class LibraryService di dalam komponen lain yang membutuhkannya.
Kita juga akan mengimpor HttpClient dari @angular/component/http. Class injectable ini memberi kita akses ke metode berbeda yang dapat digunakan untuk membuat permintaan HTTP. kita akan menggunakan metode get() dari class ini untuk mengambil semua data library kita.
Kita akan mendefinisikan dua metode di dalam class LibraryService kita yang akan mendapatkan data tentang library tertentu atau mendapatkan daftar beberapa library. Berikut ini kode lengkapnya:
1 |
import { Injectable } from '@angular/core'; |
2 |
import { HttpClient } from '@angular/common/http'; |
3 |
|
4 |
@Injectable() |
5 |
export class LibraryService { |
6 |
|
7 |
constructor(private https: HttpClient) { |
8 |
}
|
9 |
|
10 |
showLibrary(libraryName) { |
11 |
const url = 'https://api.cdnjs.com/libraries/' + encodeURI(libraryName); |
12 |
return this.http.get(url).toPromise(); |
13 |
}
|
14 |
|
15 |
searchLibraries(searchTerm) { |
16 |
const url = 'https://api.cdnjs.com/libraries?search=' + encodeURI(searchTerm) + '&fields=version,description'; |
17 |
return this.http.get(url).toPromise(); |
18 |
}
|
19 |
}
|
20 |
Di dalam metode showLibrary() dan searchLibraries(), kita menggunakan format yang sama untuk membangun URL yang telah kita diskusikan di tutorial sebelumnya. Untuk searchLibraries(), kita hanya mendapatkan versi dan deskripsi dari masing-masing library. Untuk showLibrary(), kita tidak menentukan field tertentu sehingga diambil semua field, termasuk tautan ke beranda, repositori, dll.
Setelah itu, kita gunakan metode toPromise() untuk mengonversi Observable yang dikembalikan oleh metode get() menjadi sebuah Promise. Promise mempermudah kita untuk menulis kode asynchronous. Setelah Promise telah dipenuhi atau ditolak, akan memberi Anda nilai kembali yang dapat digunakan dengan tepat. Kita dapat menggunakan metode then() pada Promise untuk menambahkan pemenuhan dan penangan penolakan untuk promise kita. Hal ini akan dibahas dalam tutorial nanti di mana kita akan belajar cara memanipulasi data yang dikembalikan dan menunjukkannya kepada users kita.
Penerapan Routing untuk aplikasi kita
Kita belum membuat komponen apa pun dari aplikasi pencari libary kita, tetapi kita masih mengetahui komponen mana yang perlu ditampilkan saat itu.
Untuk menulis kode routing kita, kita akan membuat file bernama app-routing.module.ts dan menambahkan kode berikut di dalamnya:
1 |
import { NgModule } from '@angular/core'; |
2 |
import { RouterModule, Routes } from '@angular/router'; |
3 |
|
4 |
import { HomeComponent } from './home/home.component'; |
5 |
import { LibraryDetailsComponent } from './library-details/library-details.component'; |
6 |
import { LibraryListComponent } from './library-list/library-list.component'; |
7 |
|
8 |
const routes: Routes = [ |
9 |
{ path: '', redirectTo: '/home', pathMatch: 'full' }, |
10 |
{ path: 'home', component: HomeComponent }, |
11 |
{ path: 'detail/:library', component: LibraryDetailsComponent }, |
12 |
{ path: 'list/:search', component: LibraryListComponent } |
13 |
];
|
14 |
|
15 |
@NgModule({ |
16 |
imports: [RouterModule.forRoot(routes)], |
17 |
exports: [RouterModule] |
18 |
})
|
19 |
|
20 |
export class AppRoutingModule { } |
21 |
Kita mulai dengan mengimpor dependensi Angular yang berbeda juga seperti komponen lain yang akan kita buat nanti. Setiap kali user mengunjungi jalur yang ditentukan di dalam array routes, kita akan membuat komponen yang sesuai untuknya.
Tanda titik dua (:) ng ada di di jalur ketiga dan keempat digunakan untuk menandakan bahwa baik library dan search adalah placeholder untuk nama library yang lebih spesifik dan istilah pencarian. Dengan cara ini, kita dapat menghindari dalam mendefinisikan jalur baru untuk setiap library dan hanya menggunakan jalur umum dari mana kita dapat dengan mudah mengekstrak nama library atau istilah penelusuran.
Mengupdate file app.module.ts
Setelah membuat class LibraryService dan mengimplementasikan logika routing, yang harus kita lakukan adalah memperbarui file app.module.ts. File ini digunakan oleh Angular untuk membangun dan mem-bootstrap aplikasi kita. Jika Anda membuka file ini, Anda akan melihat bahwa file ini tidak kosong. Angular telah mengimpor beberapa dependensi yang kita perlukan untuk membuat aplikasi kita. Angular juga akan memperbarui aplikasi ini nanti ketika kita membuat komponen kita sendiri menggunakan CLI Angular. Untuk saat ini, letakkan kode berikut di dalam file app.module.ts.
1 |
import { BrowserModule } from '@angular/platform-browser'; |
2 |
import { HttpClientModule } from '@angular/common/http'; |
3 |
import { NgModule } from '@angular/core'; |
4 |
|
5 |
|
6 |
import { AppComponent } from './app.component'; |
7 |
|
8 |
import { LibraryService } from './library.service'; |
9 |
import { AppRoutingModule } from './app-routing.module'; |
10 |
|
11 |
@NgModule({ |
12 |
declarations: [ |
13 |
AppComponent
|
14 |
],
|
15 |
imports: [ |
16 |
BrowserModule, |
17 |
HttpClientModule, |
18 |
AppRoutingModule
|
19 |
],
|
20 |
providers: [LibraryService], |
21 |
bootstrap: [AppComponent] |
22 |
})
|
23 |
export class AppModule { } |
24 |
Anda perlu mengimpor BrowserModule untuk setiap aplikasi Angular yang akan berjalan di browser. Mengimpor HttpClientModule memberi kita akses ke HttpClient dan service terkait lainnya yang kita gunakan di dalam class LibraryService kita untuk mendapatkan informasi tentang library yang berbeda. Angular telah mengimpor class AppComponent untuk kita. Sekarang, kita hanya perlu mengimpor class LibraryService dan AppRoutingModule yang kita definisikan di bagian sebelumnya.
Setelah mengimpor dependensi yang diperlukan, kita gunakan decorator @NgModule yang mengambil objek metadata untuk memberi tahu Angular bagaimana cara mengkompilasi dan meluncurkan aplikasi kita.
Array declarations digunakan untuk menentukan semua class komponen yang dibutuhkan aplikasi kita. Mencoba menggunakan komponen tanpa mencantumkannya di sini terlebih dahulu akan menghasilkan kesalahan. Saat ini, array declarations hanya berisi satu class. Setelah kita menghasilkan lebih banyak komponen menggunakan CLI Angular, akan secara otomatis ditambahkan ke daftar ini.
Array imports digunakan untuk menentukan semua modul yang dibutuhkan aplikasi kita. Anda hanya dapat menambahkan class NgModule di dalam array impor. Pada kasus kita, classes ini adalah BrowserModule, HttpClientModule, dan AppRoutingModule.
Anda menggunakan array providers untuk membuat dependensi injektor mengetahui berbagai service yang berbeda yang dibutuhkan aplikasi kita. Dalam hal ini, kita hanya dengan menambahkan array LibraryService class inside our providers.
Gagasan Terakhir
Kita telah membuat tiga file berbeda dalam tutorial ini. library.service.ts digunakan untuk mendefinisikan class LibraryService dengan metode yang berbeda untuk mendapatkan data tentang berbagai library. File app-routing.module.ts digunakan untuk menyimpan logika routing aplikasi kita. kita menyimpan informasi tentang berbagai jalur dan komponen terkait yang perlu dimuat untuk setiap jalur di untuk setiap jalur di dalam array routes. Terakhir, kita memperbarui file app.module.ts untuk menyertakan class LibraryService dan AppRoutingModule yang tersedia untuk seluruh aplikasi.
Dalam tutorial berikutnya, Anda akan membuat HomeComponent untuk aplikasi Angular kita yang memungkinkan user menentukan istilah pencarian atau nama library. Jika ada yang ingin saya jelaskan dalam tutorial ini, beri tahu saya di komentar.
