網站開發框架 Angular 新手入門 安裝篇

Angular 是一個基於 TypeScript 建構的開發平台。它包括：

1. 1. 一個基於元件的框架，用於建構可伸縮的 Web 應用
   2. 一組完美整合的函式庫，涵蓋各種功能，包括路由、表單管理、客戶端-伺服器通訊等
   3. 一套開發工具，可幫助你開發、建構、測試和更新程式碼

藉助 Angular，無論單人專案還是企業級應用，你都能獲得平台帶來的優勢。Angular 的設計目標之一就是讓更新更容易，因此你可以用最小的成本升級到最新的 Angular 版本。最重要的是，Angular 的生態系統由包括 170 萬名開發人員、庫作者和內容創作者在內的多元團隊構成。

開發Angular前，要先安裝三個工具

• Node.js
• Visual Studio Code
• Angular CLI
  開啟命令提示字元視窗，執行：npm install -g @angular/cli

建立第一個專案

於專案目錄下，開啟命令提示字元視窗，執行：ng new HelloWorld

開始自動產生出一個Angular專案所需要的檔案

完成後執行：npm start

開啟瀏覽器進入http://localhost:4200/

使用Visual Studio Code開啟專案

檔案的從屬關係(app.component.ts／app.component.html／app.component.css)

Angular 推薦必裝套件

• Angular Language Service
• Angular Snippets
• Auto Import

宣告靜態檔的位置

編輯angular.json

把測試的 index.html檔放到/src/test/ 中

重啟執行：npm start

開啟瀏覽器進入http://localhost:4200/test/

就可以看到index.html檔的內容

使用JS套件

若想要用Jquery ，但在Angular裡的ts檔中，打上$會發現無法運行

因為在ts中，所有變數都必須明確定義型別，方法就是將$定義為any型別

declare var $: any;

下載依賴套件

開啟別人的專案檔時，若對方沒有把套件一起包進來，執行npm start會出錯

可以執行：npm install ，下載套件