Gumawa ng Library Finder App sa Angular: HomeComponent at LibraryListComponent

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.

• 
  Angular
  Paggawa Ng Iyong Unang Angular App: Mga Pangunahing Kaalaman
  Monty Shokeen

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.