Ionic

Ionic简介

Ionic是一个开源的前端开发框架，可以用HTML,CSS,JS来开发Hybird App.

Ionic Stack

  • AngularJS
  • NodeJS
  • Sass
  • Bower
  • Cordova
  • Gulp
  • Travis CI
  • UI-Router

Start building with Ionic

  • Install

    npm install -g cordova ionic

  • Create

    ionic start myApp tabs
    Ionic 项目结构

  • Run

    ionic serve

Ionic JS&CSS

  • Headers/Footers
  • Keyboard
  • Navigation
  • Keyboard
  • Side Menus
  • List

Code Ionic

Ionic的代码基本都在www文件夹内完成

UI-Router

UI-Router是AngularJS的一个路由框架，是ng-router的替代品。相比于ng-router可以更简单的做到深层次嵌套路由。用法和ng-router相似。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
angular.module('cmb', ['ionic'])
     .config(function ($stateProvider, $urlRouterProvider) {
       $stateProvider

         .state('tab', {
           url: '/tab',
           abstract: true,
           templateUrl: 'templates/tabs.html'
         })

         .state('tab.life', {
           url:'/life',
           views: {
             'tab-life': {
               templateUrl: 'templates/tab-life.html'
             }
           }
         });

   $urlRouterProvider.otherwise('/tab/life');
 })

页面

  • 在index.html中添加
1
2
3
4
5
6
<body ng-app="cmb">
    <ion-nav-view>

    </ion-nav-view>

  </body>

Then on app start, $stateProvider will look at the url, see it matches the index state,
and then try to load home.html into the .

  • 添加 templates/tabs.html文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ion-tabs class="tabs-icon-top">

  <ion-tab title="最爱" icon="icon ion-star" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

  <ion-tab title="生活" icon="icon ion-ios-cart" href="#/tab/life">
    <ion-nav-view name="tab-life"></ion-nav-view>
  </ion-tab>

  <ion-tab title="助手" icon="icon ion-bag" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>

  <ion-tab title="银行" icon="icon ion-cash" href="#/tab/bank">
    <ion-nav-view name="tab-bank"></ion-nav-view>
  </ion-tab>

</ion-tabs>
  • 添加templates/tab-life.html页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<ion-header-bar class="bar-dark">
  <h1 class="title">招商银行</h1>
  <button class="button button-icon" ng-click="newTask()">
    <i class="icon ion-person"></i>
  </button>
</ion-header-bar>
<ion-view>
  <ion-content>
    <div class="item item-divider">
    </div>
    <div class="list">

      <a class="item item-icon-left" href="#">
        <i class="icon ion-email"></i>
        Check mail
      </a>

      <a class="item item-icon-left item-icon-right" href="#">
        <i class="icon ion-chatbubble-working"></i>
        Call Ma
        <i class="icon ion-ios-telephone-outline"></i>
      </a>
    </div>
  </ion-content>
</ion-view>

这样就可以看到刚刚写界面了