Angular CLI 建立你的第一個 Angular 示例程式
第一步:安裝 Angular CLI
你要使用 Angular CLI 來建立專案、建立應用和庫程式碼,並執行多種開發任務,比如測試、打包和釋出。
全域性安裝 Angular CLI。
要想使用 npm
來安裝 CLI,請開啟終端/控制檯視窗,並輸入下列命令:
npm install -g @angular/cli
第二步:建立一個工作區和初始化應用
Angular 工作區 就是你開發應用的上下文環境。 每個工作區包含一些供一個或多個專案使用的檔案。 每個專案都是一組由應用、庫或端到端(e2e)測試構成的檔案。
希望建立工作區和初始化應用專案:
- 執行 CLI 命令
ng new
,並提供一個名字my-app
,如下所示:ng new my-app ng new
會提示你要把哪些特性包含在初始的應用專案中。請按回車鍵接受預設值。
Angular CLI 會安裝必要的 Angular npm 包及其它依賴。這可能要花幾分鐘。
還將建立下列工作區和初始專案檔案:
- 一個新的工作區,根目錄名叫
my-app
- 一個初始的骨架應用專案,也叫
my-app
(但位於src
子目錄下) - 一個端到端測試專案(位於
e2e
子目錄下) - 相關的配置檔案
初始的應用專案是一個簡單的 "歡迎" 應用,隨時可以執行它。
第三步:啟動開發伺服器
Angular 包含一個開發伺服器,以便你能輕易地在本地構建應用和啟動開發伺服器。
- 進入工作區目錄(
my-app
)。 - 使用 CLI 命令
ng serve
啟動開發伺服器,並帶上--open
選項。cd my-app
ng serve --open
ng serve
命令會自動啟動伺服器,並監視你的檔案變化,當你修改這些檔案時,它就會重新構建應用。
--open
(或只用 -o
)選項會自動開啟瀏覽器,並訪問 ://localhost:4200/
。
如果因為某些原因,你計算機中的 4200 埠被佔用了,你可能希望你的這個應用在不同的埠上被啟動。
你可以在你的啟動命令上新增一個引數 --port,將上面的 ng serve --open
修改為 ng serve --open --port 4100
, 這個命令將會對你的第一個 Angular 專案進行編譯後部署啟動,在啟動完成後將會自動在瀏覽器上開啟連結,你應用伺服器部署的埠為 4100。
看,你的應用正在使用一條訊息歡迎你:
第四步:編輯你的第一個 Angular 元件
元件 是 Angular 應用中的基本構造塊。 它們在螢幕上顯示資料、監聽使用者輸入,並根據這些輸入採取行動。
作為初始應用的一部分,CLI 也會為你建立第一個 Angular 元件。它就是根元件,名叫 app-root
。
開啟./src/app/app.component.ts
將 title
屬性從'my-app'
修改為'My First Angular App'
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'My First Angular App!'; }
瀏覽器將會用修改過的標題自動重新整理。
很不錯,但還可以更好看。
開啟 ./src/app/app.component.css
檔案,並給這個元件提供一些樣式。h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; }
看起來很不錯!
根據版本的不同,我們在初始化的時候,發現 .css 檔案的字尾名已經使用 styl 字尾名了。
比如說在整理示例的程式碼中,你需要修改的檔名字為 app.component.css,但是在你的檔案系統中,你可能只能知道 app.component.styl 這個檔案。