利用Angular2 + Ionic3开发IOS应用实例教程

从 Angular1 到 Angular2

Angular2 作为著名前端 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 功能

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