Angular 版本

Angular 4.0并不是在原有基礎(chǔ)上改的，而是一個(gè)完全重寫的版本，不同于Angular 1.5。
Angular 2.0之前的版本，統(tǒng)一稱為AngularJs。Angular 2.0之后的版本就稱之為Angular。

第一章：簡介

1、AngularJs的優(yōu)點(diǎn)

• 模板功能強(qiáng)大（自帶AngularJs 指令，擁有強(qiáng)大數(shù)據(jù)雙向綁定能力，減少J Query對(duì)dom的操作以及代碼量）。
• 比較完善的前端MVC框架（包含模板、數(shù)據(jù)雙向綁定、路由、模塊化、服務(wù)、過濾器、依賴注入等等所有的功能）。
• 引入了Java的一些概念（例如依賴注入和單元測試，能夠很容易寫出復(fù)用代碼）。

2、AngularJs的一些問題

• 性能（對(duì)于臟數(shù)據(jù)的檢查的提升）
• 路由（整個(gè)框架的核心模塊）
• 作用域（把執(zhí)行環(huán)境和瀏覽器的環(huán)境分開）
• 表單驗(yàn)證
• Javascript語言
• 學(xué)習(xí)成本。需要學(xué)習(xí)大量的概念。
  AngularJs的核心就是組件，且很容易編寫。

3、AngularJs的新特性

• 全新的命令行工具AngularCLI。提供很多方面的功能，比如生成一個(gè)新項(xiàng)目的骨架，運(yùn)行自動(dòng)化單元測試等。
• 服務(wù)器端渲染。可以使原本需要10S才能加載完的單頁應(yīng)用在1S之內(nèi)加載完成，并且可以對(duì)單頁應(yīng)用進(jìn)行優(yōu)化。
• 移動(dòng)和桌面的兼容。可以創(chuàng)建跨平臺(tái)的手機(jī)應(yīng)用。

4、AngularJs架構(gòu)

AngularJs是典型的MVC架構(gòu)。

• 如下是AngularJs架構(gòu)。
  用戶看到的是視圖，也就是html等內(nèi)容，用戶會(huì)和視圖進(jìn)行一些交互，比如點(diǎn)擊鼠標(biāo)，或者輸入一些數(shù)據(jù)，這些動(dòng)作會(huì)被視圖（view）傳遞給控制器（controller），控制器會(huì)根據(jù)用戶的輸入去修改或查詢底層的數(shù)據(jù)模型，這時(shí)，底層的數(shù)據(jù)模型可能會(huì)與服務(wù)器產(chǎn)生一些數(shù)據(jù)交互，以獲取或更新數(shù)據(jù)信息，然后底層數(shù)據(jù)模型的這些改變，會(huì)通過數(shù)據(jù)綁定機(jī)制反饋到視圖層，使用戶看到自己做所的操作所產(chǎn)生的效果。

AngularJs架構(gòu)示例圖

• 下面是Angular的架構(gòu)。
  對(duì)于Angular，整個(gè)應(yīng)用就是一個(gè)組件樹，用戶可以通過執(zhí)行一些操作從一個(gè)組件路由到另一個(gè)組件，從一個(gè)組件到另一個(gè)組件時(shí)用戶的頁面會(huì)有些變化，因?yàn)榧せ畹慕M件不一樣了。
  用戶可以與某個(gè)組件進(jìn)行交互，而這些交互由組件進(jìn)行處理，組件可以通過依賴注入的方式引入一些服務(wù)，并用這些服務(wù)來處理用戶的操作或者與服務(wù)器進(jìn)行通訊。

Angular的架構(gòu)

5、AngularJs與React對(duì)比

React的優(yōu)點(diǎn)

• 速度。
  與其他框架相比，React采用了一種特立獨(dú)行的操作DOM的方式，也就是我們常說的虛擬DOM方式。在性能方面，在更新的時(shí)候，會(huì)先檢查更新虛擬，再和實(shí)際的DOM進(jìn)行比較更新，所以，和Angular比，react一方面更新的DOM次數(shù)少，另一方面是更新的數(shù)據(jù)少，因此速度比較快。

