CLI 快速起步

使用 CLI 工具快速構(gòu)建 Angular 應(yīng)用伞广。

相比手動(dòng)的做一切事情，好的工具使應(yīng)用開發(fā)更快减拭、更易于維護(hù)区丑。

Angular-CLI 是一個(gè)命令行工具沧侥，使用它可以創(chuàng)建項(xiàng)目宴杀、添加文件，并執(zhí)行各種開發(fā)中的任務(wù)旷余，例如——測(cè)試正卧、打包跪解、部署惠遏。

在本節(jié)节吮，我們的目標(biāo)是使用 Angular-CLI 并遵循風(fēng)格指南的推薦，構(gòu)建和運(yùn)行一個(gè)超級(jí)簡(jiǎn)單的 Typescript版的 Angular 應(yīng)用翘骂，這將有益于每一個(gè) Angular 項(xiàng)目碳竟。

本章結(jié)束后，我們會(huì)通過CLI對(duì)開發(fā)過程有一個(gè)最基本的理解莹桅，并將其作為其它文檔范例以及真實(shí)應(yīng)用的基礎(chǔ)诈泼。

要完成目標(biāo)，包含下面幾個(gè)主要的步驟：

1. 配置開發(fā)環(huán)境
2. 新建項(xiàng)目及應(yīng)用的骨架
3. 啟動(dòng)應(yīng)用服務(wù)器
4. 編輯應(yīng)用

第一步：配置開發(fā)環(huán)境

在你做任何事之前岖赋，需要配置我們的開發(fā)環(huán)境唐断。

安裝 Node.js 和 npm（假如你的電腦還沒有安裝）脸甘。

通過在命終端/命令行運(yùn)行node -v和npm -v確保你運(yùn)行的版本 node 最低4.x.x斤程，npm 最低3.x.x。舊版本會(huì)產(chǎn)生錯(cuò)誤，但新版本不會(huì)沮峡。

全局安裝 Angular-CLI：

npm i -g @angular/cli

第二步：新建項(xiàng)目

打開終端窗口邢疙。

通過運(yùn)行下面的命令生成新的項(xiàng)目和應(yīng)用的骨架：

ng new my-app

請(qǐng)耐心等待疟游。它需要時(shí)間來配置新項(xiàng)目痕支，大多數(shù)時(shí)間用來安裝 npm 包卧须。

第三步：?jiǎn)?dòng)應(yīng)用服務(wù)器

進(jìn)入項(xiàng)目目錄并啟動(dòng)服務(wù)器花嘶。

cd my-app
ng serve

ng serve命令啟動(dòng)服務(wù)器，并監(jiān)視文件车海，當(dāng)文件發(fā)生改變后重新構(gòu)建應(yīng)用侍芝。

打開瀏覽器，輸入http://localhost:4200/蚜印，顯示歡迎信息：app works!窄赋。

第四步：編輯我們的第一個(gè) Angular 組件

CLI 為我們創(chuàng)建第一個(gè) Angular 組件楼熄。這就是命名為app-root的根組件可岂。你可以在./src/app/app.component.ts中找到它。

打開組件文件修改title屬性稚茅，從app works!改為My First Angular App：

export class AppComponent {
  title = 'My First Angular App';
}

瀏覽器自動(dòng)刷新亚享，我們會(huì)看到修改后的標(biāo)題绘面。這很好揭璃，但我們可以讓它變得更好看一點(diǎn)。

打開src/app/cli-quickstart.component.css歼秽，給我們的組件設(shè)置些樣式哲银。

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

接下來做什么荆责？

如你所愿做院，我們完成了這個(gè)“Hello, World”應(yīng)用键耕。

現(xiàn)在，你可以開始英雄之旅教程村视，通過構(gòu)建一個(gè)小型應(yīng)用來學(xué)習(xí)如何用 Angular 構(gòu)建各種大型應(yīng)用了蚁孔。

或者杠氢，你也可以稍等一會(huì)兒鼻百，學(xué)學(xué)在這個(gè)新項(xiàng)目中的文件都是干什么用的温艇。

項(xiàng)目文件概覽

Angular-CLI 項(xiàng)目是快速構(gòu)建實(shí)驗(yàn)和企業(yè)解決方案的基礎(chǔ)中贝。

我們查看的第一個(gè)文件應(yīng)該是README.md臼朗。它有一些如何使用 CLI 命令的基礎(chǔ)信息。無論何時(shí)你想要知道更多的關(guān)于 Angu-CLI 如何工作的信息誊涯，一定要訪問Angular-CLI倉庫和Wiki暴构。

有些生成的文件可能你并不熟悉取逾，接下來我們就講講它們。

src 目錄

你的應(yīng)用存放在src目錄下误阻。所有的 Angular 組件究反、模板、樣式狼速、圖片以及你的應(yīng)用需要的任何東西都在這里。這個(gè)目錄之外的任何文件都是為了支持構(gòu)建你的應(yīng)用捷枯。

src/
 |__app/
 |   |__app.component.css
 |   |__app.component.html
 |   |__app.component.spec.ts
 |   |__app.component.ts
 |   |__app.module.ts
 |__assets/
 |   |__.gitkeep
 |__environments/
 |   |__environment.prod.ts
 |   |__environment.ts
 |__favicon.ico
 |__index.html
 |__main.ts
 |__polyfills.ts
 |__styles.css
 |__test.ts
 |__tsconfig.json

根目錄

src/目錄僅僅是項(xiàng)目根目錄之一右莱。其它文件用來幫助你構(gòu)建、測(cè)試、維護(hù)、文檔和部署應(yīng)用轴咱。
它們?cè)诟夸浵潞?code>src/目錄平級(jí)坚洽。

my-app
  |__e2e/
  |   |__app.e2e-spec.ts
  |   |__app.po.ts
  |   |__tsconfig.json
  |__node_modules/...
  |__src/...
  |__.editorconfig
  |__.gitignore
  |__angular-cli.json
  |__karma.conf.js
  |__package.json
  |__protractor.conf.js
  |__README.md
  |__tslint.json

下一步

如果你是Angular新手柴信，我們推薦繼續(xù)學(xué)習(xí)路徑套啤。

你可以跳過“環(huán)境配置”這一章，因?yàn)槟阋呀?jīng)在使用 Angular-CLI 配置好了環(huán)境随常。