從 Angular1 到 Angular2

Angular2 作為著名前端 MVVM 架構(gòu) Angular1 的繼承者，從一定程度上說(shuō)，引領(lǐng)了新一代 Web 前端開(kāi)發(fā)技術(shù)的革新。從最新版的 ember.js, react.js, vue.js 中，可以看到這幾種技術(shù)相互借鑒，取長(zhǎng)補(bǔ)短，最終向一種技術(shù)方向演進(jìn)。

組件化技術(shù)的崛起

Angular1 也有組件，叫另外一個(gè)名字：指令。在 Angular1 中，指令是 DOM 元素緊密結(jié)合的一段包含控制邏輯、數(shù)據(jù)管理的代碼。在指令中，我們可以清楚的看到 Angular1 對(duì)于 Jquery/DOM 技術(shù)的使用，以及手動(dòng)對(duì) Angular 組件進(jìn)行生命周期的管理。要知道，這些在一般的 Angular 控制器/頁(yè)面模板的開(kāi)發(fā)中，是不用被關(guān)心的。

Angular2 把組件擴(kuò)大化，使這種類似于指令化的開(kāi)發(fā)應(yīng)用到頁(yè)面開(kāi)發(fā)中。這樣有什么好處呢？

• 增加了開(kāi)發(fā)人員頁(yè)面開(kāi)發(fā)的靈活性
• 使用新的文件引用技術(shù)，這點(diǎn)我們?cè)?Webpack 的革新中具體闡述
• css 的分離化管理

如果了解其他的開(kāi)發(fā)技術(shù)，可以發(fā)現(xiàn)組件化漸漸的統(tǒng)治了前端開(kāi)發(fā)領(lǐng)域。從 ember.js，vue.js，到 React.js，組件化技術(shù)都被廣泛應(yīng)用。

從 grunt/gulp 到 Webpack 的技術(shù)革新

Task runner, 從最早的 grunt，到 gulp，是服務(wù)于應(yīng)用程序的一些控制程序。有幫助開(kāi)發(fā)人員進(jìn)行開(kāi)發(fā)、運(yùn)行單元集成測(cè)試、幫助產(chǎn)品發(fā)布等等一系列功能，一般我們依賴于第三方的程序來(lái)實(shí)現(xiàn)，例如 gulp。但是 npm 本身就有 task runner 的功能，如清單 1，scripts 中包含了可以運(yùn)行的 ionic 任務(wù)。使用類似 npm run clean 就可以運(yùn)行任務(wù)，不需要其他依賴。

清單 1. Npm 配置提供 task runner 功能

{
  //package.json
  "name": "iamsaying",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,  
 "scripts": {// 可運(yùn)行的任務(wù)
  "clean": "ionic-app-scripts clean",
  "build": "ionic-app-scripts build",
  "lint": "ionic-app-scripts lint",
  "ionic:build": "ionic-app-scripts build",
  "ionic:serve": "ionic-app-scripts serve"
  }
  //更多
  }

這就有一個(gè)問(wèn)題了，為什么有 npm task runner，還要使用三方的 gulp 來(lái)完成此項(xiàng)功能呢？因?yàn)?npm task runner 太簡(jiǎn)單了，從字面上看，只是一條 shell 命令。但是 gulp 能做什么呢？如清單 2 是一段用 gulp 向 index.html 中注入相應(yīng)的 bower_components 的任務(wù)?？梢钥闯?，gulp 任務(wù)復(fù)雜，需要寫代碼。

清單 2. Gulp 配置注入 index.html 相關(guān)的 js 文件

//gulpfile.babel.js
  gulp.task('bower', function () {
  return gulp.src(paths.views.main)
  .pipe(wiredep({
  directory: yeoman.app + '/bower_components'
  }))
  .pipe(gulp.dest(yeoman.app));
  });

Webpack 代替了 grunt/gulp。為什么這么說(shuō)？因?yàn)椋琖ebpack 通過(guò)插件提供的能力，可以完成打包、擾碼、開(kāi)發(fā)、調(diào)試及 css 處理等任務(wù)。這塊和 grunt/gulp 的功能重復(fù)了。事實(shí)上，也可以使用 gulp 來(lái)運(yùn)行 Webpack，但是這種設(shè)計(jì)冗余了，gulp 的存在完全沒(méi)有必要。

