Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)
Sa isa sa mga nauna kong serye ng pagtuturo ng Angular, isinama ko ang mga pangunahing kaalaman ng Angular, mula sa pag-install ng CLI at pagtalakay kung paano gumawa ng pangunahing bahagi nito at pagpatupad ng routing. Tingnan ang aking post sa Paggawa ng Iyong Unang Angular App: Mga Pangunahing Kaalaman, para sa paalala muli sa pag-install ng Angular CLI at ibang pang inirerekomendang instrument para makagawa ng Angular app nang madali.
Ang country information app na ginawa natin sa seryeng iyon ay maganda para umpisahan ang Angular, subalit may kulang itong ilang features. Halimbawa, itinago natin ang impormasyon na nais nating ipakita sa ating users sa loob ng array. Subalit sa pagtuturong ito, pupunta tayo sa labas ng maliit na set ng data at hayaang hanapin ng users ang library database na makikita sa CDNJS.
Narito ang app na gagawin natin:

Sa panimulang pagtuturo ng seryeng ito,
Nabanggit ko na kukunin natin ang lahat ng mga datos sa aklatan sa tulong ng
CDNJS API. Nabanggit ko din na may dalawang bahagi sa ating app na gagamit ng
datos mula sa mga bumalik na tugon para
maipakita ang mahalagang impormasyon sa gumagamit.
Sa
pahayag na ito, ating isusulat ang lahat ng mga code na kailangan upang
ma-access ang mga impormasyon tungkol sa iba’t-ibang aklatan sa iisang file library.service.ts.
Tayo ay lumikha ng isang katulad na file
sa ibang pagtuturo at tinawag na lumikha ng iyong unang Angular app: pagtatago
at pag-access ng datos. Kung gayon, ating itinago ang datos sa
isang lugar lamang sa loob na naka-ayos at pagkatapos ay sinulatan ng mga pamamaraan
sa loob ng uri ng serbisyo upang ma-access ang impormasyon mula sa sentral na
lokasyon. Mayroon tayong gagawin na parang kaparehas sa oras din ito.
Paglikha ng LibraryService
Class
May kaunting pagkakaiba ang mga bagay kaysa dun sa huli natin tinukoy na klase ng serbisyo. At sa panahon na iyon, ang mga datos ay nakatago sa iisang lugar lamang para ma-access natin ito kaagad. Sa ngayon, ating kukunin ang mga datos sa server, kung kaya’t kailangan natin mag-angkat ng ibang lupon ng dependensya.
Kailangan din nating baguhin ang mga
paraang ginamit natin upang ma-access ang ating mga datos dahil ang mga
impormasyon ay hindi agad-agad magagamit sa oras na ito. Tandaan palagi ang mga
bagay na ito, tayo’y magsimula nang magsulat ng mga code para sa LibraryService
.
Tayo ay aangkat ng dalawang dependesya
para sa ating LibraryService
class. Ang Injectable
dependency na mayroon ay @angular/core
ay nagpapahintulot na mag-inject sa ating
LibraryService
class sa loob ng ibang bahagi na nangangailangan nito.
Tayo rin ay mag-aangkat ng HttpClient
mula sa @angular/component/http
. Ang injectable class na ito ay nakapagbibigay sa
atin ma-access ang iba’t-ibang paraan na maaring gamitin upang gumawa ng
kahilingan na HTTP. Gagamitin natin ang gets( )
na pamamaraan mula sa klase na ito
upang makuha ang lahat ng ating datos ng aklatan.
Tutukuyin natin ang dalawang pamamaraan
na nasa loob ng ating LibraryService
class kung saan kahit alin ay makukuha ang
datos tungkol sa isang partikular na aklatan o makakakuha ng lisatahan ng
maraming aklatan. Narito ang kumpletong code:
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable() export class LibraryService { constructor(private http: HttpClient) { } showLibrary(libraryName) { const url = 'https://api.cdnjs.com/libraries/' + encodeURI(libraryName); return this.http.get(url).toPromise(); } searchLibraries(searchTerm) { const url = 'https://api.cdnjs.com/libraries?search=' + encodeURI(searchTerm) + '&fields=version,description'; return this.http.get(url).toPromise(); } }
Sa loob ng showLibrary( )
at
searchLibraries( )
pamamaraan, ginamit natin ang parehas na ayos para bumuo ng
ating URL na ating napag-usapan sa nakaraang pagtuturo. Para sa searchLibraries ( )
, makukuha
lan natin ang bersiyon at paglalarawan ng bawat aklatan. Para showLibrary ()
,
hindi natin tutukuyin ang anuman partikular na larangan para makuha natin lahat, kasama ang link sa homepage, sisidlan,
etc.
Pagkatapos niyan, gumamit tayo ng
toPromise ( )
pamamaraan upang palitan ang Observable
na binalik sa
pamamagitan ng pagkuha gets( )
pamamaraan bilang Promise. Napapadali ng Promises
para sa atin na isulat ang asynchronous code. Kapag ang Promise ay natupad o
natanggihan, ito ay may ibabalik sa iyo na halaga kung saan ay magagamit nang ayon
dito. Magagamit natin ang noon then()
pamamaraan sa Promise para ilakip sa
humahawak ng katuparan at hindi pagtanggap sa ating promise. Ito ay tatalakayin sa pagtururo mamaya
kung saan ay matututunan natin kung pano manipulahin ang bumalik na datos at
ipakita ito sa ating mga gumagamit.
Pagpapatupad ng Direksiyon para sa ating App.
Hindi tayo lumikha ng anuman bahagi mula
sa ating library finder app, ngunit alam pa rin natin kung anong bahagi ang kailangan
maipakita.
Upang isulat ang ating code para sa
direksiyon, tayo ay lilikha ng file na pinangalanang app-routing.module.ts
at
idagdag ang mga sumusunod na code sa loob nito:
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { LibraryDetailsComponent } from './library-details/library-details.component'; import { LibraryListComponent } from './library-list/library-list.component'; const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'detail/:library', component: LibraryDetailsComponent }, { path: 'list/:search', component: LibraryListComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
Sisimulan natin sa pamamagitan ng
pag-angkat ng iba’t-ibang Angular dependencies at iba pang bahagi na ating
lilikhain mamaya. Anuman oras na ang mga gumagamit ay bibisita sa tinutukoy na
daan sa loob ng routes
array, ating ibibigay ang kaukulang bahagi sa kanila.
Ang tutuldok (:
) na naroon sa ikatlo
at ika-apat na daan ay ginamit upang ipahiwatig na ang kapwa aklatan
at hanapan
ay mga placeholder para sa mas tiyak na pangalan ng aklatan at hanapan ng mga
termino. Sa paraan ito, maiiwasan natin ang magtakda ng bagong daan para sa
bawat aklatan at gamitin lamang ang pangkalahatan daan kung saan ay madali
natin makukuha ang pangalan ng aklatan o ang hanapan ng termino.
Pag-update ng File na app.module.ts
Pagkatapos lumikha ng ating
LibraryService
class at pagpapatupad ng lohika ng direksiyon, ang dapat na lang
natin gawin ay i-update ang file ng app.module.ts. Ang file na ito ay ginamit
ng Angular para makagawa at mag-bootstrap ng ating app. Kung bubuksan mo ang file na ito,
mapapansin mo na ito ay hindi bakante. Ang Angular ay nakapag-angkat na ng
ibang mga dependencies na kakailanganin natin upang lumikha ng ating app. Angular din ang mag-uupdate ng app na
ito kinalaunan kapag nakalikha na tayo ng sarili nating bahagi gamit ang
Angular CLI. Sa ngayon, ilagay ang mga sumusunod na code sa loob ng
app.module.ts file.
import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { LibraryService } from './library.service'; import { AppRoutingModule } from './app-routing.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, AppRoutingModule ], providers: [LibraryService], bootstrap: [AppComponent] }) export class AppModule { }
Kailangan mo din mag-angkat ng
BrowserModule
para sa bawat Angular app kung saan ay tatakbo ito sa browser. Pag-angkat ng HttpClientModule
ay
nagbibigay sa atin ng daan para sa HttpClient
at iba pang nauugnay na serbisyo
na ginagamit natin sa loob ng LibraryService
class para makakuha ng impormasyon
tungkol sa iba’t-ibang aklatan. Ang angular ay nakapag-angkat na ng AppComponent
class para sa atin. Sa ngayon, kailangan lang natin mag-import ng LibraryService
class at AppRoutingModule
na ating tinukoy sa nakaraang
seksiyon.
Pagkatapos angkatin ang mga
kinakailangan dependencies, ginamit natin ang @NgModule
na dekorador na kumukuha
ng metadata object para sabihin sa Angular kung paano magtala at ilunsad ang ating
application.
Ang declarations
array ay ginamit upang
tukuyin ang lahat ng mga klase ng bahagi na kakailanganin ng ating app. Sinusubukang
gumamit ng isang bahagi na walang lista dito ay mag-reresulta ng kamalian. Sa ngayon, ang declarations
array ay
naglalaman lamang ng isang klase. Sa sandaling bumuo tayo ng mas maraming
bahagi gamit ang Angular CLI, sila ay awtomatikong madadagdag sa listahan na
ito.
Ang imports
array ay ginamit upang
tukuyin ang lahat ng mga modulo na kinakailangan ng ating app. Dapat mo lamang
idagdag ang NgModule
classes sa loob ng imports array. Sa usapin na ito, ang mga klase na ito ay ang mga BrowserModule
, HttpClientModule
, and AppRoutingModule
.
Ginamit mo ang providers
array para
tulutan ang dependency injector na malaman ang tungkol sa iba’t-ibang serbisyo
na kinakailangan ng ating app. Sa usapin na ito, tayo ay nagdadagdag lamang ng
LibraryService
class sa loob ng providers
array.
Panghuling Pahayag
Nakapaglikha tayo ng tatlong magkakaibang
files sa pagtuturong ito. Ang library.service.ts ay ginagamit upang tukuyin ang
LibraryService
class na may iba’t-ibang pamamaraan upang makakuha ng datos
tungkol sa sari-saring mga aklatan. Ang app-routing.module.ts file ay ginamit
upang maitago ang mga routing logic ng ating app. Itinatago natin ang
impormasyon tungkol sa iba’t-ibang daan at ang mga nararapat na bahagi na
kinakailangang maikarga para sa bawat daan sa loob ng routes
array. Sa wakas, nakapag-update na tayo nang
app.module.ts file para isama ang LibraryService
class at ang AppRoutingModule
na mayroon sa buong app.
Sa susunod na pagtuturo, maglilikha ka
ng HomeComponent
para sa ating Angular app para pahintulutan ang mga gumagamit
na tukuyin sa hanapan ng termino o pangalan ng aklatan. Kung mayroon kang nais linawin
na anuman sa pagtuturong ito, ipaalam mo lan sa akin sa mga komento.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post