安裝angular cli 及建立一個基於angular 的程式
發現了一個很好的頁面效果,裡面使用了angular . 來學習一下 angular 。
參考官網,安裝angular-cli .
在安裝 angular-cli 前,先安裝一下node 與 npm, node中自帶npm .
在 命令視窗 使用命令
node -v
npm -v
可以檢視本地是否安裝了這兩個東東,以及他們的版本號。
第一步 下載 angular-cli:
使用命令
npm install -g @angular/cli
下載的過程比較漫長,下載好後,輸入命令 ng v, 顯示下面的圖,說明安裝成功。
下面,第二步 建立工作空間和初始應用
Angular 工作空間是開發應用的上下文環境。每個工作空間包含一些供一個或多個專案使用的檔案。每個專案都是一組由應用、庫或端到端(e2e)測試構成的檔案。
建立工作空間和初始化應用專案:
1. 執行 CLI 命令 ng new , 並提供一個名字 my-angular-app
2. ng new 會提示要把哪些特性包含在初始應用專案中。按回車接受預設值。
然後安裝angular npm 包以及其它依賴,可能花幾分鐘。
還將建立下列工作空間和初始化專案檔案:
- 一個新的工作空間,根目錄名叫 my-angular-app
- 一個初始的骨架應用專案,也叫 my-angular-app(位於src子目錄下)
- 一個端到端測試專案(位於e2e子目錄下)
- 相關的配置檔案
初始的應用專案是一個簡單的“歡迎”應用
第三步,啟動開發伺服器
Angular 包含一個開發伺服器,以便能在本地輕鬆地構建應用和啟動開發伺服器。
1. 進入工作空間目錄
2. 使用CLI命令 ng server 啟動開發伺服器,並帶上 --open 選項
ng serve 命令會自動開發伺服器,並監視檔案變化,當修改檔案是,它就會重新構建應用。
--open(或只用 -o)選項會自動開啟瀏覽器,並訪問 http://localhost:4200/
第四步,編輯一個Angular 元件
元件 是 Angular 應用中的基本構造塊。它們在螢幕上顯示資料、監聽使用者輸入,並根據這些輸入採取行動。
作為初始應用的一部分,CLI 也會建立第一個Angular 元件。它就是根元件,名叫app-root .
1. 開啟 ./src/app/app.components.ts
2. 把title 屬性改為“My First Angular App”
瀏覽器將會用修改過的標題自動重新整理。但還可以更好看。
3. 開啟 ./src/app/app.component.css 並給這個元件提供一些樣式
Done.