Angular 8 - การ Build เพื่อนำไปใช้งาน

ข้อมูลเพิ่มเติมอ่านได้จาก https://angular.io/start/deployment

การใช้งาน Angular เราต้องทำการ Build Project ของเราก่อนด้วยคำสั่ง ng build เสร็จแล้วจะได้ไฟล์พร้อมใช้งานอยู่ที่ Folder dist
ให้เราทำการ Copy ไฟล์ข้างในที่อยู่ในระดับเดียวกัน index.html ลงไป ไปว่างไว้ที่ Root Web ก็สามารถใช้งานได้

?

cmd

1 2	ng build --prod ng build --prod --base-href=/project-name/

Angular 8 - การสร้าง Form สำหรับรับข้อมูล

การสร้าง Form เราจะต้องทำการ Import Module ชื่อ ReactiveFormsModule ในไฟล์ app.module.ts ก่อนถึงจะเรียกใช้งานใน Component อื่นๆ ได้

?

src/app/app.module.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpClientModule } from '@angular/common/http'; import { ReactiveFormsModule } from '@angular/forms';   import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component';   import { RouterModule } from '@angular/router';   import { TopBarComponent } from './top-bar/top-bar.component'; import { ProductListComponent } from './product-list/product-list.component'; import { ProductAlertsComponent } from './product-alerts/product-alerts.component'; import { ProductDetailComponent } from './product-detail/product-detail.component'; import { CartComponent } from './cart/cart.component';   @NgModule({   declarations: [     AppComponent,     TopBarComponent,     ProductListComponent,     ProductAlertsComponent,     ProductDetailComponent,     CartComponent   ],   imports: [     BrowserModule,     HttpClientModule,     AppRoutingModule,     ReactiveFormsModule,     RouterModule.forRoot([       { path: '', component: ProductListComponent },       { path: 'product/:productId', component: ProductDetailComponent },       { path: 'cart', component: CartComponent}     ]),   ],   providers: [],   bootstrap: [AppComponent] })   export class AppModule { }

Angular 8 - เรียกข้อมูลแบบ JSON ผ่าน HTTPClient

เตรียมข้อมูล JSON ชื่อ shipping.json ใน Folder assets แล้วทดสอบเรียกผ่าน URL : "http://localhost:4200/assets/shipping.json"

?

src/assets/shipping.json

1 2 3 4 5 6 7 8 9 10 11 12

[     {         "type": "Overnight",         "price": "25.99"     },{         "type": "2-Day",         "price": "9.99"     },{         "type": "Postal",         "price": "2.99"     } ]

Angular 8 - บริการเก็บข้อมูลด้วย Service

การสร้าง Service ที่ใช้ในการจัดการข้อมูลต่าง ๆ ใน App ของเราใช้ Tutorial Guide จาก https://angular.io/start/data
ใน App ของเรานั้นจำเป็นต้องมี Service เอาไว้ใช้งาน เราสามารถใช้ในการจัดการข้อมูล และดึงข้อมูลจากแหล่งข้อมูลอื่น ๆ ผ่านทาง Service ได้ สำคัญมาก

สร้าง Service ชื่อ CartService ไว้เก็บข้อมูลการสั่งซื้อมือถือ ให้ใช้คำสั่ง "ng generate service cart" เสร็จแล้วเราจะได้ไฟล์มา 2 ไฟล์
1. "src/app/cart.service.spec.ts" และ 2. "src/app/cart.service.ts" เราจะเข้ามาแก้ไฟล์ที่ 2. นี่กัน

?

src/app/cart.service.ts

1 2 3 4 5 6 7 8 9 10

import { Injectable } from '@angular/core';   @Injectable({   providedIn: 'root' })   export class CartService {     constructor() { } }

ให้เราเพิ่ม Function 3 ตัวคือ addItem() ใช้เพิ่ม Item ลงตะกร้า , getItems() เรียกดูค่า Item ในตะกร้า และ clearItems() ลบ Item ออกจากตะกร้าทั้งหมด

?

src/app/cart.service.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

import { Injectable } from '@angular/core';   @Injectable({   providedIn: 'root' })   export class CartService {     items = [];     addItem(product) {     this.items.push(product);   }     getItems() {     return this.items;   }     clearItems() {     this.items = [];   }     constructor() { }   }

Angular 8 - แบ่ง Component เป็นหน้า ๆ กับ Router Module

ความเดิมจากตอนที่แล้วเราได้ทำการ Follow Guide หัวข้อ Your First App เสร็จแล้ว https://angular.io/start
ให้หัวข้อต่อมาเรื่องของ Routing https://angular.io/start/routing จะเริ่มสร้างหน้าย่อ ๆ กัน

ใช้ Code ต่อจากตอนที่แล้วเราจะทำการเพิ่ม RouterModule อย่างเดียวแล้วทำความเข้าใจกันก่อนว่ามันเป็นส่วนไหน
ให้เราทำการ Import Module ชื่อ "RouterModule" และทำการ Import และใส่ข้อมูล Path ด้วยใน "RouterModule.forRoot([])"
ส่วนของ path ใช่เป็น ' ' หมายถึง Root และแสดง Component ProductListComponent

?

