GSS 技術部落格

在這個園地裡我們將從技術、專案管理、客戶對談面和大家分享我們多年的經驗，希望大家不管是喜歡或是有意見，都可以回饋給我們，讓我們有機會和大家對話並一起成長！
若有任何問題請來信：gss_crm@gss.com.tw

2 分鐘閱讀時間 (382 個字)

字體大小: + –

Angular #2 - 第一支 Angular 程式

程式語言前端

2021/06/24, 週四

1938 點擊

0 評論

開心嗎？要動手了(終於...)
- 從這篇開始我們會建立一支簡單的 Angular 程式
  - 首先會建立各種 Component
  - 再來自然是要建立 service
  - 同時也可以在 Template 中運用 Pipe/Directive
  - 設定基本的 Routing
- 這支程式有一些限制
  - 資料是 in-memory 的，沒有接後端存資料庫
  - 沒有檢查 error 的機制(try/catch)
  - 沒有單元測試
先確定你有安裝好 Angular CLI 了
- 怎麼確認有裝？
  - 請參考以下指令
```
  ng --version
```
    - 如果有出現上圖就代表有裝
    - 如果沒有出現…就參考此篇安裝
- 接著就來建立一個新的 Angular 應用程式吧！
  - 首先是 ng new stocks
    - 這個部份會建立一個叫 stocks 的目錄，並開始建立一些 Angular 程式的基礎建設
    - 下這個指令的過程中會問你要不要 strict、要不要 routing，一律都先選 yes 就對了
    - 大致上的畫面如下
  - 再來是 cd stocks
    - 切到這個目錄你會發現 CLI 還很貼心幫你起了個 local git repository，版控很重要滴！
  - 最後是 ng serve
    - ng serve 是透過起一個開發時期用的 server 來看你的成果
    - 它支援熱插拔，只要你按下存檔，CLI 就會重新編譯需要編譯的部份，如果有錯就會直接炸，如果沒錯，就會直接更新在畫面上
    - 理論上執行 ng serve 會看到以下畫面
    - 此時開瀏覽器到 localhost:4200 就可以看到以下畫面
恭禧，你完成了第一支完全沒功能的 Angular 應用程式了