Babel Coder

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

intermediate

 บทความนี้เป็นส่วนหนึ่งของชุดบทความ [ชุดบทความ] สอนสร้างและใช้งานเว็บแอพพลิเคชันด้วย Angular2

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

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

$ npm install -g angular-cli

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

$ ng new wiki

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

installing ng2
  create .editorconfig
  create README.md
  create src\app\app.component.css
  create src\app\app.component.html
  create src\app\app.component.spec.ts
  create src\app\app.component.ts
  create src\app\environment.ts
  create src\app\index.ts
  create src\app\shared\index.ts
  create src\favicon.ico
  create src\index.html
  create src\main.ts
  create src\system-config.ts
  create src\tsconfig.json
  create src\typings.d.ts
  create angular-cli-build.js
  create angular-cli.json
  create config\environment.dev.ts
  create config\environment.js
  create config\environment.prod.ts
  create config\karma-test-shim.js
  create config\karma.conf.js
  create config\protractor.conf.js
  create e2e\app.e2e-spec.ts
  create e2e\app.po.ts
  create e2e\tsconfig.json
  create e2e\typings.d.ts
  create .gitignore
  create package.json
  create public\.npmignore
  create tslint.json
  create typings.json
Successfully initialized git.
/ Installing packages for tooling via npm
├── es6-shim (ambient)
├── angular-protractor (ambient dev)
├── jasmine (ambient dev)
└── selenium-webdriver (ambient dev)

Installed packages for tooling via npm.

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

$ ng serve

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

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

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

ต้องการสร้าง คำสั่ง
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Interface ng g interface my-new-interface
Enum ng 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 เป็นหลักเพื่อความง่ายต่อการศึกษาและเรียนรู้ของเราครับ


แสดงความคิดเห็นของคุณ


Thanarack Chaisriปีที่แล้ว

สุดยอด!!


MrMalic MrMalic Ruttapituckปีที่แล้ว

ติดตามก๊าบบผ๋มมม

ข้อความตอบกลับ
ไม่ระบุตัวตนปีที่แล้ว

👌 ขอบคุณฮะ