Angular 6: Angular CLI

Getting start with Angular 6 with Angular CLI

รูปภาพจาก: https://vitalflux.com/upgrade-angular-5-app-angular-6/

Angular 6 พึ่งออกเปิดตัวได้ไม่นานเท่าไหร่ ถึงจะไม่ได้เปลี่ยนจากหน้ามือเป็นหลังมือเหมือนเวอร์ชันก่อนหน้านี้ แต่มีความสามารถหลายอย่างที่น่าสนใจ เช่น Schematic ที่ช่วยให้ลดการใช้ข้อมูลในขณะที่โหลดหน้าเพจได้ ได้ลองเขียน Angular 5 มาบ้างแล้ว และได้ลองอัพเกรดมาเป็น 5 แล้วเหมือนกัน ผลปรากฎว่า Angularfire2 ที่ใช้อยู่ยังติดปัญหา แถมเป็นปัญหาใหญ่ด้วย เลยละไว้ก่อน ตอน Angular CLI ก็มีปัญหากับโครงสร้างแบบเก่าด้วย เลยแก้ดึ้งๆ ด้วยการบังคับให้ Angular CLI ในโปรเจคนั้นเรียกเวอร์ชันเก่าของตัวเอง ส่วนด้านนอกก็ใช้เวอร์ชันใหม่ไปเลย

# package.json
{
    ...
    "scripts": {
        "ng": "./node_module/.bin/ng",
        ...

วันนี้เลยอยกลองของใหม่ด้วยการสร้างเว็บแอปพลิเคชันจาก Angular 6 ด้วย Angular CLI เลย ที่ตั้งใจไว้คงจะเป็นหน้าเพจคราวๆ ก่อน แล้วค่อยมาเติมส่วนประกอบกันทีหลังอีกที

อัพเกรด Angular CLI

1. ยังไม่มี NPM: ให้ติดตั้ง NodeJS ก่อน เพื่อใช้ NPM ดาวน์โหลดได้จาก https://nodejs.org/en/ ขอให้ใช้ NodeJS 8 ก่อนนะครับ
2. ยังไม่มี Angular CLI: ติดตั้งด้วยคำสั่ง npm install -g @angular/cli@latest
3. มีแล้วแต่ไม่แน่ใจว่าเวอร์ชันไหน ใช้คำสั่งในข้อ 2 ได้เลย

สร้างโปรเจคใหม่

อย่างแรกที่ต้องทำแน่นอนว่านั่นก็คือการสร้างโปรเจค ซึ่งสร้างผ่าน Angular CLI ก็ไม่ได้ยากอะไร ใช้คำสั่งด้านล่างได้เลยครับ

$ ng new ag6 && cd ag6

ซึ่ง ng นี้ก็คือ Angular CLI ที่ว่า พอโปรแกรมทำงานเสร็จ ให้ใช้คำสั่ง npm start หรือ ng serve อย่างใดอย่างหนึ่ง แล้วเข้าเว็บ http://localhost:4200 จะเจอหน้าเพจข้างล่างนี้ครับ

Welcome to Angular 6

ติดตั้ง Material มาในโปรเจค

เพื่อความง่ายที่จะได้ไม่ต้องออกแบบเองมาเท่าไหร่ เราจะใช้ Material ซึ่งเป็นไลบรารี่กึ่งสำเร็จรูป โดยติดตั้งด้วยคำสั่ง

$ ng add @angular/material

จากนั้นจะเพิ่ม Navigation Bar ด้านบน ซึ่งเพิ่มด้วยคำสั่งด้านล่าง (เป็น Schematics)

$ ng generate @angular/material:material-nav --name=navigator

Get Sitdhibong’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

เสร็จแล้วให้แก้ไฟล์ชื่อ src/app/app.component.html ด้วยโค้ดด้านล่าง

<navigator></navigator>

ลองรีเฟรชหน้าเพจอีกเดิมอีกครั้งจะเห็นหน้าเพจเปลี่ยนไปเป็นรูปด้านล่าง

Navigation bar

ซึ่ง Navigation bar ด้านบน หากกดปุ่มแฮมเบอร์เกอร์ (ขีด 3 ขีดก่อนคำว่า Application Title) แล้วจะยังมีปัญหาอยู่ จะกลับมาแก้ให้อีกครั้งครับ

จากนั้นให้เพิ่ม Dashboard เข้าไปอีกทีด้วยคำสั่ง

$ ng g @angular/material:material-dashboard --name=dashboard

จะมี Component ชื่อ dashboard เพิ่มขึ้นมา แก้ไฟล์ app.component.html อีกครั้งเป็นไฟล์ด้านล่าง

<navigator></navigator>
<dashboard></dashboard>

จะได้หน้าเพจ

Dashboard

กำหนดค่าเพิ่มเติม

สุดท้ายจะแก้ไขโค้ดเพื่อเพิ่มชื่อของ App ไว้บน Navigation bar ด้วยชื่อแอปที่เก็บค่าไว้ที่ไฟล์ app.component.ts (ตัวแปรชื่อ title ที่มีอยู่แล้ว) เริ่มที่แก้ไขไฟล์ app.component.html เป็นโค้ดด้านล่าง

<navigator [title]="title"></navigator>
<dashboard></dashboard>

title ใน [title] นั้นจะเป็นตัวแปรที่อยู่ใน navigator ส่วน "title" นั้นจะเป็นตัวแปรที่อยู่ใน app.component.ts ซึ่งตอนนี้ ให้แก้ไฟล์ navigator/navigator.component.ts อีกที เป็นโค้ดด้านล่าง (ตัวหนาคือส่วนที่เพิ่มเข้ามา)

import { Component, Input } from '@angular/core';
...
export class NavigatorComponent {
  @Input() title: string;
  ...
}

ส่วนที่เพิ่มเข้าไป จะบอกให้โค้ดรับค่าจาก attribute ชื่อ title เข้ามา

สุดท้ายให้แก้โค้ดในไฟล์ navigator/navigator.component.html บรรทัดที่ 26 (ให้ลบบรรทัดเดิมไปก่อน)

      <span>{{ title }}</span>
    </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>

เราก็จะได้หน้าเว็บที่มีชื่อตามที่เราต้องการ (ให้เปลี่ยนค่าในตัวแปรไฟล์ชื่อ title ในไฟล์ app.component.ts เป็นค่าที่ต้องการก่อน)