Angular 小試牛刀[1]:Getting Started

首先，Angular2 與 Angular1.x 版本沒有多大關系，甚至可以說是兩個完全不一樣的框架，故 Angular 指的是 Angular2 及以上的版本。而 Angular 與 TypeScript 的完美結合，對於一個 .NET 開發者來說，實在是找不到不用它的理由了，更多的優勢來不及說了，快上車吧。

使用 angular-cli 初始化項目

Angular CLI 是一個用於構建 Angular 項目的命令行界面工具，它可以創建項目、添加文件以及執行一大堆開發任務，比如測試、打包和發布。

設置開發環境

在開始工作之前，我們必須設置好開發環境。

如果你的機器上還沒有 Node.js®和npm，請先安裝它們。

請先在終端/控制台窗口中運行命令 node -v 和 npm -v， 來驗證一下你正在運行 node 6.9.x 和 npm 3.x.x 以上的版本。 更老的版本可能會出現錯誤，最新的版本則沒問題。

安裝 angular-cli

npm install -g @angular/cli@latest

查看 cli 命令

ng help

生成項目模版

ng new zero-admin-web --style=scss
cd zero-admin-web
ng server --運行

生成模版時常用的一些參數：

• --style=scss 指定使用scss，默認使用css
• --routing=false 是否生成一個路由模塊
• --inline-style=false 是否使用內聯樣式
• --inline-template=false 是否使用內聯模版

啟動開發服務器

進入項目目錄，並啟動開發服務器

cd zero-admin-web
ng serve --open

默認端口是4200，在瀏覽器中打開 http://localhost:4200 ，便能看到頁面成功加載，並顯示 “Welcome to app!”。

並且 ng serve 命令會啟動文件的監控，當你修改這些文件時將自動重新編譯，並刷新瀏覽器。而 --open 參數則表示是否自動打開瀏覽器。

生成發布包

ng build --prod

build 用來生成壓縮，優化后的JS，用來部署到生產環境，默認放成在 dist 文件夾下， --prod 用來指定發布環境。

angular-cli常用指令

可以使用ng generate 或者簡寫形式 ng g 命令來生成Angular組件：

ng generate component my-component1 #生成一個名稱為my-component1的組件

使用 ng generate 命令時，會相對於 src/app/ 目錄來生成組件，可以在生成的時候指定多級目錄。 當然，也支持生成指令，管道，服務，類，接口，模塊等，如下所示：

腳手架	用法
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
Guard	ng g guard my-new-guard
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module

項目結構

先看看項目模版里的文件結構，以及他們都是做什么的：

┌── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.e2e.json
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   │   └── .gitkeep
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── .angular-cli.json
├── .editorconfig
├── .gitignore
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── README.md
├── tsconfig.json
└── tslint.json

e2e/

在 e2e/ 目錄中的是端到端（End-to-End）測試代碼。 它們不在 src/ 下，是因為端到端測試實際上和應用是相互獨立的，它只適用於測試我們的應用，這也是為什么它會擁有自己的 tsconfig.e2e.json 文件的原因。

src/

我們的應用代碼位於 src 文件夾中。 所有的 Angular組件、模板、樣式、圖片以及應用所需的任何東西都在這個目錄下， 這個目錄之外的文件都是為構建應用提供支持用的。

package.json

這是項目的基本定義文件，所有的基於nodejs的項目都會有一個package.json文件，里面會定義項目名稱、版本、依賴的庫，以及腳本。

.angular-cli.json

Angular CLI 的配置文件。 在這個文件中，可以設置一系列默認值，還可以配置項目編譯時要包含哪些文件等。

karma.conf.js

給 Karma 的單元測試配置，當運行 ng test 時會用到它。

protractor.conf.js

給*Protractor** 使用的端到端測試配置文件，當運行 ng e2e 的時候會用到它。

tsconfig.json

