使用 Angular2 和 Ionic3 开发 iOS 应用（1）从 Angular1 到 Angular2

look_w

从 Angular1 到                Angular2Angular2 作为著名前端 MVVM 架构 Angular1 的继承者，从一定程度上说，引领了新一代 Web 前端开发技术的革新。从最新版的                ember.js, react.js, vue.js 中，可以看到这几种技术相互借鉴，取长补短，最终向一种技术方向演进。
组件化技术的崛起Angular1 也有组件，叫另外一个名字：指令。在 Angular1 中，指令是 DOM                元素紧密结合的一段包含控制逻辑、数据管理的代码。在指令中，我们可以清楚的看到 Angular1 对于 Jquery/DOM 技术的使用，以及手动对                Angular 组件进行生命周期的管理。要知道，这些在一般的 Angular 控制器/页面模板的开发中，是不用被关心的。
Angular2 把组件扩大化，使这种类似于指令化的开发应用到页面开发中。这样有什么好处呢？

• 增加了开发人员页面开发的灵活性
• 使用新的文件引用技术，这点我们在 Webpack 的革新中具体阐述
• css 的分离化管理

如果了解其他的开发技术，可以发现组件化渐渐的统治了前端开发领域。从 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 功能

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

{          //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 文件

1 2 3 4 5 6 7 8

//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 文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<!-- 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 相互引用

1 2 3 4

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 使用强类型声明变量

1 2 3 4 5 6 7 8 9 10 11 12

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 初始化项目

1 2 3 4

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

总结现在的 Web 开发技术，大多使用了组件化的模块组织结构，采用 npm/Webpack 等工具统一管理模块依赖。