使用ionic建立 Hybrid Mobile App

項目初始化，參考官方文檔：http://ionicframework.com/getting-started/

咱們 $ ionic start myApp tabs 爲例，初始化完成以後，項目結構應該是這樣的：
{}

index.html： 項目主頁面，這個頁面目前不須要改，當你須要引入別的js或者css是能夠在這裏添加；

templates/*.html： 各個模塊對應的模板，會在 /www/js/app.js 中指定；

app.js： 定義項目module,routers,template 等一些配置 ，後面要修改配置都會在這個文件裏，大體代碼所示；

javascriptangular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])// [ ... ]能夠引入別的module
    .run(function ($ionicPlatform) {
        $ionicPlatform.ready(function () {
            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            if (window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if (window.StatusBar) {
                // org.apache.cordova.statusbar required
                StatusBar.styleDefault();
            }
        });
    })

    .config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            /* ... */
            .state('tab.chat-detail', {
                url: '/chats/:chatId',//對應的 url規則， chatId能夠在 ChatDetailCtrl  中使用$stateParams.chatId來獲取
                views: {
                    'tab-chats': {
                        templateUrl: 'templates/chat-detail.html',//這裏指定模板文件
                        controller: 'ChatDetailCtrl'//這裏指定 的 controller 在 controller.js 中聲明
                    }
                }
            });
        $urlRouterProvider.otherwise('/tab/dash');
    });

controllers.js： 編寫每一個controller對應的具體功能，頁面要綁定什麼事件、有哪些功能都須要在這裏添加；

services.js： 經過factory的方式，定義一些服務，如加載數據等；

ionic 預約義了不少經常使用的組件如：Lists、Loading、Popover、Tabs等；具體能夠在 http://ionicframework.com/docs/ 查看；

以外的就是AngularJs的知識，好比指令；

html<ion-view view-title="Chats">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
        <img ng-src="{{chat.face}}">
        <h2>{{chat.name}}</h2>
        <p>{{chat.lastText}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>

        <ion-option-button class="button-assertive" ng-click="remove(chat)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

ng-repeat 能夠遍歷數組，語法和模板語言差很少；

ng-src 對應img的src，這麼寫好處是避免在html初始化時去加載無效的img路徑{{chat.face}}；

ng-click 能夠綁定點擊事件，remove方法在對應的controller中聲明；

原文地址：http://nero-zou.com/use-ionic-build-hybrid-mobile-app/