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 nakaraang post, gumawa tayo ng LibraryService
class para makakuha ng impormasyon tungkol sa iba’t ibang libraries gamit ang
CDNJS API. Gumawa din tayo ng app-routing.module.ts file para maibigay ang
lahat ng routing logic para sa ating app.
Sa routing logic, maaaring napansin mo
na sinasabi natin sa Angular na i-render ang HomeComponent
kapag ang users ay
nasa homepage ng ating app.Katulad nito, sinasabi natin sa Angular na i-render ang
LibraryListComponent
kapag pinindot ng users ang List All Libraries button
pagkatapos magsulat ng kahit na ano sa input field.
Sa pagtuturong ito, gagawa tayo ng
dalawang components para sa ating Angular app. Gagawa muna tayo ng HomeComponent
at pagkatapos ay gagawa tayo ng LibraryListComponent
.
Paggawa ng HomeComponent Class
Para magawa ang HomeComponent
files
gamit ang Angular CLI, pumunta sa directory ng library-finder
app papunta sa
console. Pagkatapos i-run ang mga sumusunod na command:
ng generate component home
Gagawa
ito ng folder na may pangalang home
sa loob ng root directory ng ating library
finder app. Ang folder na ito ay magkakaroon ng apat na iba’t ibang files.
Tatlo sa mga files na ito ay dapat pangalanang home.component.css, home.component.html, at home.component.ts.
Ang HTML file ay maglalaman ng template code
para sa HomeComponent
, at ang CSS file ay maglalaman ng style information para
sa template na iyon.Ang TypeScript file ay maglalaman ng logic ng ating
HomeComponent
.
Narito ang code para sa home.component.ts file:
import { Component } from '@angular/core'; import { LibraryService } from '../library.service'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent { searchTerm = ''; libraryName = ''; constructor(private libraryService: LibraryService) { } updateTerm(event: any): void { this.searchTerm = event.target.value; } updateName(event: any): void { this.libraryName = event.target.value; } }
Kung nabasa mo ang paggawa ng unang
serye ng Angular app, maaaring napansin mong ang HomeComponent
na ginawa natin
sa pangalawang pagtuturo ng seryeng iyon ay nag-import ng OnInit
module mula sa
Angular core. Nag-initialize din tayo ng values ng iba’t ibang properties sa
class na iyon sa loob ng ngOnInit()
method.
Walang ganyang module ang na-import sa
ngayon dahil ang HomeComponent
ay
hindi naglalagay ng values habang initialization. Maliban dito, halos karamihan
sa ibang bagay ay ginawa sa parehong paraan.
Magsisimula tayo sa pagi-import ng
LibraryService
class na ginawa natin kanina. Pagkatapos, nilagay natin ang
value ng selector
, templateUrl
, at styleUrls
sa loob ng component decorator. Tandaan na maaari kang magbigay ng iba’t
ibang stylesheets para lagyan ng istilo ang component subalit isang template
lang para i-render ito.
Sa loob ng HomeComponent
class
definition, tutukuyin natin ang dalawang properties na tinatawag na searchTerm
at libraryName
. Ang values ng parehong properties ay naka-set sa empty string dati
pa. Ang mga values na ito ay binabago sa
loob ng updateTerm()
at updateName()
methods kapag ang users ay naglalagay ng kahit na ano sa kaukulang input field.
Paggawa ng HomeComponent Template
Ang HomeComponent
ay magkakaron ng
dalawang input fields at dalawang links na magsisilbing buttons at dadalhin ang
users sa iba’t ibang paths. Ang input fields ay makikinig sa keyup
event at babaguhin
ang values ng searchTerm
at libraryName
properties alinsunod dito.
Ang dalawang links sa tabi ng input
fields ay dinadala ang users sa iba’t ibang path gamit ang routerLink
directive. Sa unang kaso, ang users ay pumupunta sa
/list/{{searchTerm}}
, at sa pangalawang kaso, pupunta sila sa
/detail/{{libraryName}}
.Ang path ay binabago palagi batay sa kasalukuyang value
ng input field. Halimbawa, ang path ay nagiging /list/bootstrap
kapag ang isang tao ay naglagay ng bootstrap sa unang input field, at nagiging /detail/jquery
kapag ang isang tao ay naglagay ng jquery sa pangalawang input field.
Narito ang kumpletong code para sa ating home.component.html file:
<div class="wrapper"> <div class="input-container"> <input type="text" placeholder="Search Term" (keyup)="updateTerm($event)"> <a class="simple" routerLink="/list/{{searchTerm}}">List All Libraries</a> </div> <br> <div class="input-container"> <input type="text" placeholder="Library Name" (keyup)="updateName($event)"> <a class="simple" routerLink="/detail/{{libraryName}}">Show Library Details</a> </div> <br> <h3>Popular Libraries</h3> <div class="library-box" routerLink="/detail/jquery">jQuery</div> <div class="library-box" routerLink="/detail/Chart.js">Chart.js</div> <div class="library-box" routerLink="/detail/sweetalert">SweetAlert</div> </div>
Gumawa din tayo ng tatlong iba’t ibang boxes para ilista ang mga pangalan ng ilang sikat na libraries. Matitingnan nang direkta ng users ang mga detalye ng mg libraries na ito sa halip na una ay pag lagay ng kanilang mga pangalan at sunod ay pagpindot sa Show Library button.
Lahat ng mge elements na ito ay nakapaloob
sa container div
element para pagsamahin silang lahat para sa pag istilo.
Paggawa ng HomeComponent CSS File
Pagkatapos isulat ang component logic at
gawin ang template file, kailangan lang nating baguhin ang CSS file para gawing
maganda ang ating HomeComponent
.
Narito ang CSS na ginamit ko para lagyan
ng istilo ang iba’t ibang elements sa loob ng template file. Maaari mong
baguhin lahat ng alituntunin sa istilo batay sa iyong sariling kagustuhan.
div.wrapper { width: 800px; margin: 20px auto; } h3 { font-size: 1.5em; text-align: center; color: #666; font-family: 'Lato'; } a.simple { background: white; color: black; border: 1px solid black; padding: 5px 10px; font-size: 1.3rem; font-family: 'Lato'; font-weight: 300; border-radius: 5px; text-decoration: none; width: 200px; display: inline-block; text-align: center; } input { border: none; border-bottom: 2px solid #00ccff; font-size: 1.5rem; outline: none; font-family: 'Lato'; font-weight: 300; margin-right: 100px; width: 450px; } input:focus { border-bottom: 2px solid #ccff00; } div.library-box { font-family: 'Lato'; color: white; background: purple; width: 200px; height: 70px; text-align: center; padding-top: 30px; font-size: 2em; border-radius: 4px; display: inline-block; margin: 20px; } div.library-box:hover { background: black; cursor: pointer; }
Lahat ng nasa CSS file ay madaling
ipaliwanag. I-set ang width ng ating wrapper div
katumbas ng permanenteng value
na 800 px. Ang nasa ibabang kahon na may
pangalan ng sikat na libraries ay napapalitan ang kulay ng background ng itim
kapag nilagay ng users ang cursor dito nang hindi pinipindot.
Paggawa ng LibraryListComponent Class
Katulad ng nabanggit ko kanina, ang
LibraryListComponent
ay gagamitin para ilista ang lahat ng libraries na
naglalaman ng search term na kinuha mula sa kasalukuyang path. Maaari mong makuha
lahat ng kailangang files sa component na ito sa pamamagitan ng pagsasagawa ng
sumusunod na statement sa command line:
ng generate component library-list
Katulad ng ating home component, ang
command na ito ay gagawa ng folder na tinatawag na library-list
sa root
directory. Magkakaroon ng apat na files sa loob ng folder, subalit tatlo lang
ang dapat nating alalahanin dito: library-list.component.css, library-list.component.html, at library-list.component.ts.
Susubukan nating kunin ang listahan ng
libraries na may kaugnayan sa search term na nasa URL sa sandaling mag-load ang
component. Ibig sabihin nito kailagan din nating i-import ang OnInit
kasama ng Component
mula sa @angular/core
.
Sa pag import ng ActivatedRoute
ay
magagawa natin ang lahat ng impormasyon ng route na may kaugnayan sa kasalukuyang
loaded component. Sa paraang ito, mabilis nating
mai-extract ang search term mula sa kasalukuyang path. Pagkatapos ng pag-import
ng iba’t ibang dependencies mula sa Angular, magpatuloy tayo at i-import ang
ating LibraryService
class.
Kagaya ng dati, tinatago ng component
decorator ang value ng selector, template URL, at stylesheet paths para sa
LibraryListComponent
.
Sa loob ng ngOnInit()
method, tatawagin
natin ang getLibrary()method
. Ang getLibrary()
method ay higit na ginagamit ang
searchLibraries()
method mula sa LibraryService
para kunin lahat ng resulta. Ang mga resulta ay tinatago sa loob ng
libraries
array na nakapahayag sa itaas ng ating class definition.
import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { LibraryService } from '../library.service'; @Component({ selector: 'app-library-list', templateUrl: './library-list.component.html', styleUrls: ['./library-list.component.css'] }) export class LibraryListComponent implements OnInit { libraries = []; constructor( private route: ActivatedRoute, private libraryService: LibraryService ) { } ngOnInit() { this.getLibrary(); } getLibrary(): void { const library: string = this.route.snapshot.paramMap.get('search'); this.libraryService.searchLibraries(library) .then((data: any) => { data.results.forEach(function (result) { this.libraries.push({ 'name': result.name, 'version': result.version, 'description': result.description }); }, this); }); } }
Panghuling Pahayag
Sa pagtuturong ito, matagumpay nating
nagawa ang HomeComponent
ng ating library finder app.Dito ay mahahanap ng users
ang iba’t ibang libraries sa CDNJS database. Ang HomeComponent
ay hindi masyadong mahalaga
nang mag-isa lang. Kung kaya gagawa tayo ng dalawa pang components na tinatawag
na LibraryListComponent
at LibraryDetailsComponent
.
Nabago na natin ang TypeScript file para
sa ating LibraryListComponent
. Babaguhin natin ang HTML template at CSS
files sa susunod na pagtuturo. Kapag may ano mang tanong kayo na may kinalaman
sa pagtuturong ito, ipagbigay-alam 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