Open in app

Sign in

Write

Sign in

วันแรกสรุปเนื้อหาไปเรียน Anular for B+ at Geeky Base

Phatcharaphan Ananpreechakun
odds.team
Published in
9 min readJul 14, 2018

--

วันนี้ว่างก็เลยได้มีโอกาสไปเรียน Angular6 ที่ Geeky Base คนสอนจะเป็น พี่อูกับพี่ตั้ม จะบอกว่ามุขกระจายเต็มห้องเรียน คนไปเรียนเยอะม๊าก แทบไม่มีที่นั่ง คอร์สนี้ก็จะเรียน 2 วัน สอนสด สอนสนุก ใครสนใจอยากเรียนคอร์สอื่นๆก็สามารถเข้าไปดูใน Geeky Base ได้น๊าา มีสอนแทบทุกอาทิตย์

เนื้อหาที่สอนวันแรกมีดังนี้ (อาจะมีมากกว่านี้ แต่เท่าที่จำได้มีเท่านี้น๊าา)

  • สร้าง Component, Service, Class, Pipe
  • Router, Http, Binding data

มาเริ่มตามเนื้อหาที่สอนกันเถอะ

  1. มาเริ่มจาก API กันก่อนน๊า จะได้มีไว้เชื่อมต่อตอนที่เราเขียน Angular
  2. ทางคนสอนจะเตรียม API มาให้เราได้เรียนกันแล้ว เข้าไป clone ได้ที่ https://github.com/chonla/node-express-member
  3. ใช้ Git หรือ ว่า Download มาก็ได้น๊าาา เมื่อเรา Clone โปรเจคด้วยคำสั่ง
git clone git@github.com:chonla/node-express-member.git

3. เมื่อเรา Clone Project เสร็จแล้วก็ทำตาม Run กันเลย ก่อนอื่นเราต้อง Run Docker ขึ้นมาก่อนน๊าา เพราะว่า Project ที่เรา Clone มานั้นเป็น Docker เมื่อเรา Start Docker แล้วก็พิมพ์คำสั่ง

docker-compose up --build -d

4. เมื่อสำเร็จแล้วก็พิมพ์คำสั่งเพื่อที่จะ Start API (ถ้าใครไม่มี yarn ก็ install กันก่อนน๊า ดูคำสั่ง Install ได้ที่นี่)

yarn run mon
  • ลองนำ Path http://localhost:3000/bnk/members ไปไว้ที่ browser เพื่อที่จะดูข้อมูล เมื่อเราได้ข้อมูลดังในภาพแสดงว่าเรา Start API ได้แล้ว

5. เมื่อ run api ได้แล้วเราก็สามารถมี api มาเรียกใช้กันได้ล่ะ path ในการต่อกับ api สามารถเข้าไปดูใน Project node-express-member กันได้ ไปดูที่ file routes.js จะมี api อะไรบ้างที่เราสามารถใช้ได้

6. ก่อนอื่นมาตรวจสอบกันก่อนว่า Angular CLI ของเรา Version อะไรกัน จะได้เขียน Angular6 ได ซึ่ง Angular6 จะเป็น TypeScript สามารถเรียนรู้เพิ่มเติมได้ที่นี่ ปัจจุบันที่เขียนจะเป็น TypeScript 2.9

  • Angular CLI ที่จะใช้ต้องเป็น Angular CLI: 6 น๊าา
  • ตรวจสอบว่า Angular CLI ของเรา Version อะไรพิมพ์คำสั่ง
ng -v

7. เมื่อเรามี Angular CLI แล้วก็สร้าง Project กันเลยโดยพิมพ์คำสั่ง (จะบอกว่าคนสอนเหมือนจะเป็นติ่ง BNK48 วันนี้ก็เลยได้เรียนเกี่ยวกับการดึงข้อมูลของ BNK48 มาแสดงเพื่อเป็นสิ่งบันเทิงในการเรียนครั้งนี้) (สร้างชื่ออะไรก็ได้น๊าาค่ะ)

ng new learnAngularV6

8. เมื่อเราสร้าง Project เสร็จแล้วก็ลอง Run Project ด้วยคำสั่ง

