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

先上個效果圖:

環(huán)境&版本信息聲明

運(yùn)行ng -v

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

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

安裝Angular腳手架

安裝的時候選擇全局安裝

npm install @angular/cli -g

創(chuàng)建Angular項(xiàng)目

運(yùn)行命令

ng new AngularStudy

其中AngularStudy是項(xiàng)目文件夾名稱

啟動項(xiàng)目開發(fā)環(huán)境

在當(dāng)前創(chuàng)建的項(xiàng)目目錄下運(yùn)行 如下命令

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

當(dāng)你訪問頁面的時候出現(xiàn)AngularLogo的時候,說明你的項(xiàng)目已經(jīng)創(chuàng)建成功了,反之,請檢查錯誤信息或日志

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

安裝jQuery和Bootstrap

在我們的開發(fā)流程中,jQuery和Bootstrap這兩個框架已經(jīng)是不可或缺的一部分了,那么,如何在Angular中優(yōu)雅地安裝并使用呢?

其實(shí)這很簡單,首先運(yùn)行以下兩條命令安裝jQuery和Bootstrap:

npm install jquery --savenpm install bootstrap --save

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

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

經(jīng)過Google的提示,終于解決了這個問題

安裝JQuery的類型描述文件,運(yùn)行如下命令

npm install @types/jquery --save-dev

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

npm instakll @types/bootstrap --save-dev

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

OK,是不是很簡單呢?

生成組件

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

在項(xiàng)目根目錄運(yùn)行ng g component navbar 生成導(dǎo)航條組件

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

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

就這樣,我們的項(xiàng)目骨架就搭建完成了

對模塊進(jìn)行布局

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

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

打開我們的app.component.html,刪除里面無用的內(nèi)容,使用我們剛剛創(chuàng)建的component在里面拼圖吧

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

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

<!--導(dǎo)航條--><app-navbar></app-navbar><!--/導(dǎo)航條--><!--主要內(nèi)容容器--><div class="container">
  <div class="row">
    <!--左側(cè)-->
    <div class="col-md-3">
      <!--搜索區(qū)域-->
      <app-search></app-search>
      <!--/搜索區(qū)域-->
    </div>
    <!--/左側(cè)-->
    <!--右側(cè)-->
    <div class="col-md-9">
      <div class="row">
        <!--輪播圖-->
        <app-carousel></app-carousel>
        <!--/輪播圖-->
      </div>
      <div class="row">
        <!--商品信息-->
        <app-product></app-product>
        <!--/商品信息-->
      </div>
    </div>
    <!--/右側(cè)-->
  </div></div><!--/主要內(nèi)容容器--><!--底部信息--><app-footer></app-footer><!--/底部信息-->

組件編寫

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

導(dǎo)航條navbar

組件html內(nèi)容如下

<!--Bootstrap導(dǎo)航條--><nav class="navbar navbar-inverse navbar-fixed">
  <!--導(dǎo)航條內(nèi)容容器-->
  <div class="container">
    <!--導(dǎo)航條頭部-->
    <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>
      <!--//商標(biāo)/Logo-->
      <a class="navbar-brand" href="javascript:void(0)">在線競拍</a>
    </div>
    <!--/導(dǎo)航條頭部-->
    <!--導(dǎo)航條列表菜單-->
    <div class="collapse navbar-collapse" id="navbar-collapse-menu">
      <ul class="nav navbar-nav">
        <li><a href="javascript:void(0)">關(guān)于我們</a></li>
        <li><a href="javascript:void(0)">聯(lián)系我們</a></li>
        <li><a href="javascript:void(0)">網(wǎng)站地圖</a></li>
      </ul>
    </div>
    <!--/導(dǎo)航條列表菜單-->
  </div>
  <!--/導(dǎo)航條內(nèi)容容器--></nav><!--/Bootstrap導(dǎo)航條-->

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

這時候,我們需要在css文件中添加樣式,使中間部分內(nèi)容鄉(xiāng)下偏移約70px,因?yàn)閒ix格式的導(dǎo)航條會蓋住內(nèi)容。

默認(rèn)的全局css文件是/src/style.css當(dāng)然也可以在配置文件中更改或者添加新的css文件

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

底部信息footer

由于尚未編寫業(yè)務(wù)邏輯,簡單地先做一下占位即可

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

footer{
  text-align: center;}

商品搜索組件

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

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

輪播圖組件

輪播圖稍微有些復(fù)雜,因?yàn)椴粌H僅使用了HTML,同時也使用了少量的JavaScript和jQuery。當(dāng)然我相信，來學(xué)Angular的肯定不是小白咯。

當(dāng)然,這一部分主要就是實(shí)現(xiàn)一個簡單的輪播圖,也沒有用到什么Angular代碼

