Getting started with Angular

Panusitt Khuenkham

Published in

Angular in Thailand

7 min readJun 7, 2017

Angular คืออะไร ? + สร้างโปรเจคด้วย Angular CLI แบบ Step-by-step

Angular v4.0 is out! Smaller, faster, no biggie…

Angular คือ Javascript Framework ตัวหนึ่งที่ช่วยให้สามารถสร้างเว็บที่มีการโต้ตอบกับผู้ใช้ได้ในรูปแบบของ Single-page application(SPA)

สถาปัตยกรรม(Architecture)

Angular 1 เป็น JavaScript Framework ที่นิยมมาก เมื่อสองสามปีที่ผ่านมา
โดยมีสถาปัตยกรรม Model View Controller(MVC)

Angular 2–4(ปัจจุบัน) สถาปัตยกรรมแบบ Component-based

ถ้าจะเปรียบเทียบให้คล้ายๆว่าเป็น MVC ก็คือ
Service = Model
Component template = View
Component class = Controller

** Angular 3 ถูกข้ามเนื่องจากเกิดความขัดแย้งของหมายเลขเวอร์ชั่น

ภาพรวม(Architecture)

จะประกอบด้วย

เครื่องมือที่แนะนำ IDE Free

หรือถ้าขี้เกียจหา plugin เสริมเพิ่มก็จัดตัว License ได้นะ

หัวข้อที่เราจะสอนคร่าวๆ ก็จะมีดังนี้

การสร้างโปรเจคด้วย Angular CLI
การใช้ Styling(CSS) ของ Bootstrap 3 Framework
การทำ Routing

ก่อนเริ่มโปรเจคต้องขอบ อก เฮ้ย@!? ขอบอก ก่อนนะว่า….

Angular 2 ถึงปัจจุบัน ใช้ TypeScript ในการพัฒนาหรือเขียนโปรแกรมนั่นแหละ

อ่าวเฮ้ยย ไม่รู้จักเลย มันคืออะไรเนี้ย

โอเคงั้นไม่เป็นไร เดี๋ยวจะแปะๆ ไว้ข้างล่างนี้ให้นะ แล้วค่อยกลับมาอ่าน

TypeScript (What is TypeScript ?) : TypeScript มันคืออะไร

ปะ ๆ ๆ ต่อออออ…การสร้างโปรเจค...ของเรา

การสร้างโปรเจคด้วย Angular CLI

เรามาเริ่มสร้างโปรเจคกันเลยดีกว่า หลังจากโม้มาเยอะ :D

แต่ๆๆๆๆ เอ๊ะ!!! แล้ว Angular CLI คืออะไรอ่า

Angular CLI = Command Line Interface for Angular

จะให้พูดสั้นๆ ไม่ยาวนะ 5555 ก็คือ

เครื่องมือที่ช่วยในการสร้างโปรเจคให้พร้อมใช้งาน ง่าย รวดเร็ว … สั้นไหม 55

มาเริ่มได้แล้วโว้ยยยยยยยยยยย !@@!!!!

Step 1 : ติดตั้ง NodeJS โหลดเวอร์ชั่นปัจจุบัน(Current) เลย

กด Next รัวๆๆ ได้เลย จนขึ้น เสร็จสิ้น นะฮะ^^

Step 2 : ติดตั้ง Angular CLI โดยใช้คำสั่ง

npm install -g @angular/cli@latest

** หากเกิด ERROR เดาว่า version น่าจะเก่าไป ให้ทำการแก้ไขโดยวิธีนี้

npm i -g npm
npm cache verify
npm cache clean --force// แล้วก็ต่อด้วย
npm install -g @angular/cli@latest

อ้างอิง 1 : https://github.com/npm/npm/issues/16861

อ้างอิง 2 : https://github.com/cncjs/cncjs/issues/172

Step 3 : เลือก Path ที่ต้องการสร้างโปรเจค เช่นไดร์ “D:/workspace/” แล้วใช้คำสั่ง

ng new first-app

Step 4 : รอจนกว่ามันโหลดการติดตั้งบลาๆๆๆ อะไรจนเสร็จ

*** อาจจะใช้เวลารอประมาณ 2–3 นาที ในการสร้างนะฮะ..ใจเย็นๆ