• FLUX架構(gòu)。
  ReactJs更關(guān)注UI的組件化和數(shù)據(jù)的單向更新，提出了flask架構(gòu)的新概念。并且，在ReactJs中可以直接使用ES6的語法，然后通過webpack的工具編寫出兼容的ES5。以前AngularJs不具備這些東西，但是現(xiàn)在Anguarl都已具備，比如組件化、數(shù)據(jù)的單向中心、ES6的支持。

• 服務(wù)器端渲染
  這個(gè)也是以前AngularJs沒有，而React具有。

6、AngularJs與Vue對(duì)比

Vue的優(yōu)點(diǎn)

• 簡單。
  容易上手
  Vue作者尤雨溪

• 靈活。

• 性能。
  尺寸比較小，用了類似于虛擬DOM的方式處理組件，所以速度也很快。

• Vue主導(dǎo)。
  Vue是由個(gè)人主導(dǎo)的，而Angular是Google主導(dǎo)，而且使用的是微軟開發(fā)的TypeScript語言。

• 只關(guān)注Web。
  Vue是一個(gè)只關(guān)注Web的框架。Angular實(shí)現(xiàn)了一個(gè)多層次的抽象，可以開發(fā)web項(xiàng)目，也可以開發(fā)客戶端應(yīng)用（也就是面向安卓等）。

• 服務(wù)器端渲染。
  Vue只能靠第三方的庫進(jìn)行渲染，而Angular有官方提供的服務(wù)器端渲染支持，可以解決Vue無法解決的一些純前端的一些痛點(diǎn)。

Angular與AngularJs、React.js、Vue.js

第二章：開始學(xué)習(xí)Angular

1、Angular程序架構(gòu)

• 組件
  是Angular應(yīng)用的基本構(gòu)建塊，你可以把組件理解為一段帶有業(yè)務(wù)邏輯和數(shù)據(jù)的html。
  一個(gè)父組件可以包含多個(gè)子組件。
  組件可以調(diào)用服務(wù)。

• 服務(wù)
  用來封裝可重用的業(yè)務(wù)邏輯。
  服務(wù)可以互相調(diào)用，也就是服務(wù)可以調(diào)服務(wù)。

• 指令
  允許你向Html元素添加自定義行為。

• 模塊
  用來將應(yīng)用中不同部分組織成一個(gè)Angular框架可以理解的單元。

Angular 程序框架

2、Angular開發(fā)環(huán)境

• 【安裝Nodejs】（http://nodejs.cn/download/）

• 【安裝Angular CLI】
  Nodejs安裝完成之后，直接使用以下命令

  npm install -g @angular/cli
  

  進(jìn)行安裝就可以。安裝完成之后可以使用ng -v命令來查看安裝結(jié)果。顯示如下圖：

  0.png

如果你的PC上安裝過nodejs或npm，可能會(huì)涉及到版本過低的問題，更新的話就自行百度吧！

• 【安裝WebStorm】（https://www.jetbrains.com/webstorm/）
  WebStorm是前端 的一個(gè)比較有名的開發(fā)工具，也可以使用Sublime。
  和WebStorm同產(chǎn)的還有一個(gè)后端開發(fā)工具PyCharm，這里作為了解。

3、新建項(xiàng)目

ng new auction   //auction為項(xiàng)目的名稱

執(zhí)行這個(gè)命令之后，angular命令行工具工具會(huì)在當(dāng)前所在路徑下新建一個(gè)名為auction的項(xiàng)目。

4、組件的必備元素

• 裝飾器@Compoent()
• 模板Template
• 控制器Controller