<div class="carousel slide" data-ride="carousel">
  <!--輪播圖導(dǎo)航區(qū)域-->
  <ol class="carousel-indicators">
    <li class="active"></li>
    <li></li>
    <li></li>
  </ol>
  <!--/輪播圖導(dǎo)航區(qū)域-->
  <!--輪播圖片區(qū)域-->
  <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>
  <!--/輪播圖片區(qū)域-->
  <!--輪播圖控制按鈕-->
  <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文件中進(jìn)行商品(對象)的實(shí)例化(因?yàn)楝F(xiàn)在還沒有學(xué)到http)

export class ProductComponent implements OnInit {  public products: Array<Product>;  constructor() {
  }

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

}

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

ngOnInit()方法會在component實(shí)例化的時候自動調(diào)用一次,這個知識點(diǎn)稍后會更詳細(xì)講到

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

<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中對一個數(shù)組進(jìn)行循環(huán)遍歷,同時循環(huán)這個html標(biāo)簽......就類似PHP那樣,慢慢理解吧,挺簡單的額,稍后也會講到
但是這個指令反映出來的思想很重要,Angular的數(shù)據(jù)綁定,也叫作數(shù)據(jù)驅(qū)動

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

星級評分組件

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

主要使用了 :

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

直接上代碼唄

控制器代碼如下,這部分代碼的關(guān)鍵點(diǎn)在于把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()標(biāo)識著rating變量是外部注入的

那么,在實(shí)例化star component的位置......

就是這里!!!

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

就是這么簡單

接下來當(dāng)然是模板代碼咯,關(guān)鍵點(diǎn)都在這里

<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標(biāo)簽(星星)進(jìn)行遍歷
接下來使用[class.xxx]進(jìn)行樣式綁定,根據(jù)控制器里組合成的數(shù)組進(jìn)行星星標(biāo)簽的生成
這里使用了Font-Awesome圖標(biāo)

代碼只要稍微細(xì)心看就能看懂,主要就在于樣式綁定,根據(jù)數(shù)組中不同的字符串綁定不同的星星樣式

就這樣,我們的基本組件已經(jīng)實(shí)現(xiàn)了大部分了,等有空了進(jìn)行下一章的學(xué)習(xí)......

標(biāo)簽: Angular, javascript

好文要頂 關(guān)注我 收藏該文  

Jeffrey王小白
關(guān)注 - 10
粉絲 - 3

+加關(guān)注

1

? 上一篇：Ubuntu17.04配置LNMP(Nginx+PHP7+MySQL)簡單教程 快速 易學(xué) 簡單易懂
? 下一篇：CSS滾動條樣式定制

posted @ 2017-07-02 13:15 Jeffrey王小白 閱讀(256) 評論(2) 編輯 收藏

評論列表

#1樓 2017-07-02 15:44 牛腩  

支持支持

支持(0)反對(0)

#2樓[樓主] 2017-07-02 16:54 Jeffrey王小白  

@ 牛腩
啊哈~謝謝

支持(0)反對(0)

刷新評論刷新頁面返回頂部

注冊用戶登錄后才能發(fā)表評論，請 登錄 或 注冊，訪問網(wǎng)站首頁。

【推薦】50萬行VC++源碼: 大型組態(tài)工控、電力仿真CAD與GIS源碼庫
【免費(fèi)】從零開始學(xué)編程，開發(fā)者專屬實(shí)驗(yàn)平臺免費(fèi)實(shí)踐！http://www.cnblogs.com/wxjblog/p/7104998.html

延伸閱讀

• Spring+SpringMVC+MyBatis深入學(xué)習(xí)及搭建(一)——MyBatis的基礎(chǔ)知識 2017-07-26
• Go語言學(xué)習(xí)筆記（四）結(jié)構(gòu)體struct & 接口Interface & 反射 2017-07-26
• Go語言學(xué)習(xí)筆記（二）十分鐘上手 2017-07-25
• 函數(shù)響應(yīng)式編程及ReactiveObjC學(xué)習(xí)筆記 (-) 2017-07-25
• 函數(shù)響應(yīng)式編程及ReactiveObjC學(xué)習(xí)筆記 (三) 2017-07-25
• MySQL系列（一）---基礎(chǔ)知識大總結(jié) 2017-07-25
• 函數(shù)響應(yīng)式編程及ReactiveObjC學(xué)習(xí)筆記 (二) 2017-07-24
• 【翻譯】React vs Angular: JavaScript的雙向性 2017-07-24
• 【翻譯】React vs Angular: JavaScript的雙向性 2017-07-24
• thinkphp5.0學(xué)習(xí)筆記（三）獲取信息,變量,綁定參數(shù) 2017-07-21

Go語言學(xué)習(xí)筆記（二）十分鐘上手