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

图 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

全局导航方式