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

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

一：Angular-cli的安裝

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

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

需要python的環(huán)境

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

node-sass // 因?yàn)閆F導(dǎo)致，被墻掉了。

node-gyp模塊可能會(huì)編譯錯(cuò)誤。

如果還遇到問題可以參考：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)點(diǎn)：

自帶簡單的路由

自帶From模塊

帶有Http請(qǐng)求模塊

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

項(xiàng)目體量小

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

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

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

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

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

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

優(yōu)點(diǎn)：想要什么在項(xiàng)目中添加什么，非常快捷

步驟：

準(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)建資源文件夾
在項(xiàng)目根目錄下創(chuàng)建一個(gè)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)的代碼塊，每個(gè)應(yīng)用至少有一個(gè)模塊，習(xí)慣上把它叫做AppModule。在src目錄下創(chuàng)建一個(gè)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項(xiàng)目一般有一個(gè)入口文件，通過這個(gè)文件來串聯(lián)起整個(gè)項(xiàng)目。示例代碼如下：

//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" }
        ]
    }
}

重點(diǎn)：一個(gè)Angular項(xiàng)目必須要有一個(gè)模塊和一個(gè)組件。

官方文檔：https://github.com/angular/an...
創(chuàng)建項(xiàng)目和組件：

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

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

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

啟動(dòng)服務(wù)：

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

測試和打包

ng test

ng build

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

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

e2e 文件端對(duì)端測試

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代碼格式校驗(yàn)文件

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

app 根模塊、根組件

assets 放圖片、字體文件等等

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

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

main.ts 整個(gè)項(xiàng)目的入口腳本

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

styles.css 全局樣式配置

test.ts 測試用例的ts

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

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

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

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

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

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

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

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

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

npm install ngx-bootstrap bootstrap –save

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

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

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

啟動(dòng)時(shí)加載哪兒頁面。（index.html）

啟動(dòng)時(shí)加載哪個(gè)腳本。（main.ts）

啟動(dòng)時(shí)做了什么事情。

第三個(gè)問題要從main.ts來分析重點(diǎn)：

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

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

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