用 Angular 和 Ionic 构建混合应用

大纲

原生 VS 混合应用 Ionic 入门 Ionic UI 组件 Ionic 生态 Demo - 理财账户

原生 VS 混合

“我们要搞个移动应用！”

原生应用的缺点

需要掌握各个平台的语言框架
完全分离的代码库
需要很长的开发时间

我们是不是要开发 facebook app？

有数以万刀的预算 ?
有大量的原生应用开发者?
这个App有亿级别的营收压力？
如果是，那就选 native 吧
...但是到了今天， native 和 hybrid 不是非黑即白的

“混合应用太慢了！” “时代在变，今非昔比了'”

移动设备在快速发展！

Year Device Processor RAM 2007 iPhone 620 MHz 128 MB 2010 iPhone 4 1 GHz 512 MB 2015 iPhone 6 1.4 GHz dual-core 1 GB

Web 标准也在快速发展！

caniuse.com 要利用好！
Android 的 Webview 现在是基于 chromium
iOS 用户的设备系统总是保持最新

https://mixpanel.com/trends/#report/ios_8/from_date:-141,report_unit:day,to_date:0

https://mixpanel.com/trends/#report/android_os_adoption

可恶的 Android OEM!

Intro Ionic

“Hello.”

使用熟悉的 Web 标准

(You'll feel right at home)

http://www.google.com/trends/explore#q=angularjs%2C%20ember.js%2C%20knockoutjs%2C%20backbonejs&date=8%2F2011%2037m&cmpt=q

站在 Angular 的肩膀上

开发大型 WebApp 的最佳实践
扩展了 HTML 的词汇
用 directive 和 service 来使用 UI 组件

聚焦在 Native

参考 native SDKs 来设计
构建在 Cordova 之上

性能加速

硬件加速的动画
最小化的DOM 修改
移除了 300 毫秒的延迟

平台独特性

直白的 CSS

完善的视觉系统
简单而干净
方便定制
独立的CSS (不依赖 Ionic's JavaScript)
ionicframework.com/docs/components

CSS基于 scss 来做预处理
快速让你的网页变成原生应用的样子
CSS 被设计的方便 override
通过 Variables 改变默认设置
80+ 常用又可复用的 mixins

Ionicons

包含超过 700 MIT 授权的 font-icons

ionicons.com

“各部分如何协同？”

Your App

Ionic

AngularJS

WebView (Cordova)

Native SDK

Ionic's 步伐

18,000+ Github Stars
前 50 被最多关注的 Github 库
持续的前10名的流行 JS Github 库
Ionic CLI 大概每天 2,300 次下载
400,000+ Ionic 应用通过 Ionic-cli 被创建
Alpha 发布: 2013 11月
Beta 发布: 2014 3月
Candidate 发布: 2015 冬

UI 组件

Lists

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  <a class="item" href="#">
    Kit Kat
  </a>

  ...
</div>

Complex Lists

<ion-list>

  <ion-item ng-repeat="item in items" item="item">
    List Item {{ item.id }}
  </ion-item>
</ion-list>

Collection Repeat

<div class="list">
  <div collection-repeat="c in contacts">
    <h2>{{ c.name }}</h2>
    <p>{{ c.email }}</p>
  </div>
</div>

Navigation

<ion-nav-bar>
  <ion-nav-back-button>
    Back
  </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>

Tabs

<ion-tabs>

  <ion-tab title="Home" icon="ion-home">
    <ion-nav-view name="home"></ion-nav-view>
  </ion-tab>

  <ion-tab title="About" icon="ion-information">
    <ion-nav-view name="about"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Contact" icon="ion-ios7-world">
    <ion-nav-view name="contact"></ion-nav-view>
  </ion-tab>

</ion-tabs>

Side Menu

<ion-side-menus>

  <ion-side-menu-content>

    <ion-nav-view name="menuContent"></ion-nav-view>

  </ion-side-menu-content>

  <ion-side-menu side="left">

    <ion-header-bar class="bar-assertive">
      <h1 class="title">Left Menu</h1>
    </ion-header-bar>

    <ion-content>
      ...
    </ion-content>

  </ion-side-menu>

</ion-side-menus>

Slide Box

<ion-slide-box on-slide-changed="change(index)">
  <ion-slide>
    Slide 1
  </ion-slide>
  <ion-slide>
    Slide 2
  </ion-slide>
  <ion-slide>
    Slide 3
  </ion-slide>
</ion-slide-box>

Action Sheet

$ionicActionSheet.show({
  titleText: 'Action Sheet Example',
  buttons: [
    { text: 'Share' },
    { text: 'Move' },
  ],
  destructiveText: 'Delete',
  cancelText: 'Cancel',
  buttonClicked: function(index) {
    console.log('BUTTON CLICKED', index);
    return true;
  }
});

Popover

$ionicPopover.fromTemplateUrl('popover.html',
  function(popover) {
    $scope.popover = popover;
  }
);

<ion-popover-view>
  <ion-header-bar>
    <h1 class="title">My Popover Title</h1>
  </ion-header-bar>
  <ion-content class="padding">
    Hello!
  </ion-content>
</ion-popover-view>

Modal

$ionicModal.fromTemplateUrl('modal.html', {
  scope: $scope
}).then(function(modal) {
  $scope.modal = modal;
});

Pull to Refresh

<ion-refresher on-refresh="doRefresh()" pulling-text="Pull to refresh..." refreshing-text="Refreshing!" refreshing-icon="ion-loading-c">
</ion-refresher>

Ionic Ecology

Ionic Cli

活跃的社区

Ionic Showcase

showcase.ionicframework.com

Demo 时间!

May the demo gods be with us

开始使用 Ionic!

开始使用指南ionicframework.com/getting-started

文档ionicframework.com/docs

社区论坛forum.ionicframework.com

开放源码github.com/driftyco/ionic

原生 VS 混合 – Intro Ionic – UI 组件

gaohailang