摘要：環境搭建今天給大家介紹種環境搭建的方法。官方的地址步驟安裝種子文件沒有的，可以自己下來，然后打開，執行。使用版本為版本。存放表單相關內置組件與指令。存放網絡請求相關的服務等。等待加載完畢即可。從而實現了頁面的顯示

今天給大家介紹4種環境搭建的方法。

一：Angular-cli的安裝

官方指導文檔：www.angular.cn/guide/quickstart
請使用cnpm來安裝，或者配置淘寶鏡像。

使用原生npm安裝可能會遇到的問題：

需要python的環境

可能會依賴某些franework導致會要求安裝Visual Studio（在下文中會為大家介紹webstrom的配置）

node-sass // 因為ZF導致，被墻掉了。

node-gyp模塊可能會編譯錯誤。

如果還遇到問題可以參考：http://blog.csdn.net/zhy13087...

二：Angular-seed

Angular的種子文件，他有很多的版本，我們今天通過官方的seed來安裝。
官方的angular-seed地址：https://github.com/angular/an...
步驟：

git clone https://github.com/angular/an...安裝種子文件(沒有git的，可以自己down zip下來，然后打開cmd，執行cnpm install)。

前置需安裝的包文件

npm install -g webpack webpack-dev-server typescript

npm install

npm start

訪問本地 localhost:3000

seed文件的優點：

自帶簡單的路由

自帶From模塊

帶有Http請求模塊

體現出了Angular的核心功能

項目體量小

三：基于webpack安裝（爽歪歪的方法）

優點：可以讓我們自由的配置webpack.config.js

步驟：https://github.com/kunl/Angul...

場景：從Node轉到前端的公司或者項目推薦用這種方式

手動創建項目（真正的勇士）

條件：大神級別的使用方法（我不是大神，會簡單的介紹一下）

優點：想要什么在項目中添加什么，非常快捷

步驟：

準備工作：

在開始搭建Angular環境前，還需要做一些準備工作，包括安裝Angular所依賴的基礎環境Node.js，可以在官網(https://nodejs.org/en/download/)下載安裝，需要確認Node.js版本為v4.x.x以上，npm版本為v3.x.x以上。使用版本為node v5.11.0版本。

搭建步驟

1: 創建package.json

{
    "name": "HelloByHand",
    "version": "1.0.0",
    "license": "MIT",
    "scripts": {
        "start": "npm run server",
        "server": "webpack-dev-server –inline –colors –progress –port 3000"
    },
    "dependencies": {
        "@angular/common": "2.0.0",
        "@angular/compiler": "2.0.0",
        "@angular/core": "2.0.0",
        "@angular/platform-browser": "2.0.0",
        "@angular/platform-browser-dynamic": "2.0.0",
        "reflect-metadata": "~0.1.8",
        "core-js": "~2.4.1",
        "rxjs": "5.0.0-beta.12",
        "zone.js": "~0.6.26"
    },
    "devDependencies": {
        "@types/core-js": "~0.9.34",
        "ts-loader": "~1.2.0",
        "webpack": "~1.12.9",
        "webpack-dev-server": "~1.14.0",
        "typescript": "~2.0.0"
    }
}

2：創建tsconfig.json
配置了typescript編譯器的編譯參數。

{
    "compileOnSave": true,
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments":false,
        "noImplicitAny": true,
        "suppressExcessPropertyErrors": true,
        "typeRoots": [
            "node_modules/@types"
        ],
        "exclude": [
            "node_modules"
        ]
     }
}

3：創建資源文件夾
在項目根目錄下創建一個src文件夾
4：創建組件相關文件
在src目錄下創建app.component.ts文件以及模板文件app.component.html，示例代碼如下：

//app.component.ts
import { Component } from "@angular/core";
@Component({
    selector: "hello-world",
    templateUrl: "scr/app.component.ts"
})
export class AppComponent {}  


//app.component.html
Hello World

5：創建app.module.ts文件
在Angular應用中需要用模塊來組織一些功能緊密相關的代碼塊，每個應用至少有一個模塊，習慣上把它叫做AppModule。在src目錄下創建一個app.module.ts文件來定義AppModule，代碼如下：

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