ng serve
  • Port Default ที่จะรัน Project จะเป็น 4200
  • ถ้า run project แล้ว port ชนหรือไม่อยากใช้ port นี้ก็สามารถที่จะพิมพ์ด้วยคำสั่ง (จะสามารถระบุ port ที่เราต้องการได้เช่น 3500)
ng serve --port=3500

9. เมื่อเราสร้าง Project เสร็จแล้วเราก็มาสร้าง Component สำหรับแสดงข้อมูลด้วยคำสั่ง

ng generate component components/dashboard

หรือเราสามารถเขียนคำสั่งย่อได้ด้วยคำสั่ง

ng g c components/dashboard

10. เมื่อเราสร้าง Components dashboard เสร็จแล้วเราก็นำ selector ของ dashboard component ซึ่ง selector สามารถเข้าไปดูได้ที่ File dashboard.component.ts จะมี ตัวแปร selector อยู่ในนั้นแล้วเราค่อยนำ Value ไปใส่ในไฟล์ app.component.html (ก่อนอื่นก็อย่าลืมลบ Code ที่อยู่ใน file ก่อน)

<app-dashboard></app-dashboard>

11. ต่อมาสร้าง Component ชื่อว่า bnk-girl-list ด้วยคำสั่ง

ng g c components/bnk-girl-list
  • เมื่อเราสร้าง Components bnk-girl-list เสร็จแล้วเราก็นำ selector ของ bnk-girl-list component ซึ่ง selector สามารถเข้าไปดูได้ที่ File bnk-girl-list.component.ts จะมี ตัวแปร selector อยู่ในนั้นแล้วเราค่อยนำ Value ไปใส่ในไฟล์ dashboard.component.html (ก่อนอื่นก็อย่าลืมลบ Code ที่อยู่ใน file ก่อน)

12. ต่อมาสร้าง Component ชื่อว่า bnk-girl ด้วยคำสั่ง

ng g c components/bnk-girl

13. ในการใช้คำสั่ง Angular CLI ในสร้าง Component นั้น Angular CLI จะ inject Component ให้เราใน app.module.ts ให้เราอัตโนมัติ ใน declarations ซึ่งถ้าเราสร้างเองก็ต้องเอาไป component ของเราไปใส่ไว้ใน declarations เอง

14. เมื่อเราสร้าง Component แล้วก็มาลอง Mock ข้อมูลเพื่อที่จะแสดงโดยไปที่ไฟล์ bnk-girl-list.component.ts และพิมพ์

members: Member[] = 
[{"_id": "5b496abd4c45fea209d1ead1","name": "Cherprang","imgUrl": "https://i.ytimg.com/vi/6crAs7KLWl8/maxresdefault.jpg","instagramId": "cherprang.bnk48official"},{"_id": "5b496abd4c45fea209d1ead2","name": "Orn","imgUrl": "https://media-spiceee.net/uploads/content/image/1643617/large_3ec1f891-1a5c-4905-b298-4cb27667320c.jpg","instagramId": "orn.bnk48official"},{"_id": "5b496abd4c45fea209d1ead3","name": "Music","imgUrl": "https://i.pinimg.com/736x/3a/3d/56/3a3d569c3186f168e30256b46095e8de.jpg","instagramId": "music.bnk48official"},{"_id": "5b496abd4c45fea209d1ead4","name": "Pun","imgUrl": "https://i.pinimg.com/736x/cf/ed/05/cfed05907f9acbb70300dcb38b3eb1e2.jpg","instagramId": "pun.bnk48official"},{"_id": "5b496abd4c45fea209d1ead5","name": "Mobile","imgUrl": "https://lifestyle.campus-star.com/app/uploads/2018/01/Mobile-BNK48-4.jpg","instagramId": "mobile.bnk48official"},{"_id": "5b496abd4c45fea209d1ead6","name": "Jennis","imgUrl": "https://themomentum.co/wp-content/uploads/2018/01/TheMomentum-Jennis-Cover-1.png","instagramId": "jennis.bnk48official"},{"_id": "5b496abd4c45fea209d1ead7","name": "Mewnich","imgUrl": "https://thailandsuperstar.com/images/pix/7612703972/F_1779520031933369418.jpg","instagramId": "mewnich.bnk48official"},{"_id": "5b496aee4c45fea209d1eae4","name": "Cherprang","imgUrl": "https://i.ytimg.com/vi/6crAs7KLWl8/maxresdefault.jpg","instagramId": "cherprang.bnk48official"},{"_id": "5b496aee4c45fea209d1eae5","name": "Orn","imgUrl": "https://media-spiceee.net/uploads/content/image/1643617/large_3ec1f891-1a5c-4905-b298-4cb27667320c.jpg","instagramId": "orn.bnk48official"},{"_id": "5b496aee4c45fea209d1eae6","name": "Music","imgUrl": "https://i.pinimg.com/736x/3a/3d/56/3a3d569c3186f168e30256b46095e8de.jpg","instagramId": "music.bnk48official"},{"_id": "5b496aee4c45fea209d1eae7","name": "Pun","imgUrl": "https://i.pinimg.com/736x/cf/ed/05/cfed05907f9acbb70300dcb38b3eb1e2.jpg","instagramId": "pun.bnk48official"},{"_id": "5b496aee4c45fea209d1eae8","name": "Mobile","imgUrl": "https://lifestyle.campus-star.com/app/uploads/2018/01/Mobile-BNK48-4.jpg","instagramId": "mobile.bnk48official"},{"_id": "5b496aee4c45fea209d1eae9","name": "Jennis","imgUrl": "https://themomentum.co/wp-content/uploads/2018/01/TheMomentum-Jennis-Cover-1.png","instagramId": "jennis.bnk48official"},{"_id": "5b496aee4c45fea209d1eaea","name": "Mewnich","imgUrl": "https://thailandsuperstar.com/images/pix/7612703972/F_1779520031933369418.jpg","instagramId": "mewnich.bnk48official"}];
  • จะเห็นว่าเราสร้างตัวแปรชื่อ members และมี type เป็น Member ซึ่งเป็น Array และ Type ที่เราประกาศชื่อ Member ยังไม่มี งั้นมาสร้างกันด้วยคำสั่ง
