Nati Namvong

Nati Namvong

Just Coding the Future.

Yeo! Angular

image

Installing Node.js

http://nodejs.org/

Installing Yeoman

npm install -g yo grunt-cli bower

Installing Generators

npm install -g generator-angular

Using Generators

ใช้ Command line เข้าไปที่โฟลเดอร์ที่จะใช้ใน Project แล้ว Run Command นี้

yo angular

หลังจาก Run Command แล้วจะมีการถามข้อมูลต่างๆจาก Yo เช่น จะใช้ Twitter Bootstrap หรือเปล่า จะให้ SCSS หรือเปล่า ซึ่งตรงนี้ก็ขึ้นอยู่กับเราว่าจะใช้หรือไม่ ถ้าใช้ก็ตอบ yes ถ้าไม่ก็ตอบ no ไปเท่่านั้นเอง

และหลังจากที่เลือกเสร็จหมดแล้ว Yo ก็จะทำการติดตั้งไฟล์พื้นฐานที่จำเป็นให้เราไว้พร้อมทำงานต่อไป 

image

Install package

bower install

Local Development

grunt server

คำสั่งนี้เป็นการสร้าง localhost server ขึ้นมาและเปิด App ของเราให้บน Browser เลย นอกจากนั้นเวลาที่เราแก้ Code มันก็จะ Update ให้ Auto เลยด้วย

image

Building Your Application

เมื่อ App เราพร้อมที่จะปรากฏต่อสายตาชาวโลก ก็ถึงเวลา Build ขึ้น Production ด้วยคำสั่งนี้

grunt build

โดยหลังจาก Run คำสั่งนี้แล้ว เราจะได้โฟลเดอร์ dist ขึ้นมาใหม่ ซึ่งภายในบรรจุไฟล์ .html .css และ .js ของ App ให้เราพร้อมที่จะเอาไปไว้บน Production Server 

image

Conclusion

สรุปก็คือ Yeoman เป็น Tool Set ที่ช่วยให้เราสามารถสร้าง Web Application ได้ง่ายและเป็นระบบ โดยที่มี Workflow ที่ง่ายเป็นระเบียบ เหมาะแก่การใช้ใน Project ต่อไปของคุณยิ้งนัก

Useful links
Automating AngularJS With Yeoman, Grunt & Bower
Kickstart Your AngularJS Development with Yeoman, Grunt and Bower
GETTING STARTED WITH YEOMAN
Bootstrapping AngularJS With Yeoman
Using Yeoman to Create a Web Application
Useful links
Automating AngularJS With Yeoman, Grunt & Bower
Kickstart Your AngularJS Development with Yeoman, Grunt and Bower
GETTING STARTED WITH YEOMAN
Bootstrapping AngularJS With Yeoman
Using Yeoman to Create a Web Application

Data Binding in Angular

The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.

DOC Thailand (at Sidewalk Cafe’)
DOC Thailand (at Sidewalk Cafe’)

DOC Thailand (at Sidewalk Cafe’)

annyang! say hello to your new user interface
www.talater.com/annyang
annyang! say hello to your new user interface
www.talater.com/annyang

annyang! say hello to your new user interface

www.talater.com/annyang

เทคโนโลยีสมัยนี้มันทำให้อะไรๆง่ายขึ้นเยอะ ออกแบบรถบังคับเองจากโครงสร้างพื้นฐานที่มีให้แล้วก็สั่ง Print (3D) ออกมา น่าสั่งสักคันจริงๆ

utypedesign.com

Down ไป 7 นาที เพราะ Up Space เครื่อง แล้วไม่ได้ตั้ง Auto Start Service ไว้
Down ไป 7 นาที เพราะ Up Space เครื่อง แล้วไม่ได้ตั้ง Auto Start Service ไว้

Down ไป 7 นาที เพราะ Up Space เครื่อง แล้วไม่ได้ตั้ง Auto Start Service ไว้