Angular 5.0 学习2：Angular 5.0 开发环境的搭建和新建第一个ng5项目
1.安裝Node.js
在開始工作之前，我們必須設置好開發環境。
如果你的機器上還沒有Node.js?和npm，請先安裝它們。
去Node.js的官網，https://nodejs.org/en/，點擊下載按鈕，下載最新版本，直接下一步下一步安裝即可，軟件會自動寫入環境變量中，這樣就能直接在cmd命令窗口中直接使用node或npm（包管理工具）命令。
2.安裝cnpm（非必需操作）
npm的全稱是一個NodeJS包管理和分發工具，已經成為非官方的發布Node模塊（包）的標準。
由于npm安裝插件是從國外服務器下載，受網絡影響很大，可能出現異常，繼而淘寶團隊生產一個完整的npmjs.org鏡像，用cnpm代替npm,cnpm與nodejs的npm用法一致,只是在執行命令時，將npm改為cnpm。
在cmd命令窗口中輸入，然后回車
安裝完畢時候輸入cnpm -v, 出現版本號即表示安裝成功。
如果你的網速夠快的話，安裝cnpm的的操作為非必需操作。筆者曾經使用cnpm下載一個ng5項目的依賴文件，在開發的時候沒有影響，但在使用ng build --prod時出錯，至今也不知道是什么問題。所以下面的操作都以npm為準。
3.安裝 Angular CLI
在cmd輸入下面的命令全局安裝 Angular CLI 。
npm install -g @angular/cli之后輸入ng -v，出現版本號即安裝成功，Angular CLI的版本號在1.5以上，則新建出來的項目是Angular 5.0版本。
ng即為angular的簡稱。
4.安裝IDE
集成開發環境（IDE，Integrated Development Environment ）是用于提供程序開發環境的應用程序，一般包括代碼編輯器、編譯器、調試器和圖形用戶界面等工具。集成了代碼編寫功能、分析功能、編譯功能、調試功能等一體化的開發軟件服務套。所有具備這一特性的軟件或者軟件套（組）都可以叫集成開發環境。
Angular IDE by Webclipse
intellij idea
Visual Studio Code
webstorm
請選擇一種自己喜歡和熟悉的IDE，這會提升你的工作效率。筆者的IDE是 webstorm。
5.創建新項目
打開終端窗口。
運行下列命令來生成一個新項目以及應用的骨架代碼：
ng new my-appmy-app是項目的名稱,可以隨意定義。
請耐心等待。 創建新項目需要花費很多時間，大多數時候都是在安裝那些npm包，大概是200多M左右。進入項目目錄，并啟動服務器。
cd my-app ng serve --openng serve命令會啟動開發服務器，監聽文件變化，并在修改這些文件時重新構建此應用。
使用--open（或-o）參數可以自動打開瀏覽器并訪問http://localhost:4200/。
本應用會用一條消息來跟你打招呼：
6.編輯我們的第一個Angular組件
這個CLI為我們創建了第一個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'; }瀏覽器會自動刷新，而我們會看到修改之后的標題。不錯，不過它還可以更好看一點。
打開 src/app/app.component.css 并給這個組件設置一些樣式。
src/app/app.component.css：
h1 {color: #369;font-family: Arial, Helvetica, sans-serif;font-size: 250%; }
編輯我們的第一個Angular組件成功！
7.項目文件概覽
Angular CLI項目是做快速試驗和開發企業解決方案的基礎。
你首先要看的文件是README.md。 它提供了一些如何使用CLI命令的基礎信息。
7.1 src文件夾
你的應用代碼位于src文件夾中。 所有的Angular組件、模板、樣式、圖片以及你的應用所需的任何東西都在那里。 這個文件夾之外的文件都是為構建應用提供支持用的。
app/app.component.{ts,html,css,spec.ts}
使用HTML模板、CSS樣式和單元測試定義AppComponent組件。 它是根組件，隨著應用的成長它會成為一棵組件樹的根節點。
app/app.module.ts
定義AppModule，這個根模塊會告訴Angular如何組裝該應用。 目前，它只聲明了AppComponent。 稍后它還會聲明更多組件。
assets/*
這個文件夾下你可以放圖片等任何東西，在構建應用時，它們全都會拷貝到發布包中。
environments/*
這個文件夾中包括為各個目標環境準備的文件，它們導出了一些應用中要用到的配置變量。 這些文件會在構建應用時被替換。 比如你可能在產品環境中使用不同的API端點地址，或使用不同的統計Token參數。 甚至使用一些模擬服務。 所有這些，CLI都替你考慮到了。
favicon.ico
每個網站都希望自己在書簽欄中能好看一點。 請把它換成你自己的圖標。
index.html
這是別人訪問你的網站是看到的主頁面的HTML文件。 大多數情況下你都不用編輯它。 在構建應用時，CLI會自動把所有js和css文件添加進去，所以你不必在這里手動添加任何 <script> 或 <link> 標簽。
main.ts
這是應用的主要入口點。 使用JIT compiler編譯器編譯本應用，并啟動應用的根模塊AppModule，使其運行在瀏覽器中。 你還可以使用AOT compiler編譯器，而不用修改任何代碼 —— 只要給ng build 或 ng serve 傳入 --aot 參數就可以了。
polyfills.ts
不同的瀏覽器對Web標準的支持程度也不同。 填充庫（polyfill）能幫我們把這些不同點進行標準化。 你只要使用core-js 和 zone.js通常就夠了，不過你也可以查看瀏覽器支持指南以了解更多信息。
styles.css
這里是你的全局樣式。 大多數情況下，你會希望在組件中使用局部樣式，以利于維護，不過那些會影響你整個應用的樣式你還是需要集中存放在這里。
test.ts
這是單元測試的主要入口點。 它有一些你不熟悉的自定義配置，不過你并不需要編輯這里的任何東西。
tsconfig.{app|spec}.json
TypeScript編譯器的配置文件。tsconfig.app.json是為Angular應用準備的，而tsconfig.spec.json是為單元測試準備的。
7.2 根目錄
src/文件夾是項目的根文件夾之一。 其它文件是用來幫助你構建、測試、維護、文檔化和發布應用的。它們放在根目錄下，和src/平級。
e2e/
在e2e/下是端到端（end-to-end）測試。 它們不在src/下，是因為端到端測試實際上和應用是相互獨立的，它只適用于測試你的應用而已。 這也就是為什么它會擁有自己的tsconfig.json。
node_modules/
Node.js創建了這個文件夾，并且把package.json中列舉的所有第三方模塊都放在其中。
.angular-cli.json
Angular CLI的配置文件。 在這個文件中，我們可以設置一系列默認值，還可以配置項目編譯時要包含的那些文件。 要了解更多，請參閱它的官方文檔。
.editorconfig
給你的編輯器看的一個簡單配置文件，它用來確保參與你項目的每個人都具有基本的編輯器配置。 大多數的編輯器都支持.editorconfig文件，詳情參見 http://editorconfig.org 。
.gitignore
一個Git的配置文件，用來確保某些自動生成的文件不會被提交到源碼控制系統中。
karma.conf.js
給Karma的單元測試配置，當運行ng test時會用到它。
package.json
npm配置文件，其中列出了項目使用到的第三方依賴包。 你還可以在這里添加自己的自定義腳本。
protractor.conf.js
給Protractor使用的端到端測試配置文件，當運行ng e2e的時候會用到它。
README.md
項目的基礎文檔，預先寫入了CLI命令的信息。 別忘了用項目文檔改進它，以便每個查看此倉庫的人都能據此構建出你的應用。
tsconfig.json
TypeScript編譯器的配置，你的IDE會借助它來給你提供更好的幫助。
tslint.json
給TSLint和Codelyzer用的配置信息，當運行ng lint時會用到。 Lint功能可以幫你保持代碼風格的統一。
總結
以上是生活随笔為你收集整理的Angular 5.0 学习2：Angular 5.0 开发环境的搭建和新建第一个ng5项目的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 多迪技术总监揭秘：PHP为什么是世界上最
- 下一篇： Git上传项目到github