Angular4.0從入門到實戰打造在線競拍網站學習筆記之一--組件

Angular4.0基礎知識之組件
Angular4.0基礎知識之路由
Angular4.0依賴注入
Angular4.0數據綁定&管道

最近搞到手了一部Angular4的視頻教程,這幾天正好有時間變學了一下,可以用來做一些前后端分離的網站,也可以直接去打包web app。

先上個效果圖:

環境&版本信息聲明

運行ng -v

@angular/cli: 1.2.0
node: 8.1.2
os: win32 x64
@angular/* 4.2.5
...

好吧,那就順便寫個筆記/教程/備忘/博客咯

安裝Angular腳手架

安裝的時候選擇全局安裝

npm install @angular/cli -g

創建Angular項目

運行命令

ng new AngularStudy

其中AngularStudy是項目文件夾名稱

啟動項目開發環境

在當前創建的項目目錄下運行 如下命令

ng serve或者npm run start,然后在瀏覽器中進入所提示的地址,默認是http://127.0.0.1:4200/

當你訪問頁面的時候出現AngularLogo的時候,說明你的項目已經創建成功了,反之,請檢查錯誤信息或日志

提示:在我學習的過程中遇到了一個問題,就是在Windows10系統中,當你的用戶文件夾是中文名稱的時候,你就要小心了,你很有可能會在創建過程中遇到錯誤,具體是什么錯誤...額我忘了,那個錯誤百度谷歌都找不到答案,如果你解決不了,檢查一下是不是這個問題,百度有修改用戶文件夾名稱的教程(需要修改注冊表,小白慎入)

安裝jQuery和Bootstrap

在我們的開發流程中,jQuery和Bootstrap這兩個框架已經是不可或缺的一部分了,那么,如何在Angular中優雅地安裝並使用呢?

其實這很簡單,首先運行以下兩條命令安裝jQuery和Bootstrap:

npm install jquery --save
npm install bootstrap --save

這時候,兩個框架就已經安裝到了我們的node_modules模塊目錄下了

但是你會發現,在TypeScript中嘗試使用$符號的時候,編輯器仍然不能識別,這是為什么呢?

經過Google的提示,終於解決了這個問題

安裝JQuery的類型描述文件,運行如下命令

npm install @types/jquery --save-dev

同理安裝Bootstrap的TypeScript類型描述文件

npm install @types/bootstrap --save-dev

安裝這兩個類型描述模塊的目的是讓TypeScript認識jQuery和Bootstrap的語法,進而能在ts文件中使用它們

OK,是不是很簡單呢?

生成組件

Angular畢竟是有Google做后台的,功能方面也相當齊全,component不需要我們手動地去創建,只需要一條命令即可生成

在項目根目錄運行ng g component navbar 生成導航條組件

這條命了的意思就是angular generate component navbar,簡單明了

有了這條命令,我們就能很輕易地生成項目中的組件

組件名	用途
app	項目自帶的默認component
navbar	網頁/APP導航條
search	搜索區域
product	商品詳情
stars	星級評分
foot	底部信息

就這樣,我們的項目骨架就搭建完成了

對模塊進行布局

模塊創建完成了,那么,我們下一步需要做什么?當然是就像拼圖一樣,使用創建好的模塊,拼接起來,成為一個簡單的單頁面應用咯!

至於我們的拼圖底板是什么,分析Angular的啟動,app作為默認顯示出來的component,肯定是在app.component.html中進行拼接了。

打開我們的app.component.html,刪除里面無用的內容,使用我們剛剛創建的component在里面拼圖吧

一般情況下,我們創建的組件所對應的css元素選擇器(也就是標簽),名字是app-componentName

最終拼合結果如下所示,這樣,我們的單頁面應用的基本骨架就搭建出來啦~

<!--導航條-->
<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>
<!--/底部信息-->

組件編寫

Angular的組件復用是很重要的一個功能,就比如上面的星級評分組件,不管是商品展示,還是用戶評論打分,都會用到,只需要一次知錯,就能一直使用

導航條navbar

組件html內容如下

<!--Bootstrap導航條-->
<nav class="navbar navbar-inverse navbar-fixed">
  <!--導航條內容容器-->
  <div class="container">
    <!--導航條頭部-->
    <div class="navbar-header">
      <button class="navbar-toggle btn" data-toggle="collapse" data-target="#navbar-collapse-menu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!--//商標/Logo-->
      <a class="navbar-brand" href="javascript:void(0)">在線競拍</a>
    </div>
    <!--/導航條頭部-->
    <!--導航條列表菜單-->
    <div class="collapse navbar-collapse" id="navbar-collapse-menu">
      <ul class="nav navbar-nav">
        <li><a href="javascript:void(0)">關於我們</a></li>
        <li><a href="javascript:void(0)">聯系我們</a></li>
        <li><a href="javascript:void(0)">網站地圖</a></li>
      </ul>
    </div>
    <!--/導航條列表菜單-->
  </div>
  <!--/導航條內容容器-->
</nav>
<!--/Bootstrap導航條-->

.main-wrap{
  margin-top: 70px;
}

這時候,我們需要在css文件中添加樣式,使中間部分內容鄉下偏移約70px,因為fix格式的導航條會蓋住內容。

默認的全局css文件是/src/style.css當然也可以在配置文件中更改或者添加新的css文件

當然,每一個組件對應的css樣式我們應該分開寫,比如navbar的css寫在navbar.component.css文件中

底部信息footer

由於尚未編寫業務邏輯,簡單地先做一下占位即可

<div class="container">
  <hr>
  <footer>
    <div class="row">
      <div class="col-md-12">
        <p>Angular打造競拍網站</p>
      </div>
    </div>
  </footer>
</div>

footer{
  text-align: center;
}

商品搜索組件

就是上面那個套路,都是使用Bootstrap框架所帶的那些css樣式,直接貼代碼,學過的應該都能看懂。

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

輪播圖組件

輪播圖稍微有些復雜,因為不僅僅使用了HTML,同時也使用了少量的JavaScript和jQuery。當然我相信，來學Angular的肯定不是小白咯。

當然,這一部分主要就是實現一個簡單的輪播圖,也沒有用到什么Angular代碼

<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 src="http://placehold.it/800x300" alt="carousel" class="slide-image">
    </div>
    <div class="item">
      <img src="http://placehold.it/800x300" alt="carousel" class="slide-image">
    </div>
    <div class="item">
      <img src="http://placehold.it/800x300" alt="carousel" class="slide-image">
    </div>
  </div>
  <!--/輪播圖片區域-->
  <!--輪播圖控制按鈕-->
  <a href="javascript:$('.carousel').carousel('prev')" class="left carousel-control">
    <i class="glyphicon glyphicon-chevron-left"></i>
  </a>
  <a href="javascript:$('.carousel').carousel('next')" class="right carousel-control">
    <i class="glyphicon glyphicon-chevron-right"></i>
  </a>
  <!--/輪播圖控制按鈕-->
</div>

.slide-image{
  width:100%;
}

從下一部分開始我們就需要接觸到更多Angular的知識了

商品詳情組件

首先,每一件商品都是一個對象,那么我門可以建立如下的模型:

product.component.ts

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

  }
}

然后,在這個ts文件中進行商品(對象)的實例化(因為現在還沒有學到http)

export class ProductComponent implements OnInit {

  public products: Array<Product>;

  constructor() {
  }

  ngOnInit() {
    this.products = [
      new Product(1, '第一個商品', 899, 3.5, '這是一個垃圾電腦', ['電子產品', '家電']),
      new Product(2, '第二個商品', 899, 3.5, '這是一個垃圾電腦', ['電子產品', '家電']),
      new Product(3, '第三個商品', 899, 3.5, '這是一個垃圾電腦', ['電子產品', '家電']),
      new Product(4, '第四個商品', 899, 3.5, '這是一個垃圾電腦', ['電子產品', '家電']),
      new Product(5, '第五個商品', 899, 3.5, '這是一個垃圾電腦', ['電子產品', '家電']),
      new Product(6, '第六個商品', 899, 3.5, '這是一個垃圾電腦', ['電子產品', '家電'])
    ]
  }

}

這樣,即可在模塊實例化的時候獲取到商品對象列表,並傳遞到component模板中

ngOnInit()方法會在component實例化的時候自動調用一次,這個知識點稍后會更詳細講到

有了數據之后,下一步當然是制作component模板咯,順便吧數據也顯示出來唄(滿滿的都是套路額)

<div class="col-sm-4 col-md-4 col-lg-4" *ngFor="let product of products">
  <div class="thumbnail">
    <img src="http://placehold.it/320x150" alt="商品圖片">
    <div class="caption">
      <h4 class="pull-right">￥{{product.price}}</h4>
      <h4><a>{{product.title}}</a></h4>
      <p>{{product.desc}}</p>
    </div>
    <div>
      <app-stars></app-stars>
    </div>
  </div>
</div>

ngFor可以理解為在html中對一個數組進行循環遍歷,同時循環這個html標簽......就類似PHP那樣,慢慢理解吧,挺簡單的額,稍后也會講到
但是這個指令反映出來的思想很重要,Angular的數據綁定,也叫作數據驅動

然后,從開始搞事情以來第一個比較難的地方已經過去了(以后你回頭看的時候還會發現...其實好簡單的哦)

星級評分組件

別看這個組件很小不起眼,但是星際評分組件是當前所有組件里最復雜的一個(相對復雜...)

主要使用了 :

*ngFor指令
class綁定
組件屬性值輸入@Input()

直接上代碼唄

控制器代碼如下,這部分代碼的關鍵點在於把Production component的product.rating注入到Star Component中

export class StarsComponent implements OnInit {
  @Input()
  public rating: number;
  public stars = [];

  constructor() {
  }

  ngOnInit() {
    const full: number = Math.floor(this.rating);
    const half: number = Math.ceil(this.rating - full);
    const empty: number = 5 - full - half;
    for (let i = 0; i < 5; i++) {
      if (i < full) {
        this.stars.push('full');
      } else if (i === full && half !== 0) {
        this.stars.push('half')
      } else {
        this.stars.push('empty')
      }
    }
  }
}

如何注入呢?上面有一個裝飾器@Input()標識着rating變量是外部注入的

那么,在實例化star component的位置......

就是這里!!!

 <app-stars [rating]="product.rating"></app-stars>

就是這么簡單

接下來當然是模板代碼咯,關鍵點都在這里

<p>
  <i *ngFor="let star of stars" class="fa"
     [class.fa-star]="star==='full'"
     [class.fa-star-half-o]="star==='half'"
     [class.fa-star-o]="star==='empty'"
  ></i>
  <span>{{rating}}星</span>
</p>

這里首先使用ngFor指令對i標簽(星星)進行遍歷
接下來使用[class.xxx]進行樣式綁定,根據控制器里組合成的數組進行星星標簽的生成
這里使用了Font-Awesome圖標

代碼只要稍微細心看就能看懂,主要就在於樣式綁定,根據數組中不同的字符串綁定不同的星星樣式

就這樣,我們的基本組件已經實現了大部分了,等有空了進行下一章的學習......