ป้ายกำกับ: Angular 2

สำหรับคนที่กำลังศึกษา Ionic 2 หรือ Angular 2 อยู่ อยากทำระบบล็อกอิน Facebook หรือเชื่อมต่อ Facebook ลองตัวนี้ได้ครับ ใช้ง่ายทีเดียว โค้ดสั้นมาก

รายละเอียด: http://goo.gl/zRv9b3

สำหรับคนที่ตาม Angular 2 อยู่ ตอนนี้เป็นเวอร์ชัน RC5 (2.0.0-rc.5) ครับ

1. Angular 2 มี style guide หรือคู่มือ/ข้อแนะนำ สำหรับการเขียนโค้ดที่ดีครับ แนะนำให้ศึกษาก่อนตามนี้ https://goo.gl/wW1wRf

การเริ่มต้นที่ดี ช่วยให้เราประหยัดเวลาชีวิตไปได้หลายนาทีแน่นอน 55+

ฝากมือใหม่ไว้ 7 ข้อก่อนนะครับ ถ้ามีอะไรเพิ่มเติมจะมาเล่าให้ฟังเรื่อยๆ

—-
โค้ชเอก

ความรู้พื้นฐานที่ต้องมี

1. HTML, CSS, Modern JavaScript (ES2015/ES6)
2. TypeScript https://www.typescriptlang.org/

การเตรียมเครื่องมือ

1. ติดตั้ง Node.js และ npm ดาวน์โหลด และติดตั้งได้ที่ https://nodejs.org/en/
2. ติดตั้ง Editor ในที่นี้จะยกตัวอย่าง Atom ครับ ดาวน์โหลดและติดตั้งได้ที่ https://atom.io/
3. ติดตั้ง package ชื่อว่า Atom TypeScript ให้กับ Atom Editor
   (เข้าเมนู Settings -> Install พิมพ์ atom-typescript แล้วกด Install)
4. ติดตั้ง package ชื่อว่า Angular 2 TypeScript Snippets เพื่อช่วยประหยัดเวลาในการเขียนโค้ด
   (เข้าเมนู Settings -> Install พิมพ์ angular-2-typescript-snippets แล้วกด Install)
5. ก่อนลงมือเขียน แนะนำให้อ่าน Angular 2 Style Guide เพื่อรูปแบบโค้ดที่ถูกต้อง และเป็นมาตรฐาน ได้ที่นี่
   https://angular.io/docs/ts/latest/guide/style-guide.html
6. ทดลองลงมือเขียน Hello World ได้ที่คลิปด้านล่างนี้ แล้วต่อด้วยคู่มือ https://angular.io/docs/ts/latest/tutorial/

สุดท้าย ลองแวะเข้าไปดูแหล่งเรียนรู้ของ Angular 2 ได้ที่นี่ครับ

https://angular.io/resources/

ขอให้สนุกกับการเรียนรู้ครับ แล้วพบกันในบทความต่อไป 🙂

Pipes ใน Angular 2 มีไว้สำหรับ transform, filter หรือไว้จัดรูปแบบข้อมูลต่างๆ เราสามารถแทรก | เข้าไปใน html ได้เลย

1. uppercase มีไว้แปลงตัวอักษรให้เป็นตัวพิมพ์ใหญ่ทั้งหมด

<p>{{ ‘Coding Thailand’ | uppercase }}</p>

<!– ผลลัพธ์ คือ CODING THAILAND –>

2. lowercase มีไว้แปลงตัวอักษรให้เป็นตัวพิมพ์เล็กทั้งหมด

<p>{{ ‘Coding Thailand’ | lowercase }}</p>

<!– ผลลัพธ์ คือ coding thailand –>

3. number ใช้สำหรับจัดรูปแบบของตัวเลขต่างๆ เช่น

<p>{{ 12345 }}</p>

<!– ผลลัพธ์ คือ ‘12345’ –>

<p>{{ 12345 | number }}</p>

<!– ผลลัพธ์ คือ ‘12,345’ –>

<p>{{ 12345 | number:’6.’ }}</p>

<!– ผลลัพธ์ คือ ‘012,345’ –>

<p>{{ 12345 | number:’.2′ }}</p>

<!– ผลลัพธ์ คือ ‘12,345.00’ –>

4. percent จัดรูปแบบข้อมูลในรูปแบบ %

<p>{{ 0.8 | percent }}</p>

<!– ผลลัพธ์ คือ ‘80%’ –>

<p>{{ 0.8 | percent:’.3′ }}</p>

<!– ผลลัพธ์ คือ ‘80.000%’ –>

5. currency ใช้สำหรับจัดรูปแบบในรูปสกุลเงิน

<p>{{ 10.6 | currency:’EUR’ }}</p>

<!– ผลลัพธ์ คือ ‘EUR10.6′ –>

<p>{{ 10.6 | currency:’USD’:true }}</p>

<!– ผลลัพธ์ คือ ‘$10.6′ –>

<p>{{ 10.6 | currency:’USD’:true:’.2′ }}</p>

<!– ผลลัพธ์ คือ ‘$10.60’ –>

6. date ใช้สำหรับจัดรูปแบบวันที่และเวลา

<p>{{ birthday | date:’ddMMyyyy’ }}</p>

<!– ผลลัพธ์ คือ ’07/16/1986′ –>

<p>{{ birthday | date:’longDate’ }}</p>

<!– ผลลัพธ์ คือ ‘July 16, 1986′ –>

<p>{{ birthday | date:’HHmmss’ }}</p>

<!– ผลลัพธ์ คือ ’15:30:00′ –>

<p>{{ birthday | date:’shortTime’ }}</p>

<!– ผลลัพธ์ คือ ‘3:30 PM’ –>