第一、二章 Angular環(huán)境搭建與組件開發(fā)

Angular 版本

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

第一章：簡介

1、AngularJs的優(yōu)點

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

2、AngularJs的一些問題

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

3、AngularJs的新特性

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

4、AngularJs架構(gòu)

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

  • 如下是AngularJs架構(gòu)。
    用戶看到的是視圖，也就是html等內(nèi)容，用戶會和視圖進行一些交互，比如點擊鼠標，或者輸入一些數(shù)據(jù)，這些動作會被視圖（view）傳遞給控制器（controller），控制器會根據(jù)用戶的輸入去修改或查詢底層的數(shù)據(jù)模型，這時，底層的數(shù)據(jù)模型可能會與服務器產(chǎn)生一些數(shù)據(jù)交互，以獲取或更新數(shù)據(jù)信息，然后底層數(shù)據(jù)模型的這些改變，會通過數(shù)據(jù)綁定機制反饋到視圖層，使用戶看到自己做所的操作所產(chǎn)生的效果。
AngularJs架構(gòu)示例圖
  • 下面是Angular的架構(gòu)。
    對于Angular，整個應用就是一個組件樹，用戶可以通過執(zhí)行一些操作從一個組件路由到另一個組件，從一個組件到另一個組件時用戶的頁面會有些變化，因為激活的組件不一樣了。
    用戶可以與某個組件進行交互，而這些交互由組件進行處理，組件可以通過依賴注入的方式引入一些服務，并用這些服務來處理用戶的操作或者與服務器進行通訊。
Angular的架構(gòu)

5、AngularJs與React對比

React的優(yōu)點

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

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

  • 服務器端渲染
    這個也是以前AngularJs沒有，而React具有。

6、AngularJs與Vue對比

Vue的優(yōu)點

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

  • 靈活。

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

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

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

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

Angular與AngularJs、React.js、Vue.js

第二章：開始學習Angular

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

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

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

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

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

Angular 程序框架

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

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

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

    npm install -g @angular/cli

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

    0.png

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

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

3、新建項目

ng new auction   //auction為項目的名稱

執(zhí)行這個命令之后，angular命令行工具工具會在當前所在路徑下新建一個名為auction的項目。

4、組件的必備元素

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

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

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

Angular項目結(jié)構(gòu)詳解點擊這里查看

5、啟動Angular過程介紹

要解釋Angular的啟動過程，要明白三個問題：

  • 啟動時加載了哪個頁面？
  • 啟動時加載； 哪些腳本？
  • 這些腳本做了什么事？

我們先來看看前面兩個問題

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

  • "index": "index.html",
    index指向src里面的index.html文件，這個文件是angularJs啟動時加載的頁面

  • "main": "main.ts",
    angularJs啟動時加載的腳本，main.ts負責引導angular腳本的啟動

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

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

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

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

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

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

啟動過程了解之后，我們看一下實際的效果：

  • 點擊右上角選擇Edit Confiogurations，如下圖

    選擇Edit Confiogurations

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

    添加一個npm命令

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

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

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

下面是運行界面：

運行界面

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

6、開發(fā)準備

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

首先設置第三方的依賴。

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

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

    npm install jquery --save  //--save是把jquery這個依賴記到當前的package.json文件里面。

    安裝bootstrap:

    npm install bootstrap --save

    下載完成后，它會把你的安裝包放在node_modules文件夾里，同時會在package.json加入對應的依賴。

  • 第二步是把安裝的庫引到項目里面去
    引到項目里的時候，就需要修改.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"
  ],

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

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

下面開始來寫代碼

angular框架的設計目標中，最主要的設計目標之一就是幫助開發(fā)人員開發(fā)出可重用的開發(fā)組件?，F(xiàn)在很多特性都是為這個目標服務的。所以在開發(fā)angular應用時也要用一種組件化的思路來思考要解決的問題。

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

目標頁面

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

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

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

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

7、 開發(fā)app組件

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

每一個組件都可以用app.module.ts文件里面selector聲明的標簽來引用。

根據(jù)上面的目標頁面設置下面的布局，具體的bootstrap的標簽的使用，你可以參考官網(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="#">關于我們</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入門實戰(zhàn)</p>
        </div>
    </div>
</div>

這兩個組件比較簡單

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">商品價格</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, '第一個商品', 1.99, 3.5, '這是第一個商品，是我在學習慕課網(wǎng)Angular入門實戰(zhàn)時創(chuàng)建的', ['電子產(chǎn)品', '硬件設備']),
            new Product(2, '第二個商品', 2.99, 2.5, '這是第二個商品，是我在學習慕課網(wǎng)Angular入門實戰(zhàn)時創(chuàng)建的', ['圖書']),
            new Product(3, '第三個商品', 3.99, 4.5, '這是第三個商品，是我在學習慕課網(wǎng)Angular入門實戰(zhàn)時創(chuàng)建的', ['硬件設備']),
            new Product(4, '第四個商品', 4.99, 1.5, '這是第四個商品，是我在學習慕課網(wǎng)Angular入門實戰(zhàn)時創(chuàng)建的', ['電子產(chǎn)品', '硬件設備']),
            new Product(5, '第五個商品', 5.99, 3.5, '這是第五個商品，是我在學習慕課網(wǎng)Angular入門實戰(zhàn)時創(chuàng)建的', ['電子產(chǎn)品']),
            new Product(6, '第六個商品', 6.99, 2.5, '這是第六個商品，是我在學習慕課網(wǎng)Angular入門實戰(zhàn)時創(chuàng)建的', ['圖書']),
        ];

        this.products.push(new Product(7, '第六個商品', 7.99, 1.5, '這是第七個商品，是我在學習慕課網(wǎng)Angular入門實戰(zhàn)時創(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)建完成，接下來會對Angular的每個功能進行詳細的講解，然后對在線競拍網(wǎng)站進行改造。

最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容