1.安裝Node.js

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

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

2.安裝cnpm（非必需操作）

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

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

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

3.安裝 Angular CLI

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

npm install -g @angular/cli

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

4.安裝IDE

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

5.創(chuàng)建新項(xiàng)目

打開(kāi)終端窗口。

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

ng new my-app

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

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

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

cd my-app ng serve --open

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

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

6.編輯我們的第一個(gè)Angular組件

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

打開(kāi)這個(gè)組件文件，并且把title屬性從 Welcome to app!! 改為 Welcome to My First Angular App!! ：

src/app/app.component.ts:

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

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

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

src/app/app.component.css：

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

編輯我們的第一個(gè)Angular組件成功！

7.項(xiàng)目文件概覽

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

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

7.1 src文件夾

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

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

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

assets/*
這個(gè)文件夾下你可以放圖片等任何東西，在構(gòu)建應(yīng)用時(shí)，它們?nèi)紩?huì)拷貝到發(fā)布包中。

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

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

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

main.ts
這是應(yīng)用的主要入口點(diǎn)。 使用JIT compiler編譯器編譯本應(yīng)用，并啟動(dòng)應(yīng)用的根模塊AppModule，使其運(yùn)行在瀏覽器中。 你還可以使用AOT compiler編譯器，而不用修改任何代碼 —— 只要給ng build 或 ng serve 傳入 --aot 參數(shù)就可以了。

polyfills.ts
不同的瀏覽器對(duì)Web標(biāo)準(zhǔn)的支持程度也不同。 填充庫(kù)（polyfill）能幫我們把這些不同點(diǎn)進(jìn)行標(biāo)準(zhǔn)化。 你只要使用core-js 和 zone.js通常就夠了，不過(guò)你也可以查看瀏覽器支持指南以了解更多信息。

styles.css
這里是你的全局樣式。 大多數(shù)情況下，你會(huì)希望在組件中使用局部樣式，以利于維護(hù)，不過(guò)那些會(huì)影響你整個(gè)應(yīng)用的樣式你還是需要集中存放在這里。

test.ts
這是單元測(cè)試的主要入口點(diǎn)。 它有一些你不熟悉的自定義配置，不過(guò)你并不需要編輯這里的任何東西。

tsconfig.{app|spec}.json
TypeScript編譯器的配置文件。tsconfig.app.json是為Angular應(yīng)用準(zhǔn)備的，而tsconfig.spec.json是為單元測(cè)試準(zhǔn)備的。

7.2 根目錄

src/文件夾是項(xiàng)目的根文件夾之一。 其它文件是用來(lái)幫助你構(gòu)建、測(cè)試、維護(hù)、文檔化和發(fā)布應(yīng)用的。它們放在根目錄下，和src/平級(jí)。

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

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

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

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

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

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

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

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

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

tsconfig.json
TypeScript編譯器的配置，你的IDE會(huì)借助它來(lái)給你提供更好的幫助。

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

總結(jié)

以上是生活随笔為你收集整理的Angular 5.0 学习2：Angular 5.0 开发环境的搭建和新建第一个ng5项目的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。