摘要：之后輸入，出現(xiàn)版本號即安裝成功，的版本號在以上，則新建出來的項(xiàng)目是版本。所有具備這一特性的軟件或者軟件套組都可以叫集成開發(fā)環(huán)境。創(chuàng)建新項(xiàng)目打開終端窗口。是為應(yīng)用準(zhǔn)備的，而是為單元測試準(zhǔn)備的。給的單元測試配置，當(dāng)運(yùn)行時會用到它。

在開始工作之前，我們必須設(shè)置好開發(fā)環(huán)境。
如果你的機(jī)器上還沒有Node.js?和npm，請先安裝它們。
去Node.js的官網(wǎng)，https://nodejs.org/en/，點(diǎn)擊下載按鈕，下載最新版本，直接下一步下一步安裝即可，軟件會自動寫入環(huán)境變量中，這樣就能直接在cmd命令窗口中直接使用node或npm（包管理工具）命令。

請先在終端/控制臺窗口中運(yùn)行命令 node -v 和 npm -v， 來驗(yàn)證一下你正在運(yùn)行 node 6.9.x 和 npm 3.x.x 以上的版本。 更老的版本可能會出現(xiàn)錯誤，更新的版本則沒問題。

npm的全稱是一個NodeJS包管理和分發(fā)工具，已經(jīng)成為非官方的發(fā)布Node模塊（包）的標(biāo)準(zhǔn)。
由于npm安裝插件是從國外服務(wù)器下載，受網(wǎng)絡(luò)影響很大，可能出現(xiàn)異常，繼而淘寶團(tuán)隊(duì)生產(chǎn)一個完整的npmjs.org鏡像，用cnpm代替npm,cnpm與nodejs的npm用法一致,只是在執(zhí)行命令時，將npm改為cnpm。
在cmd命令窗口中輸入，然后回車

npm install cnpm -g --registry=https://registry.npm.taobao.org

安裝完畢時候輸入cnpm -v, 出現(xiàn)版本號即表示安裝成功。
如果你的網(wǎng)速夠快的話，安裝cnpm的的操作為非必需操作。筆者曾經(jīng)使用cnpm下載一個ng5項(xiàng)目的依賴文件，在開發(fā)的時候沒有影響，但在使用ng build --prod時出錯，至今也不知道是什么問題。所以下面的操作都以npm為準(zhǔn)。

在cmd輸入下面的命令全局安裝 Angular CLI 。

npm install -g @angular/cli

之后輸入ng -v，出現(xiàn)版本號即安裝成功，Angular CLI的版本號在1.5以上，則新建出來的項(xiàng)目是Angular 5.0版本。
ng即為angular的簡稱。

集成開發(fā)環(huán)境（IDE，Integrated Development Environment ）是用于提供程序開發(fā)環(huán)境的應(yīng)用程序，一般包括代碼編輯器、編譯器、調(diào)試器和圖形用戶界面等工具。集成了代碼編寫功能、分析功能、編譯功能、調(diào)試功能等一體化的開發(fā)軟件服務(wù)套。所有具備這一特性的軟件或者軟件套（組）都可以叫集成開發(fā)環(huán)境。
Angular IDE by Webclipse
intellij idea
Visual Studio Code
webstorm
請選擇一種自己喜歡和熟悉的IDE，這會提升你的工作效率。筆者的IDE是 webstorm。

打開終端窗口。

運(yùn)行下列命令來生成一個新項(xiàng)目以及應(yīng)用的骨架代碼：

ng new my-app

my-app是項(xiàng)目的名稱,可以隨意定義。

請耐心等待。 創(chuàng)建新項(xiàng)目需要花費(fèi)很多時間，大多數(shù)時候都是在安裝那些npm包，大概是200多M左右。

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

cd my-app
ng serve --open

ng serve命令會啟動開發(fā)服務(wù)器，監(jiān)聽文件變化，并在修改這些文件時重新構(gòu)建此應(yīng)用。
使用--open（或-o）參數(shù)可以自動打開瀏覽器并訪問http://localhost:4200/。

本應(yīng)用會用一條消息來跟你打招呼：

這個CLI為我們創(chuàng)建了第一個Angular組件。 它就是名叫app-root的根組件。 你可以在./src/app/app.component.ts目錄下找到它。

打開這個組件文件，并且把title屬性從 Welcome to app!! 改為 Welcome to My First Angular App!! ：