สังเกตุบรรทัดที่ขึ้นต้นว่า Project แล้วเหลือบไปมองว่ามันขึ้น Successfully ไหม
ถ้าขึ้นก็แสดงว่าเราสร้างโปรเจค สำเร็จแล้ว

ได้แล้ว เย้ๆๆๆๆๆ ฮิ้วววว ^^

Step 5 : จากนั้นก็ Move เข้าไปในโปรเจคของเรา ด้วยคำสั่ง

cd first-app

Step 6 : แล้วก็ Run โปรเจคด้วยคำสั่ง

ng serve

ดูโปรเจคของเราที่ Browser โดยพิมพ์ URL = localhost:4200

ผลลัพธ์ที่ได้ก็คือ app work! ซึ่งเป็น Default ของการสร้างโปรเจค

โดยปกติแล้ว เวลา run โปรเจค port จะถูก Default ที่ 4200

แต่ถ้าอยากจะเปลี่ยน port ก็สามารถทำได้ดังนี้

ยกตัวอย่างเช่น ต้องการให้ Running ที่ port 4444

ng serve --port 4444

แล้วก็ดูโปรเจคของเราที่ Browser โดยพิมพ์ URL = localhost:4444

เปลี่ยน port เมื่อต้องการ Running มากกว่า 1 โปรเจค

ถ้าต้องการ Stop running : ให้กด Ctrl + C แล้วก็ Y ตามด้วย Enter

การใช้ Styling(CSS) ของ Bootstrap 3 Framework

ต่อจาก Step ที่ 6 เลยนะครับ เพื่อให้ไม่ตอนขาด เฮ้ย@!? ขาดตอน ^^

Step 7 : เปิด CMD ให้อยู่ที่ Root Path ของโปรเจค เช่น “D:/workspace/first-app”

จากนั้นพิมพ์คำสั่ง

npm install --save bootstrap

— แหนะรู้นะว่าสงสัยอะไร ชะ ชะ ชะ ชัวน์

--save ก็คือให้บันทึกหรือเขียน Package นี้ไว้ที่ไฟล์ package.json ด้วย

ถ้าหากขึ้นข้อความว่าดังนี้ (เท่าที่ผมเจอตอนนี้นะ 5555)

added [n] package
แสดงว่ามันโหลดให้เสร็จแล้ว

updated [n] package
แสดงว่ามันอัพเดตให้เสร็จแล้ว

ERR! code E404
แสดงว่ามันเออเร่อเพราะไม่พบ package นี้

ERR! notarget No matching version found for [package]
แสดงว่ามันไม่พบ package เวอร์ชั่นดังกล่าว

Reference: node 8.0

โอเค……ต่อๆ ๆ Bootstrap ของเรา ตอนนี้เราโหลดเรียบร้อย

Step 8 : เปิดไฟล์ .angular-cli.json ขึ้นมา

Include CSS Bootstrap ที่ “styles” ใน []

Step 9 : เปิดไฟล์ app.component.html ขึ้นมา

Copy โค้ดตัวอย่างข้างล่างนี้ไปวาง

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

<div class="container" style="padding-top: 60px;">
    <div class="page-header">
        <h1>HOME</h1>
    </div>
</div>

<footer class="footer">
    <div class="container">
        <p class="text-muted">Tutorial By bamossza</p>
    </div>
</footer>

—

จากนั้นใช้คำสั่ง Root project >ng serve

มาดูผลลัพธ์กัน อิอิ ลุ้นๆๆๆๆ ๆ ๆ ๆ ๆๆๆ … ตื่นเต้น

เย้ๆๆ ได้แล้วววววววว เห็นไหมไม่ยากเลย

เสริมให้อีกนิ๊ดดดด เปิดไฟล์ AppModule.ts ขึ้นมา

รูปด้านบนนี้เรียกว่า Module หรือ Root module เพราะทาง Angular กำหนดไว้ว่า ใน 1 โปรเจคหรือ 1 App เนี้ยจะต้องมี Module อย่างน้อย 1 Module นะจ๊ะ

Angular CLI มันถึงได้สร้างมาให้ตั้งแต่ตอนแรกเลย 555555

