網站開發框架 Angular 新手入門 安裝篇
Angular 是一個基於 TypeScript 建構的開發平台。它包括:
-
- 一個基於元件的框架,用於建構可伸縮的 Web 應用
- 一組完美整合的函式庫,涵蓋各種功能,包括路由、表單管理、客戶端-伺服器通訊等
- 一套開發工具,可幫助你開發、建構、測試和更新程式碼
藉助 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套件
<script src="./assets/jquery/jquery-3.6.4.js"></script>
若想要用Jquery ,但在Angular裡的ts檔中,打上$會發現無法運行
因為在ts中,所有變數都必須明確定義型別,方法就是將$定義為any型別
declare var $: any;
下載依賴套件
開啟別人的專案檔時,若對方沒有把套件一起包進來,執行npm start會出錯
可以執行:npm install ,下載套件
發表評論
想要留言嗎?歡迎歡迎!