src/app/app.modult.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';   import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component';   import { RouterModule } from '@angular/router';   import { TopBarComponent } from './top-bar/top-bar.component'; import { ProductListComponent } from './product-list/product-list.component'; import { ProductAlertsComponent } from './product-alerts/product-alerts.component';     @NgModule({   declarations: [     AppComponent,     TopBarComponent,     ProductListComponent,     ProductAlertsComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     RouterModule.forRoot([       { path: '', component: ProductListComponent }     ]),   ],   providers: [],   bootstrap: [AppComponent] })   export class AppModule { }

?

src/app/app.component.html

1 2 3 4

<app-top-bar></app-top-bar> <app-product-list></app-product-list>   <router-outlet></router-outlet>

Angular 8 - สร้าง Component ใน Component ไปอีก

สร้างปุ่ม Notify Me เป็นแล้วเรียกใช้ใน Product List โดยจะสร้างเป็น Component และมีการรับค่าด้วย

เริ่มด้วยการสร้าง Component ชื่อ product-alerts อย่าลืมใช้คำสั่ง ng generate component product-alerts
แล้วเพิ่มปุ่ม Notify Me ใน Template

?

src/app/product-alerts/product-alerts.component.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

import { Component, OnInit } from '@angular/core';   @Component({   selector: 'app-product-alerts',   templateUrl: './product-alerts.component.html',   styleUrls: ['./product-alerts.component.css'] }) export class ProductAlertsComponent implements OnInit {     constructor() { }     ngOnInit() {   }   }

?

src/app/product-alerts/product-alerts.component.html

1 2 3

<p>     <button>Notify Me</button> </p>

Angular 8 - สร้าง Event กับ Component และ เงื่อนไขในการแสดงผล

หัวข้อที่แล้วเราได้รู้จักกับ *ngFor, Interpolation {{ }} และ Property Binding [ ] ไปแล้ว
ในส่วนที่เราจะมาทำความรู้จักกับอีก 2 ตัวคือ *ngIf และ Event Binding ( ) กัน

พาทนี้ยังอยู่กับ https://angular.io/start ครับ โดยจากภาพแล้วเราจะทำการแสดง Description ออกมา
ส่วน Product ไหนไม่มี Description เราก็จะไม่แสดง

Angular 8 - ข้อมูล Static กับ Component และ การแสดงผล

การเก็บข้อมูล Static เป็น Hard Code และการเอาออกมาแสดงที่ Component
เรายังทำตาม Tutorial Your First App ส่วนนี้จะเป็นเกี่ยวกับข้อมูลที่เก็บไว้ใน App ของเราโดยเป็นแบบ Static
เว็บหน้า Your First App https://angular.io/start

ในไฟล์ Component เวลาที่เราประกาศตัวแปรในการเก็บข้อมูลเราสามารถตั้งชื่อขึ้นมาได้เลยในไฟล์ "product-list.component.ts"

โดยสร้างตัวแปร "title" เก็บคำว่า "Product List" ก็เพิ่มลงไปใน Code เป็น title='Product List'; ตามตัวอย่าง
เมื่อต้องการเรียกออกมาแสดงโดยเรียกใน Template ให้ใช้ {{ }} ในการเรียก เป็น {{title}} ก็จะดึงค่ามาแสดง

?

src/app/product-list/product-list.component.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import { Component, OnInit } from '@angular/core';   @Component({   selector: 'app-product-list',   templateUrl: './product-list.component.html',   styleUrls: ['./product-list.component.css'] })   export class ProductListComponent implements OnInit {     title = 'Product List';     constructor() { }     ngOnInit() {   }   }

?

src/app/product-list/product-list.component.html

1	<h1>{{title}}</h1>

Angular 8 - Tutorial Your First App กับการสร้าง Component

ตัวอย่าง App แรกของ Tutorial อ่านได้จาก https://angular.io/start
เราจะเริ่มสร้าง Component โดยใช้ Tutorial Your First App เป็น Guide

โดยขั้นแรกเราจะทำ Title แล้วก็ปุ่ม Cart พร้อมกับ Product 1 บรรทัดตามรูป

เริ่มโดยใช้คำสั่ง ng generate component [component-name]

?

cmd

1 2	ng generate component top-bar ng generate component product-list

Angular 8 - ติดตั้ง Node.js และ Angular กับพื้นฐานโครงสร้าง

การใช้ Angular 8 ต้องติดตั้ง Node.js Version 10 อ้างอิงตาม https://angular.io/guide/setup-local
ติดตั้ง Node.js ไปโหลดตามนี่เลย https://nodejs.org/en/

หลังจากติดตั้ง Node.js เรียบร้อยแล้วให้ทำการติดตั้ง Angular

?

cmd

1 2 3 4 5 6

# npm install -g   # In global mode (ie, with -g or --global appended to the command), # it installs the current package context (ie, the current working directory) as a global package.   npm install -g @angular/cli

เมื่อทำการติดตั้งเรียบร้อยแล้วเราจะสามารถใช้คำสั่ง ng ในการสร้าง Project Angular ได้
คำสั่ง ng new สำหรับสร้าง Project และ ng serv เพื่อใช้รัน Angular

?

cmd

1 2 3 4 5 6

# new (n) Creates a new workspace and an initial Angular app. ng new my-app   # serve (s) Builds and serves your app, rebuilding on file changes. cd my-app ng serve --open

เมื่อ Run Server เสร็จแล้วเปิด Browser ไปที่ http://localhost:4200 จะเจอหน้า Welcome แนะนำการเขียนเบื้องต้น