Quick Start Seed (ตอนที่ 3)

ในTutorial นี้ เราจะใช้ Quick start seed ในการทำให้ดูนะครับ ซึ่งจริงๆ Quick Start seed นี้ ก็เหมือนวิธิการเขียนเว็บโดยใช้ wamp นั่นแหละ ก็คือเขียนจากtext editer อะไรก็ได้ครับ เช่น atom, sublime ,Er ได้หมดเลยครับ เอาที่สะดวกเลย จากนั้นเราก็ค่อยเอาไปรันใน localhost ของเราครับ

อันดับแรก เราเริ่มโหลด seed จาก(https://codeload.github.com/angular/quickstart/zip/master) โหลดไว้ใน folderไหนก็ได้ ที่เราต้องการเลยครับ ซึ่งของผมขอเก็บไว้ใน desktop นะครับ

เมื่อเราโหลดเสร็จแล้ว Folder มันจะชื่อว่า quickstart-master แต่ในที่นี้ผมขอเปลียนเป็น isne นะครับ ><

จากนั้นเข้าไปใน cmd แล้วเข้าไปใน path Folder isne เมื่อกี้เลยครับ เพื่อที่เราจะได้ install nmp หากใครไม่รู้ว่าเข้าไปยัง path folder isne ยังไง ให้ทำตามนี้เลยครับ

โดยปกติแล้วเมื่อเราเข้า cmd path ของมันจะเป็น C:\Users\{ชื่อของคอมเรา}>

จากนั้นพิมพ์ ..

cd desktop => เข้าไปใน directory ที่ folder ของเราอยู่

cd isne => เข้าไปใน folder ที่เราเพิ่งโหลดมา จากนั้น Run command

nmp install

เมื่อเรา install nmp เสร็จเรียบร้อย แล้ว จากนั้นก็ run command โดยใช้คำสั่ง npm start ตามรูปด้านล่างเลยครับ

เมื่อคำสั่งด้านบนนี้ run เสร็จแล้ว browser จะเด้งขึ้นมา และเมื่อเราแก้โค้ดหรือเปลี่ยนโค้ดมันจะ recompile เอง

จะเด้ง browser มาแบบนี้นะครับ

มาเริ่มทำตัวอย่างกัน!!

ปิด folder เราลง และเปิด scr / app

ให้ดูที่ app.component.ts (ใช้ text editer)
ให้สร้าง class ที่ชื่อว่า Name และมี property ตามนี้

export class Name {
id: number;
name: string;
}

แล้วทำการเปลี่ยน the template ใน @component ให้ใส่หลังตัว “ ` “ (ตัวนี่ไม่ใช่ single quoteนะ) และตัว template จะเป็นตัวที่ทำของส่วน code html แบบข้างล่างนี้

<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>

และ ใน AppComponent class ตามที่ผมเข้าใจคือเหมือนเก็บพวกค่าตัวแปรไว้ให้ตัว component อื่นเรียกใช้

title = ‘Tour of Heroes’;
hero: Name =
{
id: 1,
name: ‘Naret’
}

Code ที่ได้จะเป็น ตามนี้นะครับ

และบน browser จะ refresh เอง และโชว์ผลลัพท์ ตามภาพข้างล่างประมานนี้

เอาหล่ะ ต่อไปเรามาลองทำ Two-way bindind กันดีกว่า~~

เริ่มจาก การ Import FormsModule เปิด app.module.ts และ เพิ่ม FormsModule ลง ใน @NgModule และ เพิ่ม import { FormsModule } from ‘@angular/forms’

และกลับมาทำที่ app.compoent.ts
[(ngModel)]=”person.name” คำสั่งนี้จะทำ Refactor ชื่อของคนๆนั้นได้
ให้ใส่ตามนี้

<label>name: </label>
<input [(ngModel)]=”person.name” placeholder=”name”>
</div>

ส่วนตัว bowser จะเป็นประมานนี้

ตอนนี้เราสามารถแก้ชื่อ และให้จอแสดงผลที่เราแก้ได้ไปพร้อมๆกัน