สำหรับคนที่กำลังศึกษา Ionic 2 หรือ Angular 2 อยู่ อยากทำระบบล็อกอิน Facebook หรือเชื่อมต่อ Facebook ลองตัวนี้ได้ครับ ใช้ง่ายทีเดียว โค้ดสั้นมาก
รายละเอียด: http://goo.gl/zRv9b3
หมวดหมู่: Angular 2
สรุปการเขียน Classes ใน TypeScript
มาลองดูรูปแบบการเขียน Classes ใน TypeScript กัน จริงๆ แล้วรูปแบบและแนวทางการเขียนก็เขียนเหมือนกันกับ JS ES6 นั่นเองครับ
การสร้าง class เราจะใช้คีย์เวิร์ด class ตามด้วยชื่อคลาส ดังนี้
class Book {
}
คลาสประกอบด้วย properties, methods และ consturctors
1. การเขียน Properties
class Person {
firstName: string;
lastName: string;
age: number;
}
2. การเขียน Methods
class Person {
firstName: string;
lastName: string;
age: number;
//method
greet() {
console.log(“Hello”, this.firstName);
}
}
3. ตัวอย่างการใช้งานคลาส Person
// ประกาศตัวแปร มี type เป็น Person
let p: Person;
//สร้าง instance ใหม่
p = new Person();
//กำหนดค่าให้กับ first_name
p.firstName= ‘Akenarin’;
//เรียกใช้ method ชื่อว่า greet()
p.greet();
Note: เราสามารถสร้าง instance ใหม่ได้ด้วยบรรทัดเดียว ดังนี้
let p: Person = new Person();
4. การเขียน Constructors
constructor เป็น method พิเศษที่จะทำงานเมื่อมีการสร้าง instance ใหม่ โดยทั่วไปเรามักใช้สำหรับกำหนดค่าเริ่มต้นให้กับ object ครับ
ตัวอย่างการเขียน constructor แบบที่ 1
class Person {
firstName: string;
lastName: string;
age: number;
constructor(firstName: string, lastName: string, age: number) {
this.firstName= firstName;
this.lastName= lastName;
this.age = age;
}
greet() {
console.log(“Hello”, this.firstName);
}
}
ตัวอย่างการเขียน constructor แบบที่ 2 [เพิ่มเติมจาก @ Tan Tanangular ]
แบบที่ 2 นี้เราสามารถละไม่เขียน properties ได้โดยให้ระบุ access modifier เข้าไป เช่น private, public เป็นต้น ตัวอย่าง
class Person {
//ตรงนี้ไม่ต้องเขียน properties
constructor(public firstName: string, public lastName: string, public age: number) {
//ตรงนี้สามารถละ ไม่เขียนได้ //this.firstName= firstName;
//this.lastName= lastName;
//this.age = age;
}
} จากโค้ดด้านบนจะถูก compile เป็น ดังนี้
var Person = (function () {
function Person(firstName, lastName,age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
return Person;
}());
ด้านซ้ายเป็น .ts ส่วนด้านขวาหลัง compile เป็น .js
การใช้ constructor
let p: Person = new Person(‘Akenarin’, ‘Komkoon’, 20);
p.greet();
ถ้าใครมีพื้นฐานการเขียน JAVA, C#, PHP OOP มา รับรองว่าทำความเข้าใจ TypeScript ได้ไม่ยากครับ ลองดูๆ 🙂
การประกาศตัวแปร และชนิดข้อมูลของ TypeScript
สำหรับคนที่เตรียมตัวศึกษา Angular 2 คงหนีไม่พ้นต้องศึกษา TypeScript ด้วย มาดูตัวอย่างการประกาศตัวแปร และชนิดข้อมูลของ TypeScript ง่ายๆกันครับ (Built-in types)
รูปแบบ
let ชื่อตัวแปร: ชนิดข้อมูล;
– String
var name: string = ‘CodingThailand’;
– Number
let age: number = 20;
– Boolean
let married: boolean = true;
– Array
let jobs: Array<string> = [‘IBM’, ‘Microsoft’, ‘Google’];
let jobs: string[] = [‘Apple’, ‘Dell’, ‘HP’];
หรือ
let jobs: Array<number> = [1, 2, 3];
let jobs: number[] = [4, 6, 8];
Enums
enum Role {Employee, Manager, Admin};
let role: Role = Role.Employee;
Any (เป็น default type เก็บอะไรก็ได้)
let thing: any = ‘Akenarin Komkoon’;
thing = 1;
thing = [1, 2, 3];
Void (ใช้สำหรับฟังก์ชันที่ไม่มีการคืนค่ากลับ)
function setTitle(name: string): void {
this.name = name;
}
แนะนำ Chartist.js ใช้กับ Angular 2 และ Ionic 2
สำหรับคนที่กำลังมองหา Chart เพื่อนำมาทำรายงาน ลองใช้ตัวนี้ได้ครับ จริงๆก็ใช้ได้ทั้งฝั่ง JS/Node.js และ PHP แต่ตัวนี้จะพิเศษหน่อย สำหรับคนที่กำลังศึกษา Angular 2 หรือ Ionic 2 อยู่ สามารถติดตั้งแล้ว import เข้ามาใช้ในโปรเจคได้เลย สะดวกมากๆ ลองๆ
เว็บไซต์หลัก:
สำหรับ Angular 2 และ Ionic 2:
https://goo.gl/By5xi1
เรื่องเล่า 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 มาใช้สำหรับจัดรูปแบบหรือจัดการเกี่ยวกับวันที่ก็ได้ 🙂