Angular總結一：環境搭建

工欲善其事必先利其器，開發 Angular 項目首先要搭建環境。Angular 的環境搭建包括三個方面，開發環境 WebStorm，命令行工具 Angular CLI，以及 nodejs。

1、安裝 nodejs

進入到 nodejs 的官網 https://nodejs.org/en/ 去下載安裝包，下載慢的同窗能夠去個人百度網盤下載：https://pan.baidu.com/s/1mkilULq 密碼：uaf7

根據電腦操做系統推薦了不一樣的版本，這裏能夠選擇以上兩個中的其中一個，下載完成後是一個 msi 文件，右鍵選擇安裝

而後一路點擊Next就好了。

安裝完成後，運行cmd打開命令行工具，輸入 node -v 若是出現版本號，就說明nodejs安裝成功了。安裝nodejs的同時，nodejs 的包管理器 npm 也一併安裝完成了。

 

2、安裝 Angular 命令行工具 Angular CLI

CLI 是 Command Line Interface 的簡寫，是一種命令行接口，實現自動化開發流程，好比：ionic cli, vue cli 等，它能夠建立項目、添加文件以及執行一大堆開發外的任務，好比測試、編譯。

運行命令行 npm install -g @angular/cli 等待一下子，安裝完成後，使用 ng -v 若是出現版本號，就說明安裝成功了

 

3、安裝 WebStorm 

去官網 http://www.jetbrains.com/webstorm/ 下載最新版本，下載慢的同窗能夠去個人百度網盤下載：https://pan.baidu.com/s/1smsAPlV 密碼：jys4 https://pan.baidu.com/s/1zNHEyFB2pgFfF1ubcReGvQ

下載完成後右鍵選擇打開

一路點擊 Next 進行安裝就能夠了。

 

4、新建 Angular 項目

安裝完成須要的工具後，就可使用命令 ng new project-name 來新建一個 angular 項目了

首先進入到我想要放置項目的 G 盤，而後進入到指定的目錄 angular，在運行 ng new angular-project1 建立了一個名爲 angular-project1 的 Angular 項目

 

5、運行項目

首先進入項目 cd angular-project1， 而後運行項目 npm start，等待 webpack 進行模塊的打包

編譯完成後，可以使用 http://localhost:4200/ 查看項目(4200是默認端口，打開地址能夠在上圖中 open your browser on http://localhost:4200/ 這句話中看出)

 

6、Angular 框架目錄文件含義 

.editorconfig                         // ide 的一個配置文件
README.md                             // 該應用的一些簡介
src/app/app.component.css             // 項目的主樣式
src/app/app.component.html            // 項目的主模板
src/app/app.component.spec.ts
src/app/app.component.ts              // 項目的主組件，定義AppModule，這個根模塊會告訴Angular如何組裝該應用
src/app/app.module.ts                 // 項目的主模塊
src/assets/.gitkeep                   // 這個文件夾下你能夠放圖片等任何東西，在構建應用時，它們全都會拷貝到發佈包中。
src/environments/environment.prod.ts  // 環境配置，生產環境
src/environments/environment.ts       // 環境配置，默認環境，開發環境
src/favicon.ico                       // 每一個網站都但願本身在書籤欄中能好看一點。 請把它換成你本身的圖標。
src/index.html                        // 宿主頁面
src/main.ts                           // 整個web應用的入口點，angular經過該項目來啓動整個項目
src/polyfills.ts                      // 導入一些必要的庫,使得angular能夠在一些老版本的瀏覽器中運行
src/styles.css                        // 公共樣式
src/test.ts                           // 這是單元測試的主要入口點
src/tsconfig.app.json
src/tsconfig.spec.json
src/typings.d.ts
.angular-cli.json                     // Anguar 編譯依賴（能夠在其中引入一些 css 和 js 的庫，如 jquery, bootstrap）
e2e/app.e2e-spec.ts                   // e2e 端對端測試目錄
e2e/app.po.ts
e2e/tsconfig.e2e.json
.gitignore                            // 項目上傳到 git 時，須要忽略一些文件上傳的配置文件
karma.conf.js                         // 執行自動化測試的
package.json                          // npm 工具的配置文件，指明瞭當前這個應用所要用到的模塊，Angular 的依賴包
protractor.conf.js                    // 作自動化測試的一個配置文件
tsconfig.json                         // TypeScript 編譯器的參數
tslint.json                           // 定義 ts 文件質量檢查的一些規則