สร้าง Web Apps ด้วย Angular + Firebase
Draft Version 0.0.1
Technology ที่ใช้สำหรับคอร์สนี้
- Angular 4

- Firebase

- Typescript

Visual Studio Code
แนะนำ Editor สำหรับเขียนโปรแกรม ให้ได้ VS Code
และ ลง Plugin ดังนี้
- Angular v4 Typescript Snippets
- Angular Language Service
- TSLint
- Atom One Dark Themes
- Path Intellisense
NVM = Node Version Manager
https://github.com/creationix/nvm
เช็คว่า มี node version อะไรบ้างบน nvm cloud
$ nvm ls-remote
ลง node version ที่ต้องการ ด้วย
$ nvm install v8.4.0
เซ็ต default เพื่อใช้ node ใน version ที่เราต้องการพัฒนา เช่น ใช้ v8.4.0
$ nvm alias default 8.4.0
default -> 8.4.0 (-> v8.4.0)
ตรวจสอบว่าได้ node, npm ที่ต้องการด้วยคำสั่ง
$ node -v
v8.4.0
$ npm -v
5.3.0
Angular 4
ลง Angular cli https://cli.angular.io/
$ npm install -g @angular/cli
สร้าง Project ด้วยคำสั่ง ng command
$ ng new ng4-app
$ cd ng4-app
$ ng -v

สตาร์ท server ด้วย
$ npm start
หรือ (ng serve -o, -o ใช้สำหรับเปิด browser อัตโนมัติ )
$ ng serve -o

Angular Components
ใช้ angular cli ช่วยในการ generate components เช่นหน้า about, contact
$ cd ng4-app/src/app
$ mkdir components && cd components
$ ng g component about
$ ng g component contact

การเรียกใช้ components สามารถใช้ tag ของ selector ในการเรียก
components มาใช้ได้

Angular Routing (@angular/router)
Angular Routing ใช้ในการทำ navigate ระหว่างหน้า pages
import RouterModule ลงในไฟล์ src/app/app.module.ts

ใส่ routing ในลงใน imports section ของ app component ( ไฟล์ src/app/app.module.ts)

ในไฟล์ src/app/app.component.html
ใส่ <router-outlet></router-outlet> เพื่อแสดงรายละเอียดของ components ที่กำลังเลือกอยู่ในขณะนี้

ทดสอบ routing


หรือหากต้องการทำ Link แต่ละ page ก็สามารถใช้ routerLink ได้เช่นกันโดยการแก้ไขที่ไฟล์ (src/app/app.component.html)



Deploy Angular to Firebase
สมมุติว่าทำการพัฒนาโปรแกรมเสร็จแล้ว และต้องการดีพลอย angular ขึ้นไปไว้บน firebase มีขั้นตอนดังนี้
ทำการ compile project angular ให้เป็นแบบ production
$ ng build — target -prod
ลง firebase tools
$ npm install -g firebase-tools
เริ่มต้น environment สำหรับการการพัฒนาบน firebase
$ firebase init

เลือก Hosting เพื่อที่จะสามารถอัพโหลดไฟล์ ขึ้นไปไว้บน Firebase Hosting ได้
เลือก directory “dist” เนื่องจาก ตอนที่เรา compile angular4 จะได้ directory นี้เป็น public หรือไว้สำหรับดีพลอยงานนั้นเอง

ที่เหลือ ก็กดผ่านไป จะได้ไฟล์ firebase.json มีหน้าตาประมาณนี้

หลังจากนั้น ก็สามารถสั่ง deploy งาน ด้วยคำสั่ง
$ firebase deploy
หลังจากนั้นก็สามารถใช้งานแอพพลิเคชั่นของเราได้แล้ว


