Angular2 從搭建環境到開發

Angular2 的發佈帶來了一陣熱議，好久以前就在籌備了，當時的官方答覆就是完全推翻重寫，問世以後你們的呼聲就是學習成本過高，雖然去掉了 1.x 裏的一部分概念，可是加進了 typescript，雖然不強制使用，可是我推薦你們都試一試，畢竟這次改版是谷歌和微軟兩你們的產物。

對於會部署環境的能夠嘗試本文最後一節加入 Angular material2 ，我的認爲對高度個性化的項目不推薦使用，對企業級的 CMS 省去了寫樣式的時間，直接開始正文。

Angular-CLI

說到 cli 你們不陌生，沒出一個框架都會有對應的 cli ，俗稱腳手架。angular2 自己提供了起步項目 angular2-quickstart，我嘗試了一下，發現不是很好用，其它的大部分擴展須要自行安裝，以後看了一下 angular-cli 部署簡單易用，還提供了快捷搭建項目的目錄。

Github地址： https://github.com/angular/an...

我就簡單說下 Github 裏的文檔吧，細部的你們擴展閱讀。

安裝

首先，最好先升級 node 到 6.x 能夠避免 node 版本太低帶來的沒必要要的麻煩。

npm install -g angular-cli

用法

ng --help

查看全部用法

建立本地開發環境生成和運行angular2項目

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

PROJECT_NAME 是你本身的項目名

部署成功後不報錯的狀況下到瀏覽器 http://localhost:4200/，修改項目中文件後會自動部署

您能夠配置默認的 HTTP 端口和一個 LiveReload server 用 --， 形如：

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

生成組件、指令、管道和服務

命令以 ng generate 開頭，能夠縮寫爲 ng g，下面給出建立 component 的幾種方式。

ng generate component my-new-component
ng g component my-new-component # using the alias

# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ../newer-cmp
# your component will be generated in src/app/newer-cmp

下表裏是全部的命令：

Scaffold	Usage
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pipe	ng g pipe my-new-pipe
Service	ng g service my-new-service
Class	ng g class my-new-class
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module

建立路由

這裏 cli 暫時禁用了建立路由，新的路由生成器即將到來，您能夠在這裏閱讀新路由器的官方文檔：https://angular.io/docs/ts/la...

創建一個 build

ng build

會生成到 dist/ 目錄下，其它關於測試，配置文件請你們去 Github 仔細閱讀，這裏只給最基本的搭建流程。

組件實戰

看到這你可能已經開始嘗試了，建立項目的步驟相信你們參照上文能夠輕鬆解決，這裏我先嚐試建立一個 component，命令以下。

ng g component nav

這裏我建立了一個 nav 組件。執行成功後，後臺會自動部署。咱們看一下文件目錄有什麼改變

多了一個叫作 nav 的文件夾，看一看文件目錄

咱們發現與項目建立時自帶的 app component 目錄結構相同，內容也大同小異，你們能夠嘗試去建立一個本身的組件，組件的樣式能夠去對應的 css 文件中修改。

這時個人 app.module.ts 變成了以下

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';