ng g class models/member
  • เมื่อเราสร้าง Class ที่ชื่อว่า member เสร็จแล้วต่อมาก็สร้างตัวแปรให้เหมือนกับข้อมูลที่เรา Mock ไว้เพราะว่าถ้าชื่อไม่ตรงกันกับตัวแปรที่เราสร้าง ข้อมูลก็จะไม่ถูกใส่ไว้ในตัวแปรนั้น ไปที่ไฟล์ member.ts
export class Member {
    _id: string;
    name: string;
    imgUrl: string;
    instagramId: string;
}
  • เมื่อเรามี Type ที่เป็น Member แล้วก็อย่าลืมไป Import เพราะว่า type member ยังไม่รู้จัก ในไฟล์ bnk-girl-list.component.ts พิมพ์คำสั่งนี้
import { Member } from 'src/app/models/member';
  • เรามีข้อมูลแล้ว ต่อมาก็นำข้อมูลนั้นมาแสดงไปที่ไฟล์ bnk-girl-list.component.html
<div *ngFor="let member of members">
     {{ member.name }}
</div>
  • เมื่อเราไปดูที่ browser ที่เรารัน Project ไว้เราก็จะเห็นว่ามี ข้อมูลแสดง
  • ต่อมาเราจะนำข้อมูลของ member แต่ละคนแสดงใน component bnk-girl ให้ไปแก้ไขที่ไฟล์ bnk-girl-list.component.html จะเห็นว่า เรานำข้อมูลของ member ไปใส่ใน component bnk-girl
<div *ngFor="let member of members" class="col-3">
     <app-bnk-girl [member]="member"></app-bnk-girl>
</div>
  • เมื่อเราส่งข้อมูล member มาให้ component bnk-girl ทาง component bnk-girl จะต้องสร้าง Input ชื่อ member เพื่อนำข้อมูลมาแสดงใน component นี้ด้วยคำสั่ง อย่าลืม import type และ Input ไปที่ไฟล์ bnk-girl.component.ts
  • import { Member } from ‘src/app/models/member’;
  • import { Input } from ‘@angular/core’;
@Input() member: Member;
  • เราได้ข้อมูลแล้วก็แสดงข้อมูลใน HTML ไปที่ไฟล์ bnk-girl.component.html (อย่าลืมลบ Code อันเก่าที่ Angular CLI สร้างไว้ก่อนนะ)
