首先，Angular2 與 Angular1.x 版本沒(méi)有多大關(guān)系，甚至可以說(shuō)是兩個(gè)完全不一樣的框架，故 Angular 指的是 Angular2 及以上的版本。而 Angular 與 TypeScript 的完美結(jié)合，對(duì)于一個(gè) .NET 開(kāi)發(fā)者來(lái)說(shuō)，實(shí)在是找不到不用它的理由了，更多的優(yōu)勢(shì)來(lái)不及說(shuō)了，快上車(chē)吧。

使用 angular-cli 初始化項(xiàng)目

Angular CLI 是一個(gè)用于構(gòu)建 Angular 項(xiàng)目的命令行界面工具，它可以創(chuàng)建項(xiàng)目、添加文件以及執(zhí)行一大堆開(kāi)發(fā)任務(wù)，比如測(cè)試、打包和發(fā)布。

設(shè)置開(kāi)發(fā)環(huán)境

在開(kāi)始工作之前，我們必須設(shè)置好開(kāi)發(fā)環(huán)境。

如果你的機(jī)器上還沒(méi)有 Node.js?和npm，請(qǐng)先安裝它們。

請(qǐng)先在終端/控制臺(tái)窗口中運(yùn)行命令 node -v 和 npm -v， 來(lái)驗(yàn)證一下你正在運(yùn)行 node 6.9.x 和 npm 3.x.x 以上的版本。 更老的版本可能會(huì)出現(xiàn)錯(cuò)誤，最新的版本則沒(méi)問(wèn)題。

安裝 angular-cli

npm install -g @angular/cli@latest

查看 cli 命令

ng help

生成項(xiàng)目模版

ng new zero-admin-web --style=scss cd zero-admin-web ng server --運(yùn)行

生成模版時(shí)常用的一些參數(shù)：

• --style=scss 指定使用scss，默認(rèn)使用css
• --routing=false 是否生成一個(gè)路由模塊
• --inline-style=false 是否使用內(nèi)聯(lián)樣式
• --inline-template=false 是否使用內(nèi)聯(lián)模版

啟動(dòng)開(kāi)發(fā)服務(wù)器

進(jìn)入項(xiàng)目目錄，并啟動(dòng)開(kāi)發(fā)服務(wù)器

cd zero-admin-web ng serve --open

默認(rèn)端口是4200，在瀏覽器中打開(kāi) http://localhost:4200 ，便能看到頁(yè)面成功加載，并顯示 “Welcome to app!”。

并且 ng serve 命令會(huì)啟動(dòng)文件的監(jiān)控，當(dāng)你修改這些文件時(shí)將自動(dòng)重新編譯，并刷新瀏覽器。而 --open 參數(shù)則表示是否自動(dòng)打開(kāi)瀏覽器。

生成發(fā)布包

ng build --prod

build 用來(lái)生成壓縮，優(yōu)化后的JS，用來(lái)部署到生產(chǎn)環(huán)境，默認(rèn)放成在 dist 文件夾下， --prod 用來(lái)指定發(fā)布環(huán)境。

angular-cli常用指令

可以使用ng generate 或者簡(jiǎn)寫(xiě)形式 ng g 命令來(lái)生成Angular組件：

ng generate component my-component1 #生成一個(gè)名稱(chēng)為my-component1的組件

使用 ng generate 命令時(shí)，會(huì)相對(duì)于 src/app/ 目錄來(lái)生成組件，可以在生成的時(shí)候指定多級(jí)目錄。
當(dāng)然，也支持生成指令，管道，服務(wù)，類(lèi)，接口，模塊等，如下所示：

腳手架用法

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

項(xiàng)目結(jié)構(gòu)

先看看項(xiàng)目模版里的文件結(jié)構(gòu)，以及他們都是做什么的：

┌── 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）測(cè)試代碼。 它們不在 src/ 下，是因?yàn)槎说蕉藴y(cè)試實(shí)際上和應(yīng)用是相互獨(dú)立的，它只適用于測(cè)試我們的應(yīng)用，這也是為什么它會(huì)擁有自己的 tsconfig.e2e.json 文件的原因。

src/

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

package.json

這是項(xiàng)目的基本定義文件，所有的基于nodejs的項(xiàng)目都會(huì)有一個(gè)package.json文件，里面會(huì)定義項(xiàng)目名稱(chēng)、版本、依賴(lài)的庫(kù)，以及腳本。

.angular-cli.json

Angular CLI 的配置文件。 在這個(gè)文件中，可以設(shè)置一系列默認(rèn)值，還可以配置項(xiàng)目編譯時(shí)要包含哪些文件等。

karma.conf.js

給 Karma 的單元測(cè)試配置，當(dāng)運(yùn)行 ng test 時(shí)會(huì)用到它。

protractor.conf.js

給*Protractor** 使用的端到端測(cè)試配置文件，當(dāng)運(yùn)行 ng e2e 的時(shí)候會(huì)用到它。

