從 Angular1 到 Angular2
Angular2 作為著名前端 MVVM 架構 Angular1 的繼承者，從一定程度上說，引領了新一代 Web 前端開發技術的革新。從最新版的 ember.js, react.js, vue.js 中，可以看到這幾種技術相互借鑒，取長補短，最終向一種技術方向演進。
組件化技術的崛起
Angular1 也有組件，叫另外一個名字：指令。在 Angular1 中，指令是 DOM 元素緊密結合的一段包含控制邏輯、數據管理的代碼。在指令中，我們可以清楚的看到 Angular1 對于 Jquery/DOM 技術的使用，以及手動對 Angular 組件進行生命周期的管理。要知道，這些在一般的 Angular 控制器/頁面模板的開發中，是不用被關心的。
Angular2 把組件擴大化，使這種類似于指令化的開發應用到頁面開發中。這樣有什么好處呢？
如果了解其他的開發技術，可以發現組件化漸漸的統治了前端開發領域。從 ember.js，vue.js，到 React.js，組件化技術都被廣泛應用。
從 grunt/gulp 到 Webpack 的技術革新
Task runner, 從最早的 grunt，到 gulp，是服務于應用程序的一些控制程序。有幫助開發人員進行開發、運行單元集成測試、幫助產品發布等等一系列功能，一般我們依賴于第三方的程序來實現，例如 gulp。但是 npm 本身就有 task runner 的功能，如清單 1，scripts 中包含了可以運行的 ionic 任務。使用類似 npm run clean 就可以運行任務，不需要其他依賴。
清單 1. Npm 配置提供 task runner 功能
{
//package.json
"name": "iamsaying",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {// 可運行的任務
"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"
}
//更多
}這就有一個問題了，為什么有 npm task runner，還要使用三方的 gulp 來完成此項功能呢？因為 npm task runner 太簡單了，從字面上看，只是一條 shell 命令。但是 gulp 能做什么呢？如清單 2 是一段用 gulp 向 index.html 中注入相應的 bower_components 的任務。可以看出，gulp 任務復雜，需要寫代碼。
清單 2. Gulp 配置注入 index.html 相關的 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。為什么這么說？因為，Webpack 通過插件提供的能力，可以完成打包、擾碼、開發、調試及 css 處理等任務。這塊和 grunt/gulp 的功能重復了。事實上，也可以使用 gulp 來運行 Webpack，但是這種設計冗余了，gulp 的存在完全沒有必要。
此外，Webpack 還有一項重要的功能，它改變了代碼之間依賴的表示方法。上面的 gulp task 中 wiredep 用來在 index.html 中注入項目中所有的 bower 依賴，如清單 3。可以看出，通過瀏覽器的支持，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，這個代碼是放在控制器中，顯示的是聲明依賴，這里使用了 ES6 的語法 import。相比較 wiredep 中的放在全局、使用相互引用的方式，Webpack 引用更加清晰，按需所取。這樣一來，bower 管理器也沒有必要存在了，因為 bower 作為服務于瀏覽器的包管理器，使用方式類似于 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';所以，最后架構變成了什么樣子？ 從 npm 管理后端、控制程序依賴、bower 管理前端 JS 依賴的架構演化成 npm 來管理所有依賴、Webpack 完成打包、測試功能的架構。如圖 1。
圖 1. 從 Angular1 到 Angular2 的技術演進
ES6 成為規范
js 框架的發展可謂是百花齊放，但是有一項技術在業界普遍達成共識，那就是 ES6。作為新一代的 js 語法規范，不但在瀏覽器端得到了廣泛實現，而且應用于 Node 引擎端。
ES 對 JS 語言進行了擴充，使之更像是一門規范的面向對象語言。而 TS（typescript）在此基礎之上，增加了類型定義及其檢查的功能。例如清單 5 的 ionic 初始化程序段，用到了 Platform, StatusBar 的自定義數據類型。
清單 5. Typescript 使用強類型聲明變量
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
最后要說一下 Angular-cli 項目，現在各個框架提供者都會在框架之外提供一個 CLI 工具，包括 ember-cli, vue-cli 等等，幫助生成框架的腳手架。
清單 6. 使用 Angular-cli 初始化項目
> npm install -g @angular/cli > ng new project > cd project > ng serve
總結
現在的 Web 開發技術，大多使用了組件化的模塊組織結構，采用 npm/Webpack 等工具統一管理模塊依賴。
Ionic3 開發
ionic 是移動端混合開發技術的代表技術，基于 Angular。移動混合開發技術，既使用 Web 開發技術，同時可以生成 IOS 和 Android native 的代碼。通過 cordova，支持調用移動設備特有的 API，包括照相機，麥克風等等。隨著 Angular 升級到 2，ionic 也支持了 Angular2 和 TS 的語法。
Ionic-cli
Ionic 提供的 CLI 工具，類似于 Angular-cli。我們使用它初始化一個項目。如清單 7。
清單 7. 使用 Ionic-cli 初始化項目
> npm install -g ionic cordova > ionic start test tabs > cd test > ionic serve
全局導航方式
這里可以看到運行 ionic start 創建腳手架的時候可以指定一個模板。如清單 7 中的 tabs。這里的模板分為兩種，代表了 ionic 默認提供的兩種全局導航方式，tabs 和 menu。
tabs 布局提供了 app 下方的導航。如圖 2 的 home，about 的幾個選項；menu 布局提供了左邊的滑動菜單，點擊按鈕，會出現滑動選項，如圖 3。
圖 2. 底部的 tabs 布局方式
圖 3. 側邊欄的 menu 布局方式
這里提供實現 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>
頁面布局元素
回到單個的頁面布局，ionic 提供 header 和 content 兩塊。每塊都可能包含多個元素，并且支持 grid 布局。Grid 類似于 bootstrap 前端布局的方式，它會把頁面分為 12 格，可以使用 col-x 標明一個元素在頁面中占格的區域。這里給出一個 List 元素在 grid 布局下的應用代碼。如清單 10，采用了兩個 col-6 把頁面分為兩列，它生成的樣式如圖 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 分割頁面布局
在一個 grid 控制的區域中，可以使用嵌套頁面的方式布局元素，例如圖 4 中的 list 元素。從大體上，這里的頁面布局元素分為兩大類。
其他元素
當然，還有一些頁面必須元素，例如按鈕、輸入框等用于頁面交互的元素；另外，也有提示框，腳標等等提示元素。這塊和 Web 開發很相似。
總結
相比于 Web 開發，ionic 同樣使用了 grid 的 12 列布局模式。在整體的風格方面，受限于移動端的顯示大小，提供的頁面分割元素相對簡單。在頁面交互中，ionic 提供 List，Card，Segment 等頁面控制風格，我們可以根據需求選擇。
真機測試
最后一段，我們來說一下真機測試。運行添加 IOS 平臺命令來初始化 IOS 工作區。完成后，會在項目的 platforms 文件夾下有 ios 目錄，這里有生成供 Xcode 調用的代碼。如清單 11。
清單 11. Ionic 初始化 ios 和 android 平臺
> ionic cordova platform add ios > ionic cordova platform add android
使用 xcode 打開 plaforms/ios/test.xcworkspace 工作區。在設備里面，可以選擇模擬器例如 iphone6，iphone7，也可以選擇連接到 Mac 的真機。由于 IOS 開發是要收費的，所以我們需要配置一個臨時測試環境。
如圖 5，結果在真機上顯示。最后，祝大家早日學會用 ionic3/Angular2 開發出自己的移動端程序。
圖 5. 真機測試
參考資源
參考 Ionic 官方網站 ，了解更多 Ionic UI 組件
查看 Webpack 遷移的研究 ，了解 Webpack 的具體配置方式
總結
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
