How to install Package in Sublime Text 3 to build AngularJS 2 Web Project

สวัสดีครับ วันนี้ท๊อปจะมานำเสนอขั้นตอนการติดตั้ง Package ที่จำเป็นใน Sublime Text 3 ซึ่งทุก Package ที่ติดตั้งเข้าไป นำมาสู่การพัฒนา Web Application ของ AngularJS 2 ทั้งหมด

โดยขั้นตอนการติดตั้ง มีดังนี้

ขั้นที่ 1. เข้าไป Download Sublime Text 3 ที่ https://www.sublimetext.com/3

เมื่อ Download เสร็จเรียบร้อยแล้ว ให้ทำการติดตั้งลงเครื่อง

ขั้นที่ 2. ก่อนที่จะติดตั้ง Package ต่างๆ ในขั้นตอนนี้ ให้เข้าไปติดตั้ง Package Control ให้กับ Sublime Text 3 ที่ https://packagecontrol.io/ ก่อน เพื่อที่จะได้ลง Package อื่นๆ ในลำดับต่อไป

ขั้นที่ 3. เข้าไปที่ https://packagecontrol.io/installation แล้ว Copy คำสั่ง

ขั้นที่ 4. ให้เปิดโปรแกรม Sublime ขึ้นมา แล้วให้ไปที่ View > Show Console

ขั้นที่ 5. ให้ Copy คำสั่งแล้วไปวางใน Console จากนั้นกด Enter เพื่อ Run คำสั่ง โดยเมื่อเราลง Package เสร็จแล้ว ให้ Restart Program ขึ้นมาใหม่

ขั้นที่ 6. ให้กด Ctrl+Shift+P เพื่อค้นหา Install Package และเมื่อเจอแล้ว ให้ Double Click เข้าไป

ขั้นที่ 7. หลังจาก Double Click เข้าไปแล้ว ให้พิมพ์คำว่า Emmet เพื่อที่เราจะลง Emmet Package ใน User Package ของเรา แล้วก็ Double Click ลงได้เลย....

ถ้าหน้าจอปรากฏขึ้นมาแบบนี้ แสดงว่า ลงเสร็จเรียบร้อยแล้ว ให้ทำการ Restart ขึ้นมาใหม่

โดยวิดีโอแสดงวิธีการ Setup ก็ตามนี้ครับ...

ต่อมา คือ... ขั้นตอนการลง Snippets จาก Github โดยให้ทุกคนเข้าไปที่ https://packagecontrol.io/packages/AngularJS%20Snippets เพื่อใช้งานคีย์ลัดสำหรับการเรียก Service ของ AngularJS ซึ่งจะมีให้ใช้ตามหัวข้อดังนี้

-Services
-Directives
-Globals
-jQuery lite
-Scope functions
-Log functions
-Variables

มี 2 วิธีที่จะสามารถติดตั้ง Pagkage นี้ได้ คือ
-วิธีที่ 1 : ไปที่ github แล้ว Clone ด้วย NPM หรือ Download Project ลงมาแล้วไปที่โปรแกรม Sublime และ Browse Package ไปที่ Folder User ของตัวเอง หลังจากนั้นก็ Copy File Shippets มาแล้ววาง
-วิธีที่ 2 : ใช้ Ctrl+Shift+P แล้วไปที่ Install Package หลังจากนั้นค้นหาคำว่า AngularJS Snippets แล้วลง Package

โดยขั้นตอนนี้ท๊อปจะสาธิตวิธีแรกให้ดูก่อนนะ...

โดยใน Github บอกว่า ให้คุณดาวโหลดแล้วเข้าไปที่ Menu User Folder ของคุณแล้ว Copy File มาวางและก็ใช้งานได้เลย...

เราก็เริ่มทำตามที่เขาบอกกันเลย... ไปที่ Preference > Browse Packages

แล้วไปที่ User Folder

หลังจากนั้น Copy File มาวางแล้วใช้งาน Tag ได้เลยยย

ทดสอบการทำงานด้วยการสร้างไฟล์ javascript ขึ้นมา 1 ไฟล์และเรียกใช้คำสั่ง

Reference Packages:

http://nextflow.in.th/2014/use-angular-js-on-sublime-text/

https://github.com/maxhoffmann/angular-snippets

https://github.com/angular-ui/AngularJS-sublime-package

https://github.com/alienhard/SublimeAllAutocomplete

https://github.com/sergeche/emmet-sublime

https://github.com/start-angular/SB-Admin-BS4-Angular-2

ส่วนขั้นตอนการสร้างโปรเจค ติดตามได้ที่นี่เลย เรื่อง AngularJS Structure...

http://www.helloho.me/getting-started-with-angular/

https://scotch.io/tutorials/angularjs-best-practices-directory-structure

http://www.davecooper.org/angular-project-structure

http://stackoverflow.com/questions/18542353/angularjs-folder-structure

root-app-folder
├── index.html
├── scripts
│   ├── controllers
│   │   └── main.js
│   │   └── ...
│   ├── directives
│   │   └── myDirective.js
│   │   └── ...
│   ├── filters
│   │   └── myFilter.js
│   │   └── ...
│   ├── services
│   │   └── myService.js
│   │   └── ...
│   ├── vendor
│   │   ├── angular.js
│   │   ├── angular.min.js
│   │   ├── es5-shim.min.js
│   │   └── json3.min.js
│   └── app.js
├── styles
│   └── ...
└── views
    ├── main.html
    └── ...