上篇部落格寫了開發angular應用前的準備工作，今天就來講解一下angular應用開發的一個小demo——“線上競拍”的主頁面，詳情請見下文！

  因為是用angular開發“線上競拍”主頁面，所以就利用元件化的思想，先把主介面劃分為7個元件，分別為：導航欄、搜尋列表、產品資訊、輪播圖、腳註、星級評價，介面圖片和每個元件的詳細設計如下！

1.邏輯

  此導航條是響應式的，當螢幕縮小，導航欄中的三個連結會消失掉，多出一個按鈕來，點選按鈕，三個連結會按下拉的方式呈現出來。設定導航條主要是bootstrap的一些樣式，和angular關係不大。

2.程式碼:（navbar.component.html

<!--inverse表示導航條是黑底白色的：，fixed-top表示：固定到頂部-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<!--設定一個大容器-->
<div class="container">

  <!--生成一個寫程式名字-->
  <div class="navbar-header">
    <!--加一個button：作用就是在螢幕縮小時，點選按鈕可以讓三個子選單以下拉的形式出現-->
    <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
 
 class="navbar-brand" href="#">線上競拍</a>
  </div>

  <!--三個子選單的連結-->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li><a href="#">關於我們</a></li>
      <li><a href="#">聯絡我們</a></li>
      <li><a href="#">網站地圖</a></li>
    </ul>
  </div>

</div>
</nav>

3.效果圖

  腳註部分很簡單，就是在頁面底部顯示的程式小說明，程式碼（footer.component.html）如下

<div class="container">
  <hr>
  <footer>
    <div class="row">
      <div class="col-lg-12">
        <p>angular學習之旅中的小demo</p>
      </div>
    </div>
  </footer>
</div>

  搜尋表單這部分也沒涉及到angular的知識，主要就是新增三個搜尋框，讓分別可以按商品名稱、商品價格、商品類別進行搜尋，程式碼（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">
  </div>

  <div class="form-group">
      <label for="productPrice">商品價格：</label>
      <input type="number" id="productPrice" placeholder="商品價格" class="form-control">
  </div>

  <div class="form-group">
      <label for="productCategory">商品類別：</label>
      <select id="productCategory" class="form-control"></select>
  </div>

  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-block">搜尋</button>

  </div>


</form>

1.後臺:
①定義物件:
  從此元件就開始涉及angular啦，所以寫之前先理思路，因為我們是在用typescript寫程式，所以需要有一個物件來封裝我的產品資訊，這個物件有一個建構函式，在建構函式宣告產品所需要的構造屬性
②宣告陣列:
  在ProductComponent控制器中宣告一個數組儲存頁面上展示商品資訊的資料；然後在ngOnInit()方法例項化陣列，是元件生命週期鉤子中的一個鉤子，這個方法會在元件被例項化後呼叫一次，初始化元件中的資料。

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

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

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

  //ProductComponent控制器中：宣告一個數組儲存頁面上展示商品資訊的資料
  private products:Array<Product>;

  constructor() { }

  //ngOnInit()方法是元件生命週期鉤子中的一個鉤子，這個方法會在元件被例項化後呼叫一次，初始化元件中的資料
  ngOnInit() {
    //初始化陣列
    this.products=[
      new Product(1,"第一個商品",1.99,3.5,"這是第一個商品，是我在學習angular時建立的",["電子產品","硬體裝置"]),
      new Product(2,"第二個商品",2.99,2.5,"這是第二個商品，是我在學習angular時建立的",["圖書","硬體裝置"]),
      new Product(3,"第三個商品",3.99,4.5,"這是第三個商品，是我在學習angular時建立的",["電子產品","硬體裝置"]),
      new Product(4,"第四個商品",4.99,1.5,"這是第四個商品，是我在學習angular時建立的",["電子產品"]),
      new Product(5,"第五個商品",5.99,3.5,"這是第五個商品，是我在學習angular時建立的",["電子產品","硬體裝置"]),
      new Product(6,"第六個商品",6.99,2.5,"這是第六個商品，是我在學習angular時建立的",["圖書","硬體裝置"])
    ]
  }

}

//封裝產品資訊
export class Product{
  constructor(
    //商品id
    public id:number,
    //商品名稱
    public title:string,
    //商品價格
    public price:number,
    //星級評價
    public rating:number,
    //商品描述
    public desc:string,
    //商品類別:陣列型
    public categories:Array<string>
  ){

  }
}

2.前臺:

<!--用angular中的ngFor指令：products屬性和後臺的products屬性綁到一起，指令含義：迴圈products屬性，把每次迴圈的元素放到product變數裡。中間那段HTML裡就可以使用product這個變數，來用插值表示式顯示product裡的一些屬性-->
<div  *ngFor="let product of products" class="col-md-4 col-md-4 col-md-4">
  <div class="thumbnail">
    <!--用佔位符代替圖片-->
    <img src="http://placehold.it/320x150">
    <div class="caption">
      <!--使用插值表示式顯示變數中的屬性-->
      <h4 class="pull-right">{{product.price}}元</h4>
      <h4><a>{{product.title}}</a></h4>
      <p>{{product.desc}}</p>
    </div>
    <div>
      <!--星級評價的rating屬性由產品的rating屬性傳進去-->
      <app-stars [rating]="product.rating"></app-stars>
    </div>
  </div>