此外，Webpack 還有一項(xiàng)重要的功能，它改變了代碼之間依賴的表示方法。上面的 gulp task 中 wiredep 用來(lái)在 index.html 中注入項(xiàng)目中所有的 bower 依賴，如清單 3?？梢钥闯觯ㄟ^(guò)瀏覽器的支持，js 之間可以相互引用，相互依賴。

清單 3. Wiredep 注入引用的 js 文件

<!-- build:js(.) scripts/vendor.js -->
  <!-- bower:js -->
  <script  src="bower_components/jquery/dist/jquery.js"></script>
  <script
  src="bower_components/jquery-ui/jquery-ui.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script  src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
  <!-- endbower -->
  <!-- endbuild -->
  <!-- build:js(app) scripts/scripts.js -->
  <!-- 3rd party packages should lay before scripts in projects-->
  <script src="build-scripts/app.js"></script>
  <script src="build-scripts/controllers/main.js"></script>
  <script
  src="build-scripts/controllers/task/management.js"></script>
  <script
  src="build-scripts/controllers/label/management.js"></script>
  <script
  src="build-scripts/controllers/system/management.js"></script>
  <!-- endbuild -->

Webpack 是怎么做的呢？如清單 4，這個(gè)代碼是放在控制器中，顯示的是聲明依賴，這里使用了 ES6 的語(yǔ)法 import。相比較 wiredep 中的放在全局、使用相互引用的方式，Webpack 引用更加清晰，按需所取。這樣一來(lái)，bower 管理器也沒(méi)有必要存在了，因?yàn)?bower 作為服務(wù)于瀏覽器的包管理器，使用方式類似于 wiredep 這種互相引用方式，但是這種互相引用的方式在 Webpack 的聲明依賴的模式中，并不適用。

清單 4. Angular2 中的 JS 相互引用

import { AboutPage } from '../pages/about/about';
  import { ContactPage } from '../pages/contact/contact';
  import { HomePage } from '../pages/home/home';
  import { TabsPage } from '../pages/tabs/tabs';

所以，最后架構(gòu)變成了什么樣子？ 從 npm 管理后端、控制程序依賴、bower 管理前端 JS 依賴的架構(gòu)演化成 npm 來(lái)管理所有依賴、Webpack 完成打包、測(cè)試功能的架構(gòu)。如圖 1。

圖 1. 從 Angular1 到 Angular2 的技術(shù)演進(jìn)

ES6 成為規(guī)范

js 框架的發(fā)展可謂是百花齊放，但是有一項(xiàng)技術(shù)在業(yè)界普遍達(dá)成共識(shí)，那就是 ES6。作為新一代的 js 語(yǔ)法規(guī)范，不但在瀏覽器端得到了廣泛實(shí)現(xiàn)，而且應(yīng)用于 Node 引擎端。

ES 對(duì) JS 語(yǔ)言進(jìn)行了擴(kuò)充，使之更像是一門規(guī)范的面向?qū)ο笳Z(yǔ)言。而 TS（typescript）在此基礎(chǔ)之上，增加了類型定義及其檢查的功能。例如清單 5 的 ionic 初始化程序段，用到了 Platform, StatusBar 的自定義數(shù)據(jù)類型。

清單 5. Typescript 使用強(qiáng)類型聲明變量

export class MyApp {
    rootPage:any = TabsPage;
    constructor(platform: Platform, statusBar: StatusBar, splashScreen:
    SplashScreen) {
    platform.ready().then(() => {
    // Okay, so the platform is ready and our plugins are available.
    // Here you can do any higher level native things you might need.
    statusBar.styleDefault();
    splashScreen.hide();
    });
    }
   }

Angular-cli

最后要說(shuō)一下 Angular-cli 項(xiàng)目，現(xiàn)在各個(gè)框架提供者都會(huì)在框架之外提供一個(gè) CLI 工具，包括 ember-cli, vue-cli 等等，幫助生成框架的腳手架。