@NgModule({
  declarations: [
    AppComponent,
    NavComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

這裏不難看出全局自動引入了 nav.component 組件。咱們如今關心的問題是組件之間的引用和數據傳輸，這裏爲了簡單起見，只給引入的方法，而數據傳輸、路由機制這裏不作解釋你們自行官網。

下面說一下 app 內引入 nav 組件，只須要改變 app.component.html 以下。

<h1 class="title">
  {{title}}
</h1>
<app-nav></app-nav>

這裏的 class 在對應的 app.component.css 以下

.title {
  font-size: 100px;
}

這時頁面自動刷新字號變大 ，那麼這裏的 app-nav 標籤從哪裏獲得的呢？

咱們去 nav.component.ts 裏看一眼

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

這裏的 selector: 'app-nav' 說明咱們的選擇器選擇的是 app-nav 標籤，一樣的能夠經過 [app-nav] 選擇屬性。

注：這裏 selector 相似 css 中的選擇器，你們也能夠根據 1.x 中的 directive 來理解這裏的組件

此時頁面會呈現成這樣

好，到這裏簡單的組件引用已經實現。

引入 Angular material2

文章開頭已經闡述了引入 Angular material2 的優勢，用過其它組件樣式框架的都明白。

安裝命令

npm install --save @angular/material

在 src/app/app.module.ts 中引入框架

import { MaterialModule } from '@angular/material';
// other imports
@NgModule({
  imports: [MaterialModule.forRoot()],
  ...
})
export class PizzaPartyAppModule { }

引入核心和主體風格，較 Angular material 1.x 的改進在於能夠選擇不一樣的色系。具體看文檔連接：https://github.com/angular/ma...

咱們這裏用的是 Angular CLI 這裏又能夠鑽空子啦，添加下面一行到 style.css，注意是 src 目錄下的文件

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

deeppurple-amber 主題顏色是可變的，具體看上文的文檔連接。

到這裏一直打開控制檯（是個好習慣）的朋友會發現相似下面的報錯。

client:49 [default] J:\workspace\angular2\ts\epimss\node_modules\@angular2-material\slide-toggle\slide-toggle.d.ts:67:19
Cannot find name 'HammerInput'.

client:49 [default] J:\workspace\angular2\ts\epimss\node_modules\@angular2-material\core\gestures\MdGestureConfig.d.ts:4:39
Cannot find name 'HammerManager'.

文檔也給出瞭解釋，由於框架中 md-slide-toggle 和 md-slider 兩個組件依賴外部第三方組件 HammerJS 須要額外的配置。

咱們不急着用文檔給的 npm 或引入 cdn 路徑，由於親測仍是會報錯，可能我引入方式有誤，爲了你們少走彎路直接給親測有效的方法

咱們先去命令行工具運行 npm i --save-dev @types/hammerjs

而後編輯 tsconfig.json 文件將 hammerjs 添加到 types 下

"types": [
  "jasmine", "hammerjs"
]

到這裏發現頁面自動刷新後報錯消失了，若是須要字體圖標能夠在 src/index.html 中引入

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

目前爲止，整個 Angular material2 已經整裝待發。所有語法看這裏：https://github.com/angular/ma...

咱們嘗試着添加多個按鈕組件測試一下，修改 app.component.html 文件，完整代碼以下

<h1 class="title">
  {{title}}
</h1>
<app-nav></app-nav>

<button md-button>FLAT</button>
<button md-raised-button>RAISED</button>
<button md-icon-button>
  <md-icon class="md-24">favorite</md-icon>
</button>
<button md-fab>
  <md-icon class="md-24">add</md-icon>
</button>
<button md-mini-fab>
  <md-icon class="md-24">add</md-icon>
</button>
<br/>
<br/>

<button md-raised-button color="primary">PRIMARY</button>
<button md-raised-button color="accent">ACCENT</button>
<button md-raised-button color="warn">WARN</button>
<br/>
<br/>

<button md-button disabled>OFF</button>
<button md-raised-button [disabled]="isDisabled">OFF</button>
<button md-mini-fab [disabled]="isDisabled"><md-icon>check</md-icon></button>

沒問題這裏手懶不寫佈局樣式了，直接給 br 換行你們方便看些，待頁面部署完成後咱們會看到如下效果

炫酷的組件，更多組件語法參考上面給的連接，到這裏相信你們學習 angular2 的信心倍增，真對已有組件能夠完成快速開發，下一步就是你們去 Angular2 官網看其它概念的時候啦，處理數據實現與後端對接。項目上線，大功告成。

總結

orange 最近也是在學習新技術，更底層框架方面的知識還再學習，當今前端框架層出不窮，不要盲從，要根據公司需求和員工的工做經驗選擇框架，真說到性能方面哪一個框架快的話，我雖然沒測試過，但我肯定 React、Vue、Angular2 幾個之間相差無幾，除非在實現的時候代碼存在問題，由於這幾個框架都通過了大型項目的考驗。

文章出自 orange 的 我的博客 http://orangexc.xyz/