TypeScript 編譯器的配置，IDE會借助它來為我們提供更好的代碼提示，語法檢查等。

tslint.json

給 TSLint 和 Codelyzer 用的配置信息，當運行 ng lint 時會用到。 Lint功能可以幫我們保持代碼風格的統一。

Angular Material

Material Design，中文名：材料設計語言，是由Google推出的全新的設計語言，谷歌表示，這種設計語言旨在為手機、平板電腦、台式機和“其他平台”提供更一致、更廣泛的“外觀和感覺”。

據谷歌介紹，Material Design基於“真實的觸感，靈感源自對紙和墨水的研究，” 能夠讓用戶 “理解那些用於替代真實世界的可視線索”，“而又不違背力學原理”。另外，光線、表面和移動的基本原理是表現對象如何移動、交互和相互關聯地存在於空間中的關鍵。逼真的光影效果可以顯示區塊間的接縫、划分空間、以及標識移動的部件。更多詳細的介紹可以看 Material 的官網 https://material.io。

而 Angular Material 則是由 Angular 團隊完全基於 Material 規范，完美實現的一套 Angular2+ UI框架。

安裝配置步驟

第一步：安裝

使用 npm 安裝 Angular Materil 和 Angular CDK

npm install --save @angular/material @angular/cdk

注： CDK是(Component Dev Kit)的縮寫，Angular 的組件開發包，用於分離組件開發與 Material 的耦合（目前大多還耦合在一起），以方便使用其它風格的設計來開發組件。

第二步：動畫

有一些 Angular Material 組件依賴於 Angular 動畫模塊，以便能進行一些高級的 transitions。如果你希望使用這些動畫，則需要安裝 @angular/animations 模塊。

npm install --save @angular/animations

導入動畫模塊

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class AppModule { }

第三步：導入

導入你想要使用的 Angular Material 模塊

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  ...
  imports: [MdButtonModule, MdCheckboxModule],
  ...
})
export class AppModule { }

第四步：主題

定制一個主題，所有的組件都將遵循於這個主題。Angular Material 內置了幾種主題，我們可以在 style.css 文件中導入：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

更多主題的介紹以及如何自定義主題，則可以參考 theming guide。

第五步：手勢

有些組件，如（md-slide-toggel, md-slider, mdTooltip)等依賴於 HammerJS 而支持手續操作。所以，如果你需要在你的項目中實現手勢操作，則需要裝 HammerJS 加載進來。

使用 npm 安裝：

npm install --save hammerjs

導入到根模塊中：

import 'hammerjs';

第六步：圖標

如果你想通過 md-icon 組件來使用經典的 Material Design Icons 圖標字體，則需要把 material-icons 的字體樣式加載進來。

添加 material-icons.css

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../fonts/MaterialIcons-Regular.woff2) format('woff2'), /* Super Modern Browsers */
    url(../fonts/MaterialIcons-Regular.woff) format('woff'), /* Super Modern Browsers */
    url(../fonts/MaterialIcons-Regular.ttf) format('truetype'), /* Safari, Android, iOS */
    url(../fonts/MaterialIcons-Regular.svg) format('svg'); /* Legacy iOS */
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

然后在 index.html 中引用 material-icons.css

<!-- Icons -->
<link href="assets/css/material-icons.css" rel="stylesheet">

字體文件下載地址為：material-design-icons。

不過更加推薦的是直接使用 Google 提供的 CDN 服務（現在國內訪問速度非常快），只需要在 index.html 中添加如下引用即可：

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

總結

本文簡單描述了如何使用 angular-cli 初始化項目和 material2 UI框架的配置，比起 webpack 那一大堆配置，angular-cli 則要簡潔的多，而 angular-cli 生成的那么多文件，對於新手來說，可能有些還是不太理解，這個在后續會慢慢介紹，不要着急，前期不應過於執着細節，而是要先愉快的跑起來。而下一章則會介紹一下Angular項目的持續集成。