从 Angular1 到 Angular2

创新互联长期为成百上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为大化企业提供专业的成都做网站、网站制作，大化网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

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

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

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 布局的前端显示样例

    
    
   
    
    
    Menus
    
    
   
   
    Toggle Menu
   
   
    
    
    Menu
    
    
    
    
    
    Home
    
    
    Friends
    
    
    Events
    
    
    Close Menu
    
    
    
   
   

页面布局元素

回到单个的页面布局，ionic 提供 header 和 content 两块。每块都可能包含多个元素，并且支持 grid 布局。Grid 类似于 bootstrap 前端布局的方式，它会把页面分为 12 格，可以使用 col-x 标明一个元素在页面中占格的区域。这里给出一个 List 元素在 grid 布局下的应用代码。如清单 10，采用了两个 col-6 把页面分为两列，它生成的样式如图 4。

清单 10. List 元素在 grid 布局下的样例代码

    
    
    About
    
    
   
   
    
    
    
   
    
    Section I
    
    Terminator I
    Blade Runner
    
    Choose
    
    
    
    
    
    
    Section II
    
    Terminator II
    Blade Runner
    
    Choose
    
    
    
    
    
   

图 4. 使用 grid 分割页面布局

在一个 grid 控制的区域中，可以使用嵌套页面的方式布局元素，例如图 4 中的 list 元素。从大体上，这里的页面布局元素分为两大类。

• 列式元素，包括 List/Card 等
• 多页面元素，占据整个页，通过点击实现页面跳转和返回，包括 Modal/Segment/Slide 等

其他元素

当然，还有一些页面必须元素，例如按钮、输入框等用于页面交互的元素；另外，也有提示框，脚标等等提示元素。这块和 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 开发是要收费的，所以我们需要配置一个临时测试环境。

• 打开 Xcode->Preferences->Accounts->Manage Certificates，新增一个 IOS Development 的证书。
• 修改 Resources 目录下的.plist 文件的 Bundle identifier，给自己的项目填写一个开发组。
• 最后，在手机上打开通用->设备管理，选择信任开发的 IOS 程序。

如图 5，结果在真机上显示。最后，祝大家早日学会用 ionic3/Angular2 开发出自己的移动端程序。

图 5. 真机测试

参考资源

参考 Ionic 官方网站 ，了解更多 Ionic UI 组件

查看 Webpack 迁移的研究 ，了解 Webpack 的具体配置方式

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对创新互联的支持。