Module นี้ชื่อว่า AppModule
ประกอบด้วย
@NgModule({ … }) แปะประกาศเพื่อบอกว่าคือ Module
แล้วข้างในก็จะเสริมทัพด้วย Metadata ดังต่อไปนี้
declarations[] เมื่อมี/สร้าง Component อื่นๆให้ประกาศเข้ามาตรงส่วนนี้
imports[] เมื่อมี/สร้าง Module อื่นๆให้ประกาศเข้ามาตรงส่วนนี้
providers[] เมื่อมี/สร้าง Service อื่นๆให้ประกาศเข้ามาตรงส่วนนี้
bootstrap[] จะเป็นตัวบอกให้ Angular ว่าให้ทำงาน Component นี้เป็นอันดับแรกนะ

พักดื่มน้ำ จิบน้ำชา กาแฟ สักหน่อย ก่อนลุยยยยยย Step ต่อไป ก่อนน๊า ^^

การทำ Routing

Why do we need a Router ? — ทำไมเราต้องทำ Router

No Routing
localhost:4200/Routing
localhost:4200/home
localhost:4200/about
localhost:4200/contact

สรุปสั้นๆ ก็คือ ถ้าไม่ทำ Routing ก็เท่ากับว่าเราจะแบ่ง Component ไม่ได้
หรือถ้าจะเปรียบเทียบเว็บไซต์ทั่วไป ก็คือจะแบ่ง Page หรือเปลี่ยนหน้าไม่ได้นั่นเอง

เพื่อไม่ให้ ไสเวเรีย เฮ้ย!@? เสียเวลา งั้นเรามาเริ่มกันดีกว่า

โจทย์ : ให้สร้าง component ดังนี้

HomeComponent
AboutComponent
ContactComponent

ทีนี้มาวางแผน Router

- home        คือ หน้าแรก
- about       คือ หน้าเกี่ยวกับ
- contact     คือ หน้าติดต่อ
โดยมี
AppComponent  คือ Main Template

โอเชชชช วางแผนเสร็จแล้ว

ต่อจาก Step 9 เลยนะครับ เพื่อให้เกิดความต่อเนื่องกัน

Step 10 สร้าง Component ที่วางแผนไว้เมื่อกี้ ด้วยคำสั่งดังนี้

Root project >ng generate component homeหรือจะย่อรูปก็ได้นะ ถ้ามันยาวไปRoot project >ng g c home --spec false
Root project >ng g c about --spec false
Root project >ng g c contact --spec falseสร้าง component ตามลำดับเลยนะครับ--spec false ก็คือไม่ต้องสร้างไฟล์ .spec (ไฟล์ที่เอาไว้เขียน Test)

เมื่อพิมพ์เรียบร้อยทั้งหมดแล้ว มันไม่ใช่แค่สร้างคอมโพเน้นท์ให้เท่านั้น
แต่ว่ามันยัง ประกาศชื่อ Class Component ที่สร้างเมื่อกี้ เข้าไปที่ AppModule.ts ให้เราด้วย ดูตรงส่วน declarations [] ครับ สบายเลยถ้าใช้ Angular CLI

ทีนี้ลองเรียกใช้ให้แสดงผลที่ app component

ดูชื่อ selector ได้ที่ไฟล์ component.ts

ตัวอย่าง ไฟล์ home.component.ts

เปิดไฟล์ app.component.html ขึ้นมา แล้วเพิ่มโค้ดดังนี้

<app-home></app-home>
<app-about></app-about>
<app-contact></app-contact>

แล้วดูผลลัพธ์

เห็นไหมเล่าาาา ถ้าไม่ทำ Router มันก็จะมารวมกันอยู่ที่นี่หมดเลย > เข้าใจยัง?@!

Step 11 เปิดไฟล์ AppModule.ts ขึ้นมา

แล้วเขียนโค้ดเพิ่มเข้าไปในส่วนของ import [] ดังนี้

RouterModule.forRoot([
    {path: 'home', component: HomeComponent},
    {path: 'about', component: AboutComponent},
    {path: 'contact', component: ContactComponent},
    {path: '', component: HomeComponent},
    {path: '**', redirectTo: 'home', pathMatch: 'full'}, 
])**อย่าลืมม!!!
import { RouterModule } from '@angular/router';

path: ‘**’ // ถ้าไม่พบ path ดังกล่าวให้ redirect ไปที่ path ไหน
(ประมาณว่า ERROR 404)

Step 12 : สร้างลิ้งค์เพื่อไปยังหน้าต่างๆ

