首先，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項目的持續集成。

轉載于:https://www.cnblogs.com/RainingNight/p/getting-started-in-angular.html

總結

以上是生活随笔為你收集整理的Angular 小试牛刀[1]:Getting Started的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。