สำหรับคนที่กำลังศึกษา Ionic 2 หรือ Angular 2 อยู่ อยากทำระบบล็อกอิน Facebook หรือเชื่อมต่อ Facebook ลองตัวนี้ได้ครับ ใช้ง่ายทีเดียว โค้ดสั้นมาก รายละเอียด: http://goo.gl/zRv9b3 Views: 452
Category: 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;…
การประกาศตัวแปร และชนิดข้อมูลของ 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[] =…
แนะนำ Chartist.js ใช้กับ Angular 2 และ Ionic 2
สำหรับคนที่กำลังมองหา Chart เพื่อนำมาทำรายงาน ลองใช้ตัวนี้ได้ครับ จริงๆก็ใช้ได้ทั้งฝั่ง JS/Node.js และ PHP แต่ตัวนี้จะพิเศษหน่อย สำหรับคนที่กำลังศึกษา Angular 2 หรือ Ionic 2 อยู่ สามารถติดตั้งแล้ว import เข้ามาใช้ในโปรเจคได้เลย สะดวกมากๆ ลองๆ เว็บไซต์หลัก: http://goo.gl/z6ge5C สำหรับ Angular 2 และ Ionic 2: https://goo.gl/By5xi1 Views: 467
เรื่องเล่า 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>{{…