模板和控制器通過數(shù)據(jù)綁定來講控制器中的數(shù)據(jù)綁定到模板上，以上是稱之為一個(gè)屬性所必須的所有東西。當(dāng)然還有一些可選的注入對(duì)象，比如：

• 輸入屬性@Inputs()——允許你在組件樹中傳遞數(shù)據(jù)。
• 提供器providers——用來做依賴注入的。
• 生命周期鉤子Lifecycle Hooks——一個(gè)組件從創(chuàng)建到銷毀的過程中有多個(gè)鉤子可以被用來觸發(fā)執(zhí)行各種業(yè)務(wù)邏輯，例如在組件被實(shí)例化以后可以執(zhí)行一段初始化邏輯代碼，從后臺(tái)讀取一些數(shù)據(jù)到組件里面去。
• 樣式表Styles——組件可以關(guān)聯(lián)一些樣式表到模板中。
• 動(dòng)畫Animations——方便我們創(chuàng)建與組件相關(guān)的動(dòng)畫效果，如淡入淡出等等。
• 輸出屬性@Outputs——和前面的輸入屬性是相對(duì)的，用來定義一些其他屬性可能會(huì)感興趣的事件，或者用來在組件間共享數(shù)據(jù)。

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

Angular項(xiàng)目結(jié)構(gòu)詳解點(diǎn)擊這里查看

5、啟動(dòng)Angular過程介紹

要解釋Angular的啟動(dòng)過程，要明白三個(gè)問題：

• 啟動(dòng)時(shí)加載了哪個(gè)頁面？
• 啟動(dòng)時(shí)加載； 哪些腳本？
• 這些腳本做了什么事？

我們先來看看前面兩個(gè)問題

在.angular.cli.json文件里面，有一個(gè)apps的數(shù)組，數(shù)組里面有一些屬性，其中：

• "index": "index.html",
  index指向src里面的index.html文件，這個(gè)文件是angularJs啟動(dòng)時(shí)加載的頁面

• "main": "main.ts",
  angularJs啟動(dòng)時(shí)加載的腳本，main.ts負(fù)責(zé)引導(dǎo)angular腳本的啟動(dòng)

main.ts的文件內(nèi)容：

//前面是導(dǎo)入幾個(gè)必要的庫
import { enableProdMode } from '@angular/core';   //用來關(guān)閉angular的開發(fā)者模式
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';    //整個(gè)應(yīng)用的主模塊
import { environment } from './environments/environment';   //導(dǎo)入環(huán)境配置

if (environment.production) {     //判斷，如果是生產(chǎn)環(huán)境，就關(guān)閉開發(fā)者模式
  enableProdMode();
}

//調(diào)用bootstrapModule方法，傳入AppModule作為啟動(dòng)模塊來啟動(dòng)應(yīng)用。這里是整個(gè)應(yīng)用程序的起點(diǎn)。
platformBrowserDynamic().bootstrapModule(AppModule) 
  .catch(err => console.log(err));

在執(zhí)行到AppModule時(shí)，angular會(huì)分析AppModule要依賴哪些模塊，并加載那些模塊，我們可以在app/app.module.ts里面看到所需要導(dǎo)入的模塊。然后看這些模塊需要哪些模塊，以此類推，直到加載完所有的模塊。加載完成后，angular會(huì)在index.html中尋找啟動(dòng)模塊指定的主組件（也就是app.module.ts里面的bootstrap: [AppComponent]）對(duì)應(yīng)的css選擇器（app.component.ts里面的app-root）。

啟動(dòng)過程了解之后，我們看一下實(shí)際的效果：

• 點(diǎn)擊右上角選擇Edit Confiogurations，如下圖
  

  選擇Edit Confiogurations

• 然后添加一個(gè)npm命令。
  注意：Scripts里面可選的選項(xiàng)是在上圖所示的package.json文件里面定義的，上圖package.json展示了基本選項(xiàng)。這里選擇Start命令。

  添加一個(gè)npm命令