<h4>{{member.name}}</h4>
<img [src]="member.imgUrl" >
  • ลองเข้าไปดู Browser ที่เรารัน Project ไว้จะเห็นว่ามีข้อมูลแสดง
  • จะเห็นว่าความสวยงามไม่มีเลยในเว็บที่เราเขียน ซึ่งเราสามารถสร้าง Css เองได้เพื่อให้สวยงาม และทางพี่ๆที่สอนจะใช้ Bootstrap เข้ามาใช้เพื่อให้ดูสวยขึ้นเข้าไปพิมพ์คำสั่ง (เพื่อที่จะนำ Bootstrap เข้ามาใช้งานใน Project ของเรา)
npm i bootstrap
  • จากนั้นไปที่ไฟล์ angular.json ให้เพิ่ม Bootstrap เข้าไปที่ styles
"node_modules/bootstrap/dist/css/bootstrap.min.css"
  • ต่อไปเราก็จะใช้ Bootstrap ได้ล่ะใน Project ให้เราเข้าไปแก้ไขที่ไฟล์ bnk-girl-list.component.html
<div class="container">
  <div class="row">
      <div *ngFor="let member of members" class="col-3">
          <app-bnk-girl [member]="member"></app-bnk-girl>
      </div>
  </div>
</div>
  • ต่อไปแก้ไขที่ไฟล์ bnk-girl.component.html
<div class="card"><img class="card-img-top" [src]="member.imgUrl" ><div class="card-body"><h4 class="card-title">{{member.name}}</h4></div></div>
  • ต่อไปเพิ่ม Style ที่ไฟล์ bnk-girl.component.css
.card{margin-bottom: 5rem;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);cursor: pointer;}.card .card-img-top{height: 20rem;overflow: hidden;}.card .card-img-top img{width: 100%;height: 20rem;object-fit: cover}
  • เมื่อเราเข้าดูที่ Browser ที่ run project ก็จะเห็นว่าสวยขึ้นมากกว่าอันเก่าเลยยย

15. จะเห็นว่าข้อมูลที่นำมาแสดงนั้นเป็นข้อมูลที่เรา Mock เอาไว้ ต่อมาเราจะไปเรียกข้อมูลจาก API ที่เรา Start ทิ้งไว้ ก่อนอื่นเราต้อง import HttpClientModule ไว้ที่ ไฟล์ app.module.ts ไม่อย่างนั้นเราจะไม่สามารถใช้ HttpClient ได้

import { HttpClientModule } from ‘@angular/common/http’;

16. เมื่อเรามี HttpClient ใช้แล้ว ก็มาที่ไฟล์ bnk-girl-list.component.ts ต่อมาเราก็ inject HttpClient ใน constructor ด้วยคำสั่ง

private bnkService: BnkService

และ import

import { HttpClient } from ‘@angular/common/http’;

17. เราอยากได้ว่า เมื่อมีการเรียก component bnk-girl-list นี้จะต้องเรียกข้อมูล ไปที่ Method ngOnInit เพื่อเรียกข้อมูลมาแสดงแสดงพิมพ์คำสั่ง (อย่าลืมลบ Code ที่เรา Mock ไว้ด้วยน๊าา) ไปที่ไฟล์ bnk-girl-list.component.ts

  • จะเห็นว่าตอนที่เราใช้ HTTP หลังจากที่ API Response กลับมานั้นจะเป็น Observable ซึ่งมี Method subscribe เป็นตัวรอรับข้อมูล และส่งค่าออกมาผ่าน callback function ที่อาจจะเกิดขึ้น ซึ่ง Observer คอยทำหน้าที่สังเกตข้อมูล Observable ก็คือ Object หนึ่ง โดย Observer มี 3 callback ประกอบด้วย next, error และ complete ซึ่งจะส่งข้อมูลออกมาที่เป็น next เท่านั้น ส่วน error จะส่งแจ้ง error ออกมา และ complete จะไม่มีการส่งค่าใดๆ ออกมา ในที่นี่เราจะ ซึ่ง next callback
  • โดยส่วนใหญ่จะใช้ใน next callback ที่มีการส่งข้อมูล Observable ออกมา และดักข้อมูลที่ผิดพลาดใน error callback