6: 添加main.ts文件
Angular項目一般有一個入口文件，通過這個文件來串聯起整個項目。示例代碼如下：

//main.ts
import "reflect-metadata";
import "zone.js";
import { platforBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app.module";
platforBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));

7：創建index.html宿主頁面

  
  
  

  
  


  加載中....
  

8：創建webpack.config.js

//webpack.config.js
var webpack = require("webpack");
var path = require("path");

module.exports = {
    entry: "./scr/main.js"
    output: {
        filename: "./bundle.js"
    },
    resolve: {
        root: [path.join(__dirname, "scr")],
        extensions: ["", ".ts", ".js"]
    },
    module: {
        loaders: [
            { test: /.ts$/, loader: "ts-loader" }
        ]
    }
}

重點：一個Angular項目必須要有一個模塊和一個組件。

官方文檔：https://github.com/angular/an...
創建項目和組件：

ng new (創建angular項目)

ng generate (創建項目中的組件等內容)
具體操作如下圖：

http://chuantu.biz/t6/44/1505...

啟動服務：

ng serve --open (--open是在瀏覽器中打開的意思)

測試和打包

ng test

ng build

特點跟特性：借助了 Amber Cli （負責：項目構建、項目的組織架構等） /  WebPack（負責：調試、打包、測試）

以Angular-cli創建的項目目錄為基礎。

e2e 文件端對端測試

src 我們主要的開發代碼的存放位置

angular-cli.json angular-cli配置

karma.config.js 單元測試文件

package.json npm包管理配置

Protractor.conf.js 這也是測試的相關文件

README.md 有我們的cli說明

Tsconfig.json 我們的Typescript配置

Tslint.json 是我們Typescipt代碼格式校驗文件

src 目錄下結構

app 根模塊、根組件

assets 放圖片、字體文件等等

environments 配置環境。生成環境、開發環境、測試環境

index.html 單應用的唯一頁面

main.ts 整個項目的入口腳本

polyfills.ts 兼容老版本的瀏覽器

styles.css 全局樣式配置

test.ts 測試用例的ts

@angular/core 存放核心代碼，如變化監測機制、依賴注入機制、渲染等，核心功能的實現，裝飾器也會存放在這個模塊。

@angular/common 存放一些常用的內置指令和內置管道等。

@angular/froms 存放表單相關內置組件與指令。

@angular/http 存放網絡請求相關的服務等。

@angular/router 存放路由相關

@angular/platform- 存放引導啟動相關工具。

選擇File -> settings -> Languages & Frameworks -> Javascript，選擇編譯方式為ECMAScript 6。

選擇File -> settings -> Languages & Frameworks -> Javascript->Libraries ->右側面板選擇 Add ->在彈出框中選擇綠色加號，再選擇目錄 ->在彈出的窗口中選擇當前項目下的node_modules 文件夾 ->一路ok和apply。等待IDE加載完畢即可。

我們使用bootstrap的樣式，在控制層方面（bootstrap涉及到js的地方）我們使用ngx-bootstrap。
官方地址：http://valor-software.com/ngx...涉及到javascript操作的部分在這個鏈接里找解決方案。
AngularCli項目集成Bootstrap步驟：

npm install ngx-bootstrap bootstrap –save

在項目目錄下的 .angular-cli.json中的“styles”參數中添加：
"../node_modules/bootstrap/dist/css/bootstrap.min.css"

重啟項目就可以直接使用bootstrap的樣式了，例如form-group,btn…

需要掌握的內容：

啟動時加載哪兒頁面。（index.html）

啟動時加載哪個腳本。（main.ts）

啟動時做了什么事情。

第三個問題要從main.ts來分析重點：

在main.ts中platformBrowserDynamic是動態引導項目加載。會把項目指引到AppModule中去。

AppModule中的bootstrap元數據，會指定模塊的根組件也就是app.component.ts

根組件暴露出select選擇器為app-root。而index.html中加載了標簽。從而實現了頁面的顯示