[Angular2#2] แนะนำ angular-cli เครื่องมือจัดการโปรเจคและสร้างไฟล์ที่ง่ายและมีประสิทธิภาพ

การลงมือเขียนโปรแกรมจากศูนย์ สร้างโปรเจคเองจากความว่างเปล่า ย่อมไม่ต่างจากการปลูกต้นไม้ด้วยเมล็ดครับ กว่าจะโตเผลอๆรอจนลูกบวช แค่นั้นยังไม่พอบางเมล็ดยังผ่าเหล่าอีก จะปลูกไม้ดอกสีแดงดันเป็นสีขาวซะงั้น การเขียนโปรแกรมก็เช่นกันครับเมื่อคิดจะเริ่มจากศูนย์จงทำใจยอมรับที่จะไปได้ช้า เผลอๆไม่แค่ช้าแต่ยังเจอบั๊คเพราะความผ่าเหล่าของโค๊ดที่เราเขียน

เพื่อไม่ให้เพื่อนๆเสียเวลานั่งสร้างโปรเจค Angular2 เองจากศูนย์ บทความนี้เราจะแนะนำให้รู้จักกับ angular-cli เครื่องมือสุดชิก ที่จะช่วยให้คุณเขียน Angular2 ได้เร็วขึ้นราวกับได้นั่งจรวดไปขายยางพาราที่ดาวอังคาร~

รู้่จักกับ angular-cli

กาลครั้งหนึ่งไม่นานเท่าไหร่ โลกของนักพัฒนาฝั่ง Ember.js มีเครื่องมือหนึ่งที่ช่วยสร้างโปรเจคและไฟล์ต่างๆรวมถึงสั่งทำงานและ deploy ได้อย่างรวดเร็วนั่นคือ ember-cli เมื่อ Angular2 อุบัติมาบนโลกใบนี้จึงถือโอกาสหยิบยืม ember-cli มาทำต่อเพื่อให้สามารถใช้งานได้กับ Angular2 และ TypeScript ภายใต้ชื่อ angular-cli

จากเดิมถ้าเราจะสร้างโปรเจคใหม่ เราต้องสร้างไฟล์ package.json แล้วระบุลงไปว่าจะใช้ NPM package ตัวไหนบ้าง ยังไม่พอต้องระบุอีกว่าจะใช้เครื่องมืออะไรบ้างเพื่อให้โปรเจคของเราทำงานได้สมบูรณ์ สำหรับ angular-cli นั้นเมื่อเราสร้างโปรเจคเรียบร้อย เราก็สามารถทำงานกับโปรเจคเราได้เลยโดยไม่ต้องสนใจว่าจะตั้งค่าอย่างไรบ้าง

ลงมือติดตั้งและใช้งาน angular-cli

เมื่อทุกอย่างพร้อม ลงมือติดตั้ง angular-cli กัน

1$ npm install -g angular-cli

เมื่อจบคำสั่งนี้เราก็จะได้ ng ไว้ใช้งานเพื่อสร้างและบริหารโปรเจคของเรา ต้องบอกก่อนครับในชุดบทความนี้เราจะมาสร้างวิกิกัน เริ่มสร้างโปรเจคกันเถอะ! ใส่ชื่อ wiki ให้เป็นชื่อของโปรเจคเรา

1$ ng new wiki

ผลลัพธ์จากการออกคำสั่งดังกล่าวได้เป็น

1installing ng2
2  create .editorconfig
3  create README.md
4  create src\app\app.component.css
5  create src\app\app.component.html
6  create src\app\app.component.spec.ts
7  create src\app\app.component.ts
8  create src\app\environment.ts
9  create src\app\index.ts
10  create src\app\shared\index.ts
11  create src\favicon.ico
12  create src\index.html
13  create src\main.ts
14  create src\system-config.ts
15  create src\tsconfig.json
16  create src\typings.d.ts
17  create angular-cli-build.js
18  create angular-cli.json
19  create config\environment.dev.ts
20  create config\environment.js
21  create config\environment.prod.ts
22  create config\karma-test-shim.js
23  create config\karma.conf.js
24  create config\protractor.conf.js
25  create e2e\app.e2e-spec.ts
26  create e2e\app.po.ts
27  create e2e\tsconfig.json
28  create e2e\typings.d.ts
29  create .gitignore
30  create package.json
31  create public\.npmignore
32  create tslint.json
33  create typings.json
34Successfully initialized git.
35/ Installing packages for tooling via npm
36├── es6-shim (ambient)
37├── angular-protractor (ambient dev)
38├── jasmine (ambient dev)
39└── selenium-webdriver (ambient dev)
40
41Installed packages for tooling via npm.

Wow angular-cli สร้างโปรเจคของเราพร้อมใช้งานแล้ว เอาหละขอให้เพื่อนๆเข้าไปที่โฟล์เดอร์ wiki ของเรา เราจะเขียนโค๊ดกันในที่นี้ แต่ก่อนอื่นทดลองรันโปรเจคที่ angular-cli สร้างกันก่อนดีกว่า

1$ ng serve

เมื่อคำว่า Build successful ขึ้นมาใน terminal ของเราแล้ว ตอนนี้โค๊ดของเราพร้อมให้เราเชยชมแล้วที่ http://127.0.0.1:4200 หากการทำงานถูกต้องเบราว์เซอร์ของเพื่อนๆควรแสดงคำว่า app works! ออกมา

ความสามารถของ angular-cli

นอกจาก angular-cli จะใช้สร้างโปรเจคให้พร้อมทำงานได้แล้ว มันยังสามารถใช้เพื่อสร้างไฟล์หรือส่วนของโปรแกรมต่างๆที่เราอธิบายไปแล้วในบทความแรก เช่น Component ได้ผ่านคำสั่งต่อไปนี้

angular-cli มาพร้อมกับ Live Reload หรือก็คือความสามารถที่่เว็บเบราว์เซอร์จะรีเฟรชหน้าเพจอัตโนมัติเมื่อโค๊ดของเราเปลี่ยนนั่นเอง

ข้อจำกัดหนึ่งของการใช้ angular-cli คือคุณต้องใช้ TypeScript เนื่องจาก angular-cli จะสร้างไฟล์ขึ้นมาด้วยไวยากรณ์ของ TypeScript นั่นเอง แต่จะมีใครซักกี่คนหนอที่ใช้ Angular2 แต่ไม่ใช้ TypeScript?

เราจะทำแอพพลิเคชันอะไรในชุดบทความนี้?

ชุดบทความนี้เราจะสร้างวิกิกันครับ ใช่แล้วฮะมันคือวิกิตัวเดียวกับที่ปรากฎในชุดบทความ สอนสร้าง Isomorphic Application ด้วย React.js และ Redux ใน 5 วัน นั่นเอง ทั้งนี้เพื่อประโยชน์ของผู้อ่านจะได้ง่ายต่อการเปรียบเทียบวิธีการเขียนและใช้งานที่แตกต่างกันระหว่าง Angular2 และ React ครับ

Wiki ของเราจะมีส่วนหลักๆคือหน้า Homepage หน้า Page และหน้า About ครับ ในส่วนของ Page นั้นเราต้องสามารถทำการดู Wiki Page ได้ทั้งหมด สามารถสร้าง Page ใหม่ได้รวมถึงสามารถแก้ไขได้ด้วย แต่ไม่อนุญาตให้ลบ

angular-cli เป็นเครื่องมือที่ยอดเยี่ยม แต่กระนั้นก็ไม่ได้หมายความว่ามันคือตัวเลือกที่ดีที่สุดนะครับ เพื่อนๆยังสามารถใช้ Webpack เพื่อจัดการโปรเจค Angular2 ได้ด้วยเช่นกัน แต่สำหรับชุดบทความนี้เราจะเน้นใช้ angular-cli เป็นหลักเพื่อความง่ายต่อการศึกษาและเรียนรู้ของเราครับ