</div>

  


3.知識點
◆ngOnInit()方法
  ngOnInit()方法是元件生命週期鉤子中的一個鉤子，這個方法會在元件被例項化後呼叫一次，初始化元件中的資料
◆ngFor命令

*ngFor="let product of products"

  含義：迴圈products屬性，把每次迴圈的元素放到product變數裡。中間那段HTML裡就可以使用product這個變數，可以用插值表示式顯示product裡的一些屬性。
  作用：迴圈一個數組，在頁面上反覆生成一段html

  語法：let 變數 of 後臺陣列

  星級評價元件設定主要要解決6個問題，所以下邊就根據解決的問題來講解這部分。
1、如何顯示星型？

<span class="glyphicon glyphicon-star "></span>

2、如何顯示空心的星型？

 <span class="glyphicon glyphicon-star glyphicon-star-empty"></span>

3、如何顯示5顆星？
  解決此問題就要用資料驅動頁面啦，其核心思想就是——要想在前臺頁面顯示5顆星，就要在後臺有一個包含5個元素的陣列
  ◆後臺（stars.component.ts）程式碼

export class StarsComponent implements OnInit {
  //定義一個Boolean型別的陣列：裝5顆星
  private stars:boolean[];

  constructor() { }

  ngOnInit() {
    //初始化陣列
    this.stars=[true,true,true,true,true];
  }
}

  ◆前臺（stars.component.html）程式碼——即用ngFor命令繫結後臺陣列

<span *ngFor="let star of stars" class="glyphicon glyphicon-star glyphicon-star-empty"></span>

4、如何讓5顆星中有的實有的空？
  解決此問題使用屬性繫結中的樣式繫結，到第四步此時前臺（stars.component.html）程式碼如下：

<span *ngFor="let star of stars" class="glyphicon glyphicon-star "
  [class.glyphicon-star-empty]="star"></span>

◆樣式繫結
  ◇樣式繫結是屬性繫結中的一種
  ◇ [class.glyphicon-star-empty]=”star”解析：
  class後邊繫結的東西是一個css樣式，它的值要繫結到當前star變數上
  ◇上面整句程式碼含義：
  span這個html元素是否出現這樣一個css樣式是由star這個屬性決定的，如果star是true那麼span元素就會多出這個樣式來，false就不會出現這個樣式

5、如何將商品的星級評價的數值傳遞給星級評價元件?
  此問題涉及到了兩個元件（產品product和星級評價stars）,要把產品元件的星級值傳遞給心機評價元件告訴星型哪些空哪些實！使用“元件的輸入屬性”先在後臺新增裝飾器，然後再定義屬性；前臺則用插值表示式繫結


  ◆星級評價元件：主要使用“元件的輸入屬性”先在後臺新增裝飾器，然後再定義屬性；前臺則用“插值表示式”繫結

  ◇後臺（stars.component.ts）程式碼：

//加一個input裝飾器:星級評價元件StarsComponent的rating屬性應該由它的父元件傳遞給它
@Input()
//定義一個屬性：用來接收產品元件傳給它的星級評價數值，預設值是0
private rating:number=0;

  ◇前臺（stars.component.html）程式碼：

<span>{{rating}}星</span>

  ◆產品的前臺：用屬性繫結

<!--星級評價的rating屬性由產品的rating屬性傳進去-->
<app-stars [rating]="product.rating"></app-stars>

6、如何根據商品的星級值來決定星型是空心的還是實心的？/font>
  此問題其實就是把第3步中寫死的值不寫死，而是根據傳進來的rating來判斷是true還是false，修改星級評價後臺

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

    }
    //初始化陣列
    //this.stars=[false,false,true,true,true];
  }

7、星級評價整體程式碼
◇前臺程式碼

<p>
  <!--class後邊繫結的東西是一個css樣式，它的值要繫結到當前star變數上-->
  <!--整句含義：span這個html元素是否出現這樣一個css樣式是由star這個屬性決定的，如果star是true那麼span元素就會多出這個樣式來，false就不會出現這個樣式-->
  <span *ngFor="let star of stars" class="glyphicon glyphicon-star "
  [class.glyphicon-star-empty]="star"></span>

  <span>{{rating}}星</span>
</p>

◇後臺程式碼

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

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

  //加一個input裝飾器:星級評價元件StarsComponent的rating屬性應該由它的父元件傳遞給它
  @Input()
  //定義一個屬性：用來接收產品元件傳給它的星級評價數值，預設值是0
  private rating:number=0;

  //定義一個Boolean型別的陣列：裝5顆星
  private stars:boolean[];

  constructor() { }

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

    }
    //初始化陣列
    //this.stars=[false,false,true,true,true];
  }

}

  到此處學習angular的小demo就完成了，有體會到angular和jQuery的區別嗎？不防可以體會一下喲，小菜也會在下篇部落格區別angular和jQuery哦！