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

今天給大家介紹4種環(huán)境搭建的方法。

一：Angular-cli的安裝

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

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

需要python的環(huán)境

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

node-sass // 因為ZF導(dǎo)致，被墻掉了。

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...安裝種子文件(沒有g(shù)it的，可以自己down zip下來，然后打開cmd，執(zhí)行cnpm install)。

前置需安裝的包文件

npm install -g webpack webpack-dev-server typescript

npm install

npm start

訪問本地 localhost:3000

seed文件的優(yōu)點：

自帶簡單的路由

自帶From模塊

帶有Http請求模塊

體現(xiàn)出了Angular的核心功能

項目體量小

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

優(yōu)點：可以讓我們自由的配置webpack.config.js

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

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

手動創(chuàng)建項目（真正的勇士）

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

優(yōu)點：想要什么在項目中添加什么，非?？旖?/p>

步驟：

準(zhǔn)備工作：

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

搭建步驟

1: 創(chuàng)建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：創(chuàng)建tsconfig.json
配置了typescript編譯器的編譯參數(shù)。

{
    "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：創(chuàng)建資源文件夾
在項目根目錄下創(chuàng)建一個src文件夾
4：創(chuàng)建組件相關(guān)文件
在src目錄下創(chuàng)建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：創(chuàng)建app.module.ts文件
在Angular應(yīng)用中需要用模塊來組織一些功能緊密相關(guān)的代碼塊，每個應(yīng)用至少有一個模塊，習(xí)慣上把它叫做AppModule。在src目錄下創(chuàng)建一個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項目一般有一個入口文件，通過這個文件來串聯(lián)起整個項目。示例代碼如下：

//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：創(chuàng)建index.html宿主頁面

  
  
  

  
  


  加載中....
  

8：創(chuàng)建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...
創(chuàng)建項目和組件：

ng new (創(chuàng)建angular項目)

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

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

啟動服務(wù)：

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

測試和打包

ng test

ng build

特點跟特性：借助了 Amber Cli （負(fù)責(zé)：項目構(gòu)建、項目的組織架構(gòu)等） /  WebPack（負(fù)責(zé)：調(diào)試、打包、測試）

以Angular-cli創(chuàng)建的項目目錄為基礎(chǔ)。

e2e 文件端對端測試

src 我們主要的開發(fā)代碼的存放位置

angular-cli.json angular-cli配置

karma.config.js 單元測試文件

package.json npm包管理配置

Protractor.conf.js 這也是測試的相關(guān)文件

README.md 有我們的cli說明

Tsconfig.json 我們的Typescript配置

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

src 目錄下結(jié)構(gòu)

app 根模塊、根組件

assets 放圖片、字體文件等等

environments 配置環(huán)境。生成環(huán)境、開發(fā)環(huán)境、測試環(huán)境

index.html 單應(yīng)用的唯一頁面

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

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

styles.css 全局樣式配置

test.ts 測試用例的ts

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

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

@angular/froms 存放表單相關(guān)內(nèi)置組件與指令。

@angular/http 存放網(wǎng)絡(luò)請求相關(guān)的服務(wù)等。

@angular/router 存放路由相關(guān)

@angular/platform- 存放引導(dǎo)啟動相關(guān)工具。

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

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

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

npm install ngx-bootstrap bootstrap –save

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

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

需要掌握的內(nèi)容：

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

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

啟動時做了什么事情。

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

在main.ts中platformBrowserDynamic是動態(tài)引導(dǎo)項目加載。會把項目指引到AppModule中去。

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

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