tsconfig.json

TypeScript 編譯器的配置，IDE會(huì)借助它來(lái)為我們提供更好的代碼提示，語(yǔ)法檢查等。

tslint.json

給 TSLint 和 Codelyzer 用的配置信息，當(dāng)運(yùn)行 ng lint 時(shí)會(huì)用到。 Lint功能可以幫我們保持代碼風(fēng)格的統(tǒng)一。

Angular Material

Material Design，中文名：材料設(shè)計(jì)語(yǔ)言，是由Google推出的全新的設(shè)計(jì)語(yǔ)言，谷歌表示，這種設(shè)計(jì)語(yǔ)言旨在為手機(jī)、平板電腦、臺(tái)式機(jī)和“其他平臺(tái)”提供更一致、更廣泛的“外觀和感覺(jué)”。

據(jù)谷歌介紹，Material Design基于“真實(shí)的觸感，靈感源自對(duì)紙和墨水的研究，” 能夠讓用戶(hù) “理解那些用于替代真實(shí)世界的可視線(xiàn)索”，“而又不違背力學(xué)原理”。另外，光線(xiàn)、表面和移動(dòng)的基本原理是表現(xiàn)對(duì)象如何移動(dòng)、交互和相互關(guān)聯(lián)地存在于空間中的關(guān)鍵。逼真的光影效果可以顯示區(qū)塊間的接縫、劃分空間、以及標(biāo)識(shí)移動(dòng)的部件。更多詳細(xì)的介紹可以看 Material 的官網(wǎng) https://material.io。

而 Angular Material 則是由 Angular 團(tuán)隊(duì)完全基于 Material 規(guī)范，完美實(shí)現(xiàn)的一套 Angular2+ UI框架。

安裝配置步驟

第一步：安裝

使用 npm 安裝 Angular Materil 和 Angular CDK

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

注： CDK是(Component Dev Kit)的縮寫(xiě)，Angular 的組件開(kāi)發(fā)包，用于分離組件開(kāi)發(fā)與 Material 的耦合（目前大多還耦合在一起），以方便使用其它風(fēng)格的設(shè)計(jì)來(lái)開(kāi)發(fā)組件。

第二步：動(dòng)畫(huà)

有一些 Angular Material 組件依賴(lài)于 Angular 動(dòng)畫(huà)模塊，以便能進(jìn)行一些高級(jí)的 transitions。如果你希望使用這些動(dòng)畫(huà)，則需要安裝 @angular/animations 模塊。

npm install --save @angular/animations

導(dǎo)入動(dòng)畫(huà)模塊

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';@NgModule({...imports: [BrowserAnimationsModule],... }) export class AppModule { }

第三步：導(dǎo)入

導(dǎo)入你想要使用的 Angular Material 模塊

import {MdButtonModule, MdCheckboxModule} from '@angular/material';@NgModule({...imports: [MdButtonModule, MdCheckboxModule],... }) export class AppModule { }

第四步：主題

定制一個(gè)主題，所有的組件都將遵循于這個(gè)主題。Angular Material 內(nèi)置了幾種主題，我們可以在 style.css 文件中導(dǎo)入：

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

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

第五步：手勢(shì)

有些組件，如（md-slide-toggel, md-slider, mdTooltip)等依賴(lài)于 HammerJS 而支持手續(xù)操作。所以，如果你需要在你的項(xiàng)目中實(shí)現(xiàn)手勢(shì)操作，則需要裝 HammerJS 加載進(jìn)來(lái)。

使用 npm 安裝：

npm install --save hammerjs

導(dǎo)入到根模塊中：

import 'hammerjs';

第六步：圖標(biāo)

如果你想通過(guò) md-icon 組件來(lái)使用經(jīng)典的 Material Design Icons 圖標(biāo)字體，則需要把 material-icons 的字體樣式加載進(jìn)來(lái)。

添加 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。

不過(guò)更加推薦的是直接使用 Google 提供的 CDN 服務(wù)（現(xiàn)在國(guó)內(nèi)訪問(wèn)速度非常快），只需要在 index.html 中添加如下引用即可：

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

總結(jié)

本文簡(jiǎn)單描述了如何使用 angular-cli 初始化項(xiàng)目和 material2 UI框架的配置，比起 webpack 那一大堆配置，angular-cli 則要簡(jiǎn)潔的多，而 angular-cli 生成的那么多文件，對(duì)于新手來(lái)說(shuō)，可能有些還是不太理解，這個(gè)在后續(xù)會(huì)慢慢介紹，不要著急，前期不應(yīng)過(guò)于執(zhí)著細(xì)節(jié)，而是要先愉快的跑起來(lái)。而下一章則會(huì)介紹一下Angular項(xiàng)目的持續(xù)集成。

轉(zhuǎn)載于:https://www.cnblogs.com/RainingNight/p/getting-started-in-angular.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。