清單 6. 使用 Angular-cli 初始化項(xiàng)目

> npm install -g @angular/cli
   > ng new project
   > cd project
   > ng serve

總結(jié)

現(xiàn)在的 Web 開(kāi)發(fā)技術(shù)，大多使用了組件化的模塊組織結(jié)構(gòu)，采用 npm/Webpack 等工具統(tǒng)一管理模塊依賴。

Ionic3 開(kāi)發(fā)

ionic 是移動(dòng)端混合開(kāi)發(fā)技術(shù)的代表技術(shù)，基于 Angular。移動(dòng)混合開(kāi)發(fā)技術(shù)，既使用 Web 開(kāi)發(fā)技術(shù)，同時(shí)可以生成 IOS 和 Android native 的代碼。通過(guò) cordova，支持調(diào)用移動(dòng)設(shè)備特有的 API，包括照相機(jī)，麥克風(fēng)等等。隨著 Angular 升級(jí)到 2，ionic 也支持了 Angular2 和 TS 的語(yǔ)法。

Ionic-cli

Ionic 提供的 CLI 工具，類似于 Angular-cli。我們使用它初始化一個(gè)項(xiàng)目。如清單 7。

清單 7. 使用 Ionic-cli 初始化項(xiàng)目

> npm install -g ionic cordova
   > ionic start test tabs
   > cd test
   > ionic serve

全局導(dǎo)航方式

這里可以看到運(yùn)行 ionic start 創(chuàng)建腳手架的時(shí)候可以指定一個(gè)模板。如清單 7 中的 tabs。這里的模板分為兩種，代表了 ionic 默認(rèn)提供的兩種全局導(dǎo)航方式，tabs 和 menu。

tabs 布局提供了 app 下方的導(dǎo)航。如圖 2 的 home，about 的幾個(gè)選項(xiàng)；menu 布局提供了左邊的滑動(dòng)菜單，點(diǎn)擊按鈕，會(huì)出現(xiàn)滑動(dòng)選項(xiàng)，如圖 3。

圖 2. 底部的 tabs 布局方式

圖 3. 側(cè)邊欄的 menu 布局方式

這里提供實(shí)現(xiàn) menu 邏輯布局的代碼，如清單 8，需要在控制器中注入 MenuController。

清單 8. Menu 布局的控制器邏輯樣例

import { Component } from '@angular/core';
   import {MenuController, NavController} from 'ionic-angular';
   @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
   })
   export class HomePage {
    constructor(public navCtrl: NavController, menu: MenuController) {
    menu.enable(true);
    }
   }

清單 9. Menu 布局的前端顯示樣例

<ion-header>
    <ion-navbar>
    <button ion-button menuToggle icon-only>
   <ion-icon name='menu'></ion-icon>
    </button>
    <ion-title>
    Menus
    </ion-title>
    </ion-navbar>
   </ion-header>
   <ion-content padding>
    <button ion-button block menuToggle>Toggle Menu</button>
   </ion-content>
   <ion-menu [content]="content">
    <ion-header>
    <ion-toolbar>
    <ion-title>Menu</ion-title>
    </ion-toolbar>
    </ion-header>
    <ion-content>
    <ion-list>
    <button ion-item (click)="openPage(homePage)">
    Home
    </button>
    <button ion-item (click)="openPage(friendsPage)">
    Friends
    </button>
    <button ion-item (click)="openPage(eventsPage)">
    Events
    </button>
    <button ion-item (click)="closeMenu()">
    Close Menu
    </button>
    </ion-list>
    </ion-content>
   </ion-menu>
   <ion-nav id="nav" #content></ion-nav>

頁(yè)面布局元素

回到單個(gè)的頁(yè)面布局，ionic 提供 header 和 content 兩塊。每塊都可能包含多個(gè)元素，并且支持 grid 布局。Grid 類似于 bootstrap 前端布局的方式，它會(huì)把頁(yè)面分為 12 格，可以使用 col-x 標(biāo)明一個(gè)元素在頁(yè)面中占格的區(qū)域。這里給出一個(gè) List 元素在 grid 布局下的應(yīng)用代碼。如清單 10，采用了兩個(gè) col-6 把頁(yè)面分為兩列，它生成的樣式如圖 4。