src/app/app.component.ts:

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

瀏覽器會自動刷新，而我們會看到修改之后的標(biāo)題。不錯，不過它還可以更好看一點(diǎn)。

打開 src/app/app.component.css 并給這個組件設(shè)置一些樣式。

src/app/app.component.css：

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

編輯我們的第一個Angular組件成功！

Angular CLI項(xiàng)目是做快速試驗(yàn)和開發(fā)企業(yè)解決方案的基礎(chǔ)。

你首先要看的文件是README.md。 它提供了一些如何使用CLI命令的基礎(chǔ)信息。

你的應(yīng)用代碼位于src文件夾中。 所有的Angular組件、模板、樣式、圖片以及你的應(yīng)用所需的任何東西都在那里。 這個文件夾之外的文件都是為構(gòu)建應(yīng)用提供支持用的。

app/app.component.{ts,html,css,spec.ts}
使用HTML模板、CSS樣式和單元測試定義AppComponent組件。 它是根組件，隨著應(yīng)用的成長它會成為一棵組件樹的根節(jié)點(diǎn)。

app/app.module.ts
定義AppModule，這個根模塊會告訴Angular如何組裝該應(yīng)用。 目前，它只聲明了AppComponent。 稍后它還會聲明更多組件。

assets/*
這個文件夾下你可以放圖片等任何東西，在構(gòu)建應(yīng)用時，它們?nèi)紩截惖桨l(fā)布包中。

environments/*
這個文件夾中包括為各個目標(biāo)環(huán)境準(zhǔn)備的文件，它們導(dǎo)出了一些應(yīng)用中要用到的配置變量。 這些文件會在構(gòu)建應(yīng)用時被替換。 比如你可能在產(chǎn)品環(huán)境中使用不同的API端點(diǎn)地址，或使用不同的統(tǒng)計(jì)Token參數(shù)。 甚至使用一些模擬服務(wù)。 所有這些，CLI都替你考慮到了。

favicon.ico
每個網(wǎng)站都希望自己在書簽欄中能好看一點(diǎn)。 請把它換成你自己的圖標(biāo)。

index.html
這是別人訪問你的網(wǎng)站是看到的主頁面的HTML文件。 大多數(shù)情況下你都不用編輯它。 在構(gòu)建應(yīng)用時，CLI會自動把所有js和css文件添加進(jìn)去，所以你不必在這里手動添加任何

e2e/
在e2e/下是端到端（end-to-end）測試。 它們不在src/下，是因?yàn)槎说蕉藴y試實(shí)際上和應(yīng)用是相互獨(dú)立的，它只適用于測試你的應(yīng)用而已。 這也就是為什么它會擁有自己的tsconfig.json。

node_modules/
Node.js創(chuàng)建了這個文件夾，并且把package.json中列舉的所有第三方模塊都放在其中。

.angular-cli.json
Angular CLI的配置文件。 在這個文件中，我們可以設(shè)置一系列默認(rèn)值，還可以配置項(xiàng)目編譯時要包含的那些文件。 要了解更多，請參閱它的官方文檔。

.editorconfig
給你的編輯器看的一個簡單配置文件，它用來確保參與你項(xiàng)目的每個人都具有基本的編輯器配置。 大多數(shù)的編輯器都支持.editorconfig文件，詳情參見 http://editorconfig.org 。

.gitignore
一個Git的配置文件，用來確保某些自動生成的文件不會被提交到源碼控制系統(tǒng)中。

karma.conf.js
給Karma的單元測試配置，當(dāng)運(yùn)行ng test時會用到它。

package.json
npm配置文件，其中列出了項(xiàng)目使用到的第三方依賴包。 你還可以在這里添加自己的自定義腳本。

protractor.conf.js
給Protractor使用的端到端測試配置文件，當(dāng)運(yùn)行ng e2e的時候會用到它。

README.md
項(xiàng)目的基礎(chǔ)文檔，預(yù)先寫入了CLI命令的信息。 別忘了用項(xiàng)目文檔改進(jìn)它，以便每個查看此倉庫的人都能據(jù)此構(gòu)建出你的應(yīng)用。

tsconfig.json
TypeScript編譯器的配置，你的IDE會借助它來給你提供更好的幫助。

tslint.json
給TSLint和Codelyzer用的配置信息，當(dāng)運(yùn)行ng lint時會用到。 Lint功能可以幫你保持代碼風(fēng)格的統(tǒng)一。