เปิดไฟล์ app.component.html ขึ้นมา แล้วเขียนโค้ดเพิ่มเข้าไป

เดิมจะใช้ href
<a href="#">Home</a> | <a href="home">Home</a>ให้เปลี่ยนใหม่เป็นคำสั่ง [routerLink] ของ angular 
<ul class="nav navbar-nav">
    <li class="active"><a [routerLink]="['home']">Home</a></li>
    <li><a [routerLink]="['about']">About</a></li>
    <li><a [routerLink]="['contact']">Contact</a></li>
</ul>

เปิดไฟล์ home.component.html ขึ้นมา แล้วเขียนโค้ดเพิ่มเข้าไป

<div class="page-header">
  <h1>HOME</h1>
</div>

เปิดไฟล์ about.component.html ขึ้นมา แล้วเขียนโค้ดเพิ่มเข้าไป

<div class="page-header">
    <h1>ABOUT</h1>
</div>

เปิดไฟล์ contact.component.html ขึ้นมา แล้วเขียนโค้ดเพิ่มเข้าไป

<div class="page-header">
  <h1>CONTACT</h1>
</div>

หลังจากนั้นลอง run ดูว่า ตอนนี้สามารถ ลิ้งค์ไปหน้าอื่นๆ ได้หรือยัง?

ทีนี้ลองคลิกที่เมนู About ดูสิว่าได้ไหม?

เฮ้ยยยยยย !!! ทำไมคลิกแล้วมัน Error วะเนี้ย

Error มันบอกว่าประมาณว่า โหลด HomeComponent มาแล้วไม่รู้จะเอาไปแสดงที่ไหน เพราะหา outlet ไม่เจอ Oh!!!!! Lol

ทีนี้เรามาลุยกันต่อ เริ่ม……………

เปิดไฟล์ app.component.html ขึ้นมา แล้วเขียนโค้ดเพิ่มเข้าไป

จากเดิม
<div class="container" style="padding-top: 60px;">
    <div class="page-header">
        <h1>HOME</h1>
    </div>
    <app-home></app-home>
    <app-about></app-about>
    <app-contact></app-contact>
</div>เปลี่ยนเป็นดังนี้
<div class="container" style="padding-top: 60px;">
    <router-outlet></router-outlet>
</div>

ลอง run ดูผลลัพธ์ เย้ๆๆๆๆๆๆๆๆ ได้แล้ว

ทีนี้เรามาไล่ดูทีละหน้ากัน แล้วสังเกตุ URL ด้วยว่ามีการเปลี่ยนแปลงไหม

1) หน้า Home หรือ path ที่เราตั้งว่า path: ‘’

2) หน้า About หรือ path ที่เราตั้งว่า path: ‘about’

3) หน้า Contact หรือ path ที่เราตั้งว่า path: ‘contact’

4) หน้า Home หรือ path ที่เราตั้งว่า path: ‘home’

เย้ๆๆๆๆๆๆๆ รัวๆๆ ได้ครบอย่างที่เราวางแผนไว้แล้ว

แต่เอ๊ะ!!!!!!! เมื่อกี้เหมือนสังเกตุเห็นอะไรแว็บๆ

ทำไมเราคลิกไปหน้าอื่นๆ แล้วมันยัง Active อยู่ที่ Home อย่างเดียว

งั้นแสดงว่ายังไม่จบ 5555 ป่ะลุยกันต่อ…….

เปิดไฟล์ app.component.html ขึ้นมา แล้วเขียนโค้ดเพิ่มเข้าไป

เราจะต้องเพิ่มคำสั่ง routerLinkActive="active" เข้าไปใน tag liจากเดิม
<ul class="nav navbar-nav">
    <li class="active"><a [routerLink]="['home']">Home</a></li>
    <li><a [routerLink]="['about']">About</a></li>
    <li><a [routerLink]="['contact']">Contact</a></li>
</ul>เปลี่ยนเป็น
<ul class="nav navbar-nav">
    <li routerLinkActive="active"><a [routerLink]="['home']">Home</a></li>
    <li routerLinkActive="active"><a [routerLink]="['about']">About</a></li>
    <li routerLinkActive="active"><a [routerLink]="['contact']">Contact</a></li>
</ul>

มาดูผลลัพธ์กัน