清單 10. List 元素在 grid 布局下的樣例代碼

<ion-header>
    <ion-navbar>
    <ion-title>
    About
    </ion-title>
    </ion-navbar>
   </ion-header>
   <ion-content padding>
    <ion-grid>
    <ion-row>
    <ion-col col-6>
   <ion-list>
    <ion-list-header>
    Section I
    </ion-list-header>
    <ion-item>Terminator I</ion-item>
    <ion-item>Blade Runner</ion-item>
    <ion-item>
    <button ion-button color="danger" outline>Choose</button>
    </ion-item>
    </ion-list>
    </ion-col>
    <ion-col col-6>
    <ion-list>
    <ion-list-header>
    Section II
    </ion-list-header>
    <ion-item>Terminator II</ion-item>
    <ion-item>Blade Runner</ion-item>
    <ion-item>
    <button ion-button color="secondary"
    outline>Choose</button>
    </ion-item>
    </ion-list>
    </ion-col>
    </ion-row>
    </ion-grid>
   </ion-content>

圖 4. 使用 grid 分割頁(yè)面布局

在一個(gè) grid 控制的區(qū)域中，可以使用嵌套頁(yè)面的方式布局元素，例如圖 4 中的 list 元素。從大體上，這里的頁(yè)面布局元素分為兩大類。

• 列式元素，包括 List/Card 等
• 多頁(yè)面元素，占據(jù)整個(gè)頁(yè)，通過(guò)點(diǎn)擊實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和返回，包括 Modal/Segment/Slide 等

其他元素

當(dāng)然，還有一些頁(yè)面必須元素，例如按鈕、輸入框等用于頁(yè)面交互的元素；另外，也有提示框，腳標(biāo)等等提示元素。這塊和 Web 開(kāi)發(fā)很相似。

總結(jié)

相比于 Web 開(kāi)發(fā)，ionic 同樣使用了 grid 的 12 列布局模式。在整體的風(fēng)格方面，受限于移動(dòng)端的顯示大小，提供的頁(yè)面分割元素相對(duì)簡(jiǎn)單。在頁(yè)面交互中，ionic 提供 List，Card，Segment 等頁(yè)面控制風(fēng)格，我們可以根據(jù)需求選擇。

真機(jī)測(cè)試

最后一段，我們來(lái)說(shuō)一下真機(jī)測(cè)試。運(yùn)行添加 IOS 平臺(tái)命令來(lái)初始化 IOS 工作區(qū)。完成后，會(huì)在項(xiàng)目的 platforms 文件夾下有 ios 目錄，這里有生成供 Xcode 調(diào)用的代碼。如清單 11。

清單 11. Ionic 初始化 ios 和 android 平臺(tái)

> ionic cordova platform add ios
   > ionic cordova platform add android

使用 xcode 打開(kāi) plaforms/ios/test.xcworkspace 工作區(qū)。在設(shè)備里面，可以選擇模擬器例如 iphone6，iphone7，也可以選擇連接到 Mac 的真機(jī)。由于 IOS 開(kāi)發(fā)是要收費(fèi)的，所以我們需要配置一個(gè)臨時(shí)測(cè)試環(huán)境。

• 打開(kāi) Xcode->Preferences->Accounts->Manage Certificates，新增一個(gè) IOS Development 的證書。
• 修改 Resources 目錄下的.plist 文件的 Bundle identifier，給自己的項(xiàng)目填寫一個(gè)開(kāi)發(fā)組。
• 最后，在手機(jī)上打開(kāi)通用->設(shè)備管理，選擇信任開(kāi)發(fā)的 IOS 程序。

如圖 5，結(jié)果在真機(jī)上顯示。最后，祝大家早日學(xué)會(huì)用 ionic3/Angular2 開(kāi)發(fā)出自己的移動(dòng)端程序。

圖 5. 真機(jī)測(cè)試

參考資源

參考 Ionic 官方網(wǎng)站 ，了解更多 Ionic UI 組件

查看 Webpack 遷移的研究 ，了解 Webpack 的具體配置方式

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論