this.http.get<Member[]>("http://localhost:3000/bnk/members").subscribe((response: Member[])=>{this.members = response;});
  • จะเห็นว่า url ที่เห็นของ api เรา hadcode ไว้ในนี้ ไม่ดีแน่ถ้าเรามีการเรียกใช้หลายๆตัว และเมื่อมีการ build project ก็จะลำบาก angular ตัวไฟล์ environment ให้เรา config ข้อมูลต่างๆแต่ละ environment ซึ่งตอนนี้ก็จะเป็น api url ถ้ารันบน Production ก็จะเป็นอีก url ให้เราไปที่ไฟล์ environment.prod.ts แต่ถ้าบน develop ที่เรากำลังพัฒนาระบบอยู่ก็ไปที่ไฟล์ environment.ts เพื่อ config และพิมพ์คำสั่ง
api_url: 'http://localhost:3000'
  • เข้าไปแก้ไข api url ที่ไฟล์ bnk-girl-list.component.ts
this.http.get<Member[]>(`${environment.api_url}/bnk/members`).subscribe((response: Member[])=>{this.members = response;});

อย่าลืม import

import { environment } from ‘src/environments/environment’;

18. จะเห็นว่า component รับภาระในการดึงข้อมูลจาก http ซึ่งไม่ได้เป็นหน้าที่ของ component เลย เราไม่ควรที่จะให้ component ดึงข้อมูล เราควรจะให้ component รับข้อมูลและไปแสดงผล ซึ่ง ภาระดึงข้อมูลจาก http เราควรให้ service เป็นตัวจัดการ

  • ต่อมาให้เราสร้าง service สำหรับดึงข้อมูลจาก http ด้วยคำสั่ง (Angular version 6 ดีงามมาก ต่อไปเราจะไม่ต้องที่จะ add service เข้าไปใน provider ของ component แล้ว ซึ่ง version ก่อนหน้านี้ เมื่อเราจะใช้ service อะไร เราจะต้อง add เข้าไปใน provider ของ component นั้นด้วย หรือไม่ก็ add ที่ module หลักที่เราจะใช้ component นั้น)
ng g s service/bnk
  • ให้เราย้าย code ในส่วนของการดึงข้อมูลจาก HTTP จากไฟล์ bnk-girl-list.component.ts มาใส่ในไฟล์ bnk.service.ts
  • จะเห็นว่าเราสร้าง Method list ซึ่ง return เป็น Observable
  • Observables ไม่ได้เป็น feature ของ Angular แต่เป็นส่วนหนึ่งของ RxJS library ซึ่งจะคล้ายๆกับ Promises ใน Angular ก่อนหน้า version 2 จะใช้ Promises จะมีข้อแตกต่างที่สำคัญคือ
  • Observables สามารถจัดการกับข้อมูลหลายๆตัวที่ถูก stream เข้ามาได้ ในขณะที่ promises จะถูกเรียกแค่เพียงครั้งเดียวและ return ข้อมูลกลับมาแค่ตัวเดียว
  • Observables สามารถถูกยกเลิกได้ แต่ promises ไม่สามารถ
  • Observables นั้นเหมาะกับการทำงานกับข้อมูลที่เป็นแบบ real time, events และ streams ต่างๆ
  • Ref : https://xgrommx.github.io/rx-book/why_rx.html
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Member } from 'src/app/models/member';
import { environment } from '../../environments/environment';@Injectable({
  providedIn: 'root'
})
export class BnkService {constructor(private http: HttpClient) { }list():Observable<Member[]> {
    return this.http.get<Member[]>(`${environment.api_url}/bnk/members`);
  }
}
  • ซึ่งปัจจุบันในไฟล์ bnk-girl-list.component.ts จะเหลือ code ดังนี้
import { Component, OnInit } from '@angular/core';
import { Member } from 'src/app/models/member';
import { BnkService } from 'src/app/services/bnk.service';@Component({
  selector: 'app-bnk-girl-list',
  templateUrl: './bnk-girl-list.component.html',
  styleUrls: ['./bnk-girl-list.component.css']
})
export class BnkGirlListComponent implements OnInit {
  members: Member[];
  constructor(private bnkService: BnkService) { }ngOnInit() {
    this.getMembers();
  }getMembers() {
    this.bnkService.list().subscribe((response: Member[])=>{
      this.members = response;
    });
  }}