• 點(diǎn)擊右上角Run auction start(或shift +F10)啟動(dòng)服務(wù)。
  這里可能要稍微等一等，當(dāng)然，如果你的電腦速度夠快，它也能立刻完成加載啟動(dòng)的過程。
  最終執(zhí)行好的程序會(huì)通過 http://localhost:4200/ 暴露出來。

  看到bundle is now VALID或是webpack: Compiled successfully.就是已經(jīng)有效了。現(xiàn)在，如果沒有什么問題，就可以通過 http://localhost:4200/來訪問你的頁面了。如果不能正常加載頁面，你可以返回去檢查一下前面的步驟有沒有出錯(cuò)。

• 當(dāng)前開發(fā)環(huán)境會(huì)自動(dòng)偵測src目錄下面的改變，任何對(duì)src目錄下文件的改變，都會(huì)使服務(wù)器自動(dòng)加載修改后的文件，然后刷新頁面。

下面是運(yùn)行界面：

運(yùn)行界面

到這里，angular的啟動(dòng)過程就已經(jīng)完成了，我們接著往下來！

6、開發(fā)準(zhǔn)備

一般來說，我們會(huì)用到bootstrap和jQuery，下面就以安裝這兩個(gè)庫為例。

首先設(shè)置第三方的依賴。

一般情況下，如果要在angular項(xiàng)目中使用第三方類庫， 需要一下幾步

• 第一步就是把第三方庫安裝到本地
  可以直接在webstorm的命令行下安裝，也可以直接在命令行安裝。 安裝jquery：

  npm install jquery --save  //--save是把jquery這個(gè)依賴記到當(dāng)前的package.json文件里面。
  

  安裝bootstrap:

  npm install bootstrap --save
  

  下載完成后，它會(huì)把你的安裝包放在node_modules文件夾里，同時(shí)會(huì)在package.json加入對(duì)應(yīng)的依賴。

• 第二步是把安裝的庫引到項(xiàng)目里面去
  引到項(xiàng)目里的時(shí)候，就需要修改.angular-cli.json文件，把剛剛安裝的第三方類庫添加到scripts里面，用bootstrap主要使用它的樣式，所以把bootstrap.css加入到styles里面。

    "styles": [
       "styles.css",
       "../node_modules/bootstrap/dist/css/bootstrap.css"
    ],
   "scripts": [
          "../node_modules/jquery/dist/jquery.js",
          "../node_modules/bootstrap/dist/js/bootstrap.js"
    ],
  

  添加之后，這幾個(gè)文件就被添加到項(xiàng)目里了。
  注意：typeScript是不認(rèn)識(shí)jquery的$符號(hào)的，它必須引入對(duì)應(yīng)的類型描述文件才可以使用，安裝的時(shí)候只需要在前面加一個(gè)@types就可以。安裝類型描述文件的目的就是讓typescript代碼認(rèn)識(shí)jquery和bootstrap，這樣就可以在typescript里面調(diào)jquery和bootstrap的東西。

   npm install @types/jquery --save-dev   //安裝jquery的類型描述文件
   npm install @types/bootstrap --save-dev   //安裝bootstrap的類型描述文件
  

下面開始來寫代碼

angular框架的設(shè)計(jì)目標(biāo)中，最主要的設(shè)計(jì)目標(biāo)之一就是幫助開發(fā)人員開發(fā)出可重用的開發(fā)組件。現(xiàn)在很多特性都是為這個(gè)目標(biāo)服務(wù)的。所以在開發(fā)angular應(yīng)用時(shí)也要用一種組件化的思路來思考要解決的問題。

利用組件來實(shí)現(xiàn)下面這個(gè)頁面。

目標(biāo)頁面

angular命令行工具提供了自動(dòng)生成組件的功能。通過命令行在auction目錄下生成一個(gè)組件，app那個(gè)組件命令行工具在創(chuàng)建項(xiàng)目的時(shí)候就已經(jīng)創(chuàng)建了，把其他需要的六個(gè)組件生成出來就可以了。

