สำหรับคนที่กำลังศึกษา Ionic 2 หรือ Angular 2 อยู่ อยากทำระบบล็อกอิน Facebook หรือเชื่อมต่อ Facebook ลองตัวนี้ได้ครับ ใช้ง่ายทีเดียว โค้ดสั้นมาก
รายละเอียด: http://goo.gl/zRv9b3
Tag: Angular 2
เรื่องเล่า Angular 2 (RC5)
สำหรับคนที่ตาม Angular 2 อยู่ ตอนนี้เป็นเวอร์ชัน RC5 (2.0.0-rc.5) ครับ
ใน RC5 นี้ได้เพิ่ม features ที่สำคัญมาก ได้แก่ Angular Modules (@NgModule)การมาของ Angular Modules ทำให้ angular libraies หลายๆตัวจะเริ่มทยอยกลายเป็น modules ครับ ไม่ว่าจะเป็น FormsModule, HttpModule, RouterModule เป็นต้น ทำให้โค้ดที่เคยเขียนต้องเขียนใหม่หลายจุดเลยทีเดียว
เช่นเดียวกันครับ พวก third party libraries ทั้งหลายก็จะเป็นกลายเป็น Modules เหมือนกัน เช่น Meterial Design, Ionic, AngularFire2 (Firebase) เป็นต้น
ข้อดีของ Angular Modules จะทำให้โค้ดในแต่ละ component ของเราดูสั้นลง สะอาด และอ่านง่ายขึ้น เพราะเราสามารถ import คลาส, Services หรือ Modules ต่างๆ เข้ามาได้ตั้งแต่ app เริ่มทำงานเลย ทำให้ component ที่เราเขียนไม่ต้อง import อะไรซ้ำๆ และนำไปใช้ได้ทันทีจากนี้ไปในทุกๆ App ที่เขียนด้วย Angular 2 จะมี root module ครับ หรือเรียกอีกอย่างหนึ่งว่า AppModule ก็ได้ อย่างน้อย 1 ตัวเสมอ (ในไฟล์ app.module.ts)
อีกอันหนึ่งที่มาใหม่คือ โหมด Just in Time (JIT) Compilation ที่จะช่วยให้เรา compile component และ modules ต่างๆได้ไวขึ้นขณะที่เรากำลังพัฒนา app อยู่ (development mode) และที่คู่กันคือโหมด Ahead of Time (AOT) Compilation ที่ช่วยเพิ่มประสิทธิภาพ และช่วยให้ app ของเราทำงานไวขึ้นมาก อันนี้แนะนำให้ใช้ตอนเป็น production mode
ตอนขึ้น production ก็อย่าลืมเปลี่ยนโหมด และ enable production กันด้วยนะครับ 🙂
ถามว่า Angular 2 จะออกตัวจริงเมื่อไหร่? การมาของ RC5 แสดงให้เห็นว่าคงใกล้มากๆแล้วครับ (เห็นบอกไม่กี่สัปดาห์)
ไว้มีอะไรใหม่ๆจะมาเล่าให้ฟังกันอีก
7 ข้อแนะนำสำหรับมือใหม่ที่กำลังจะศึกษา Angular 2
1. Angular 2 มี style guide หรือคู่มือ/ข้อแนะนำ สำหรับการเขียนโค้ดที่ดีครับ แนะนำให้ศึกษาก่อนตามนี้ https://goo.gl/wW1wRf
หรือง่ายกว่านั้น เวลาสร้างโปรเจคใหม่ หรือเขียนโค้ด ผมแนะนำให้ใช้ Angular-cli ครับ (https://goo.gl/pA0K5q) นอกจากจะช่วยเรา gen code แล้ว โค้ดที่ gen มา จะได้โค้ดซึ่งตรงกับ style guide ที่ดีด้วย สบายเลย 🙂
ตัวนี้ https://goo.gl/WsGW7o เป็นคู่มือ Angular CLI อย่าลืมพิมพ์แปะฝาบ้านไว้ 55+
2. Editor เลือกตามใจชอบได้ เอาตัวที่ใช้กันบ่อยๆ ก็มี 3 ตัว ดังนี้
– Visual Studio Code (https://goo.gl/ex3TCL)
– Sublime Text (plugin สำหรับเขียน Angular 2 (TypeScript) ดูที่นี่https://goo.gl/ZBaVGk)
– Atom Editor (plugin สำหรับเขียน TypeScript ดูที่นี่
https://goo.gl/qdb78x)
3. แนะนำให้ติดตั้ง Augury เป็น Google Chrome extenson สำหรับ Debug Angular 2 ครับ (ขาดไมได้เลยตัวนี้)
https://goo.gl/QX98gz
4. อภิธานศัพท์ (Glossary) หรือศัพท์ที่เกี่ยวข้องกับ Angular 2 แนะนำว่าเราต้องรู้ที่มาที่ไปของศัพท์แต่ละคำครับ ว่ามันคืออะไร เพราะหลายคำเป็นพื้นฐานที่เราต้องรู้มาก่อน
https://goo.gl/5Pg8Yi
5. อีกอันที่ควร print แปะฝาบ้านไว้ คือ ANGULAR CHEAT SHEET ครับ เป็นแผ่นสรุปข้อแนะนำ และโค้ดที่ใช้บ่อยๆใน Angular 2
https://goo.gl/NazUZi
6. พื้นฐานที่หลายคนมองข้ามคือ การ set <title> ให้กับ web pages แนะนำให้ใช้ Title service แทนการ set ค่าเข้าไปตรงๆที่ tag html ครับ ไม่ยาก ตามไปดูเรื่องนี้ได้ที่
https://goo.gl/DMMS8r
7. ถ้าอยากทำเอกสารคู่มือเพื่อธิบายโค้ด หรือโปรเจคที่เราเขียน แนะนำให้ใช้ Documentation generator สำหรับ TypeScript ครับ ตามนี้
https://goo.gl/XlMsz7
การเริ่มต้นที่ดี ช่วยให้เราประหยัดเวลาชีวิตไปได้หลายนาทีแน่นอน 55+
ฝากมือใหม่ไว้ 7 ข้อก่อนนะครับ ถ้ามีอะไรเพิ่มเติมจะมาเล่าให้ฟังเรื่อยๆ
—-
โค้ชเอก
6 ขั้นตอน การเตรียมตัวก่อนเขียน Angular 2 ครับ
ความรู้พื้นฐานที่ต้องมี
- HTML, CSS, Modern JavaScript (ES2015/ES6)
- TypeScript https://www.typescriptlang.org/
การเตรียมเครื่องมือ
- ติดตั้ง Node.js และ npm ดาวน์โหลด และติดตั้งได้ที่ https://nodejs.org/en/
- ติดตั้ง Editor ในที่นี้จะยกตัวอย่าง Atom ครับ ดาวน์โหลดและติดตั้งได้ที่ https://atom.io/
- ติดตั้ง package ชื่อว่า Atom TypeScript ให้กับ Atom Editor
(เข้าเมนู Settings -> Install พิมพ์ atom-typescript แล้วกด Install) - ติดตั้ง package ชื่อว่า Angular 2 TypeScript Snippets เพื่อช่วยประหยัดเวลาในการเขียนโค้ด
(เข้าเมนู Settings -> Install พิมพ์ angular-2-typescript-snippets แล้วกด Install) - ก่อนลงมือเขียน แนะนำให้อ่าน Angular 2 Style Guide เพื่อรูปแบบโค้ดที่ถูกต้อง และเป็นมาตรฐาน ได้ที่นี่
https://angular.io/docs/ts/latest/guide/style-guide.html - ทดลองลงมือเขียน Hello World ได้ที่คลิปด้านล่างนี้ แล้วต่อด้วยคู่มือ https://angular.io/docs/ts/latest/tutorial/
สุดท้าย ลองแวะเข้าไปดูแหล่งเรียนรู้ของ Angular 2 ได้ที่นี่ครับ
ขอให้สนุกกับการเรียนรู้ครับ แล้วพบกันในบทความต่อไป 🙂
สาระน่ารู้เกี่ยวกับ Angular 2 เรื่อง Pipes
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’ –>
ป.ล. เราสามารถใช้ความรู้ตรงนี้กับ Ionic Framework 2 ได้ด้วยนะครับ
ป.ล. 2 เราสามารถสร้าง Pipes แบบ custom ของเราเองได้ด้วยนะครับ เช่น อยากเอา Moment.js มาใช้สำหรับจัดรูปแบบหรือจัดการเกี่ยวกับวันที่ก็ได้ 🙂