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圖標

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

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