• 依次執(zhí)行以下命令，生成各個(gè)組件（navbar、footer、search、carouse、product、stars）:
  • ng g componet navbar //導(dǎo)航欄組件
  • ng g componet footer //頁腳組件
  • ng g componet search //搜素表單組件
  • ng g componet carouse //輪播組件
  • ng g componet product //商品展示組件
  • ng g componet stars //星級(jí)評(píng)價(jià)組件

以上每個(gè)命令執(zhí)行時(shí)都會(huì)生成css、html、ts以及測試文件spec.ts，同時(shí)還會(huì)更新app.module.ts文件。執(zhí)行完以上命令后，app這個(gè)目錄下會(huì)多出六個(gè)文件夾，然后在app.module.ts文件里面，在declarations的這個(gè)屬性里多了剛聲明的六個(gè)組件。

到這里呢，就已經(jīng)用angular的命令行工具把我們要編寫的代碼寫出來了。接下來只需要一個(gè)個(gè)編寫組件就可以，在這個(gè)過程中我們會(huì)一步步強(qiáng)化組件的概念。

7、 開發(fā)app組件

前面說了這么多，終于要開始寫代碼了，上面我們把頁面分成了七個(gè)組件，現(xiàn)在我們從最基礎(chǔ)的app組件開始，首先來改一下app.component.html文件

每一個(gè)組件都可以用app.module.ts文件里面selector聲明的標(biāo)簽來引用。

根據(jù)上面的目標(biāo)頁面設(shè)置下面的布局，具體的bootstrap的標(biāo)簽的使用，你可以參考官網(wǎng)的Bootstrap全局樣式

app.component.html

<app-navbar></app-navbar>
<div class="container">
  <div class="row">
    <div class="col-md-3">
      <app-search></app-search>
    </div>
    <div class="col-md-9">
      <div class="row">
        <app-carousel></app-carousel>
      </div>
      <div class="row">
        <app-product></app-product>
      </div>
    </div>
  </div>
</div>
<app-footer></app-footer>

app.component.css

.carousel-container{
    margin-bottom: 40px;
}

8、開發(fā)navbar和footer組件

navbar.component.html

<nav class="navbar navbar-inverse navbar-fixed-top">
    <!--inverse黑底白字-->
    <!--fixed-top是固定在頂部-->
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">在線競拍</a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">關(guān)于我們</a></li>
                <li><a href="#">聯(lián)系我們</a></li>
                <li><a href="#">網(wǎng)站地圖</a></li>
            </ul>
        </div>
    </div>
</nav>

footer.component.html

<div class="container">
    <hr>
    <div class="row">
        <div class="col-lg-12">
            <p>慕課網(wǎng)Angular入門實(shí)戰(zhàn)</p>
        </div>
    </div>
</div>

這兩個(gè)組件比較簡單

9、開發(fā)search和carousel組件

search.component.html

<form name="searchForm" role="form">
    <div class="form-group">
        <label for="productTitle">商品名稱</label>
        <input type="text" id="productTitle" placeholder="商品名稱" class="form-control">
        <label for="productPrice">商品價(jià)格</label>
        <input type="text" id="productPrice" placeholder="商品名稱" class="form-control">
        <label for="productCategory">商品類別</label>
        <select name="" id="productCategory" class="form-control"></select>
    </div>
    <div class="form-group">
        <button type="button" class="btn btn-primary btn-block">搜索</button>
    </div>
</form>

carousel.component.html

<div class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li class="active"></li>
        <li></li>
        <li></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img class="slide-image" src="http://placehold.it/800x300/">
        </div>
        <div class="item">
            <img class="slide-image" src="http://placehold.it/800x300/">
        </div>
        <div class="item">
            <img class="slide-image" src="http://placehold.it/800x300/">
        </div>
    </div>
    <a href="javascript:$('.carousel').carousel('prev')" class="left carousel-control">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a href="javascript:$('.carousel').carousel('next')" class="right carousel-control">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