19. ต่อมาเราจะใช้ Route เพื่อให้สามารถไปยังอีกหน้าได้ ซึ่งเราจะต้องนำ import RouterModule ในไฟล์ app.module.ts และ config path

  • config path ดังนี้
  • path ที่ใส่เป็นค่าว่าง ก็คือ ถ้ามีการเข้ามายัง path ที่ไม่มี path อะไรเลยก็จะให้ redirect ไปยัง dashboard
  • path ที่เป็น dashboard จะไปเรียกใช้ component DashboardComponent มาแสดงข้อมูล
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { AppComponent } from './app.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { BnkGirlListComponent } from './components/bnk-girl-list/bnk-girl-list.component';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/dashboard'},
  { path: 'dashboard', component: DashboardComponent },
];@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    BnkGirlListComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(routes)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • ต่อมาให้ไปที่ไฟล์ app.component.html และลบ Code อันเก่าทิ้ง
  • router-outlet เป็นตัวช่วยให้ Angular Router ทำงาน เมื่อเวลา Routing ตรงกับ path ที่เรากำหนด ตัว Component ก็จะ replace ข้อมูลแทนแท็กนี้
<router-outlet></router-outlet>
  • เมื่อเราเขียน Code เสร็จแล้วก็ลองเข้าไปยัง Browser ที่เรา Run Project จะเห็นว่า เมื่อเราเข้าไปยังหน้า http://localhost:4200/ ตัว Router ที่เรากำหนดไว้ก็จะไปยัง http://localhost:4200/dashboard
  • ต่อมาจะมีการ Click ที่รูปและจะแสดงรูปที่เป็น instagram ของ user คนนั้นออกมา
  • มาสร้าง component ที่ชื่อว่า
ng g c components/instagram
  • เมื่อเราสร้าง component เสร็จแล้ว เราก็จะไปสร้าง Router สำหรับการคลิกที่รูปแต่ละรูปจะส่ง id ของรูปนั้นไปด้วย
{ path: 'instagram/:instagramId', component: InstagramComponent}
  • ไปที่ไฟล์ instagram.component.ts จะดึง Id จาก Url ด้วย ActivatedRoute ให้เรา inject ActivatedRoute ที่ constructor ด้วยคำสั่ง
private route: ActivatedRoute

อย่าลืม import

import { ActivatedRoute } from ‘@angular/router’;

ลองพิมพ์คำสั่ง ที่ method ngOnInit และเปิด console ในbrowser ดูจะเห็นว่า มีข้อมูล ID ที่เราส่งมาเมื่อการ Click ข้อมูลนั้นๆ

this.route.snapshot.params.instagramId
  • ซึ่ง id ที่ส่งมานั้นเป็น instagramId ของ BNK48 เราก็เลยไปขอยืมเพื่อใช้ทดสอบในการนำข้อมูลมาแสดงโดยการไป Inspect ดู URL ดึงรูปจากเว็บ BNK48
  • ให้เรานำ url instagram ไป config ไว้ที่ environment
instagram_url: 'https://www.api.bnk48.com/api/social-feeds?page=1&max=1000000000000000&limit=19&'
  • เมื่อได้ URL มาแล้วก็มาเขียน Method สำหรับดึงข้อมูลจาก instagramId ที่ไฟล์ bnk.service.ts ดังนี้
instagram(id: string): Observable<Feed>{
    return this.http.get<Feed>(`${environment.instagram_url}${id}`);
}
  • ต่อมาสร้าง Class ของ Feed ด้วยคำสั่ง
ng g class models/Feed
  • ต่อมาสร้างตัวแปรตามที่ API response ออกมา ลองเข้าไปยัง Path และตามด้วย instagramId จะเห็นข้อมูลที่ Response ออกมา
  • หลังนั้นสร้างตัวแปรดังนี้
export class Feed {
    current_page: number;
    total_page: number;
    feeds: FeedItem[];
}export class FeedItem {
    changed: number;
    created: number;
    created_time: number;
    data: string;
    id: number;
    item_id: string;
    service: string;
    status: number;
    thumbnail: string;
    title: string;
    url: string;
    username: string;
}
  • อย่าลืมไป import model Feed ในไฟล์ bnk.service.ts
