สำหรับคนที่กำลังศึกษา Ionic 2 หรือ Angular 2 อยู่ อยากทำระบบล็อกอิน Facebook หรือเชื่อมต่อ Facebook ลองตัวนี้ได้ครับ ใช้ง่ายทีเดียว โค้ดสั้นมาก รายละเอียด: http://goo.gl/zRv9b3 Views: 452
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 จะทำให้โค้ดในแต่ละ…
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)…
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…
สาระน่ารู้เกี่ยวกับ 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>{{…