carousel.component.css

.slide-image{
    width: 100%;
}

10、開發(fā)product組件

product.component.html

<div *ngFor="let product of products" class="col-md-4 col-sm-4 col-lg-4">
    <div class="thumbnail">
        <img [src]="imgUrl">
        <div class="caption">
            <h4 class="pull-right">{{product.price}}</h4>
            <h4><a href="">{{product.title}}}</a></h4>
            <p>{{product.desc}}</p>
        </div>
        <div>
            <app-stars [rating]="product.rating"></app-stars>
        </div>
    </div>
</div>

product.component.ts

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

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

    private products: Array<Product>;

    private imgUrl = 'http://placehold.it/320x150';

    constructor() { }

    ngOnInit() {
        this.products = [
            new Product(1, '第一個(gè)商品', 1.99, 3.5, '這是第一個(gè)商品，是我在學(xué)習(xí)慕課網(wǎng)Angular入門實(shí)戰(zhàn)時(shí)創(chuàng)建的', ['電子產(chǎn)品', '硬件設(shè)備']),
            new Product(2, '第二個(gè)商品', 2.99, 2.5, '這是第二個(gè)商品，是我在學(xué)習(xí)慕課網(wǎng)Angular入門實(shí)戰(zhàn)時(shí)創(chuàng)建的', ['圖書']),
            new Product(3, '第三個(gè)商品', 3.99, 4.5, '這是第三個(gè)商品，是我在學(xué)習(xí)慕課網(wǎng)Angular入門實(shí)戰(zhàn)時(shí)創(chuàng)建的', ['硬件設(shè)備']),
            new Product(4, '第四個(gè)商品', 4.99, 1.5, '這是第四個(gè)商品，是我在學(xué)習(xí)慕課網(wǎng)Angular入門實(shí)戰(zhàn)時(shí)創(chuàng)建的', ['電子產(chǎn)品', '硬件設(shè)備']),
            new Product(5, '第五個(gè)商品', 5.99, 3.5, '這是第五個(gè)商品，是我在學(xué)習(xí)慕課網(wǎng)Angular入門實(shí)戰(zhàn)時(shí)創(chuàng)建的', ['電子產(chǎn)品']),
            new Product(6, '第六個(gè)商品', 6.99, 2.5, '這是第六個(gè)商品，是我在學(xué)習(xí)慕課網(wǎng)Angular入門實(shí)戰(zhàn)時(shí)創(chuàng)建的', ['圖書']),
        ];

        this.products.push(new Product(7, '第六個(gè)商品', 7.99, 1.5, '這是第七個(gè)商品，是我在學(xué)習(xí)慕課網(wǎng)Angular入門實(shí)戰(zhàn)時(shí)創(chuàng)建的', ['圖書']))
    }

}

export class Product{
    constructor(
        public id: number,
        public title: string,
        public price: number,
        public rating: number,
        public desc: string,
        public categories: Array<string>
    ){
    }
}

11、開發(fā)stars組件

stars.component.html

<p>
    <span *ngFor="let star of stars" class="glyphicon glyphicon-star glyphicon-star-empty"
    [class.glyphicon-star-empty]="star"></span>
    <span>{{rating}}星</span>
</p>

stars.component.ts

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

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

    @Input()
    private rating = 0;

    private stars: boolean[];

    constructor() { }

    ngOnInit() {
        this.stars = [];
        for (let i = 1; i <= 5; i++){
            this.stars.push(i > this.rating);
        }
    }

}

小結(jié)

Angular的環(huán)境搭建及基本的組件開發(fā)到這里就差不多了。簡單的在線競拍網(wǎng)站也構(gòu)建完成，接下來會(huì)對(duì)Angular的每個(gè)功能進(jìn)行詳細(xì)的講解，然后對(duì)在線競拍網(wǎng)站進(jìn)行改造。