import { Feed } from 'src/app/models/feed';
  • หลังจากสร้าง service เสร็จแล้วก็เรียกใช้ที่ไฟล์ instagram.component.ts
import { Component, OnInit } from '@angular/core';import { ActivatedRoute } from '@angular/router';import { BnkService } from 'src/app/services/bnk.service';import { Feed, FeedItem } from 'src/app/models/feed';@Component({selector: 'app-instagram',templateUrl: './instagram.component.html',styleUrls: ['./instagram.component.css']})export class InstagramComponent implements OnInit {feeds: FeedItem[];constructor(private route: ActivatedRoute, private bnkService: BnkService) { }ngOnInit() {this.getInstagram(this.route.snapshot.params.instagramId);}getInstagram(id: string) {this.bnkService.instagram(id).subscribe((response: Feed) => {if(response.feeds){this.feeds = response.feeds.filter((i) => {return i.thumbnail.endsWith('.jpg');});}});}}
  • ต่อมาสร้าง component instagram-list และ instagram-item ด้วยคำสั่ง
ng g c components/instagram-listng g c components/instagram-item
  • ไปที่ไฟล์ instagram.component.html และลบ Code อันเก่าทิ้งนำ selector ของ instagram-list component และข้อมูลของ feeds ส่งเข้าไปใน component
<app-instagram-list [feedList]="feeds"></app-instagram-list>
  • ไปที่ไฟล์ instagram-list.component.ts ให้รับข้อมูล feeds เข้ามาแสดง
@Input() feedList: FeedItem[];
  • นำข้อมูล Feed ไป binding ใน html ที่ไฟล์ instagram-list.component.html และนำ selector ของ component instagram-item และส่งข้อมูล feedItem เข้าไป
<div class="container">
    <div class="row">
        <div *ngFor="let item of feedList" class="col-3">
            <app-instagram-item [feedItem]="item"></app-instagram-item>
        </div>
    </div>
</div>
  • ไปที่ไฟล์ instagram-item.component.ts รับข้อมูล feedItem
@Input() feedItem: FeedItem;
  • นำข้อมูล feedItem ไป Binding ใน html
<div class="card">
  <img class="card-img-top" [src]="feedItem.thumbnail" >
  <div class="card-body">
    <h4 class="card-title">{{feedItem.username}}</h4>
  </div>
</div>
  • เพิ่ม style ในไฟล์ instagram-item.component.css
.card{margin-bottom: 5rem;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);cursor: pointer;}.card .card-img-top{height: 20rem;overflow: hidden;}.card .card-img-top img{width: 100%;height: 20rem;object-fit: cover}
  • ลองเข้าไปยัง Browser ที่ Run Project

20. สร้าง Pipe เพื่อที่จะให้ ชื่อเป็นตัวอักษรใหญ่ ด้วยคำสั่ง

ng g pipe pipes/bnkSuffix
  • เมื่อสร้างไฟล์ pipe แล้วเข้าไปยังไฟล์ bnk-suffix.pipe.ts
transform(value: string): any {
    return value.toLocaleUpperCase() + '/BNK48';
  }
  • นำ pipe ไปใช้โดย เพื่อทำให้ username เป็นตัวอักษรไทย
  • และถ้าต้องการส่ง parameter เพื่อเข้าไปบอก pipe บอกว่า ถ้าส่ง lower ให้แสดงเป็นตัวอักษรเล็ก ถ้าไม่ส่งให้แสดงเป็นตัวอักษรใหญ่
  • เข้าไปแก้ไขไฟล์ bnk-suffix.pipe.ts

เย้ๆๆๆ จบแล้ววว การสรุปเนื้อหา บางทีก็คิดน่ะ ว่าเหมือนมันไม่ใช่สรุปเลยยย แต่ก็น่ะถ้าไม่ทำคนเขียนเดียวก็ลืมม เขียนไว้เตือนตัวเองล่ะกันน๊าาาา ผิดพลาดประการใด ขออภัยมา ณ ที่นี้ด้วยย เขียนโค้ตมันก็สนุกดีน๊าา

สามารถเข้าไปดู source code ได้ที่ https://github.com/phatpan/learnAngularV6

Angular 6
Angularcli
API
Docker
Programming

--

--

Phatcharaphan Ananpreechakun
odds.team

922 Followers
Editor for

I’m a Full Stack Developer

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams