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

Nuttavut Thongjor

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

เพื่อไม่ให้เพื่อนๆเสียเวลานั่งสร้างโปรเจค 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 กัน

Code
1$ npm install -g angular-cli

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

Code
1$ ng new wiki

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

Code
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 สร้างกันก่อนดีกว่า

Code
1$ ng serve

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

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

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

ต้องการสร้างคำสั่ง
Componentng g component my-new-component
Directiveng g directive my-new-directive
Pipeng g pipe my-new-pipe
Serviceng g service my-new-service
Classng g class my-new-class
Interfaceng g interface my-new-interface
Enumng g enum my-new-enum

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

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

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

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

Wireframe

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

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

สารบัญ

สารบัญ

  • รู้่จักกับ angular-cli
  • ลงมือติดตั้งและใช้งาน angular-cli
  • ความสามารถของ angular-cli
  • เราจะทำแอพพลิเคชันอะไรในชุดบทความนี้?
คอร์สของเรา

คอร์สออนไลน์ React Fundamentals

คอร์สของเรา

คอร์สออนไลน์ React Fundamentals