一、布局
Ionic模板提供了一個側邊欄菜單示例項目和標簽選項卡示例項目。本案例將兩個布局進行結合，簡單介紹下Ionic的布局。Ionic采用自定義標簽和標准Html標簽相結合。相對於全部使用div方式來說，自定義標簽的可讀性更強。Ionic的界面呈現既可以使用靜態頁面方式呈現，也可以使用Angular提供的路由機制和控制器來控制控制頁面的呈現及數據綁定。
使用VS創建一個空白的Ionic項目。項目中包含一個index.html頁面和app.js的腳本。依照慣例修改項目的基本屬性后，打開index.html頁面和app.js腳本。
<body ng-app="starter"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">Ionic Blank Starter</h1> </ion-header-bar> <ion-content> </ion-content> </ion-pane> </body>
在body標簽上有一個自定義的屬性ng-app，該屬性是Angular用於標識應用程序模塊的，一般為程序啟動模塊。<ion-pane>標簽內容為ionic標簽，關於Ionic標簽請查閱相關文檔，這里不再贅述。
angular.module('starter', ['ionic'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
angular.module('starter',[])用於定義應用程序的啟動模塊，同時加載ionic模塊。以上代碼是連綴寫法，正常寫法如下：
angular.module().run().config();
或者：
var app = angular.module(); app.run(); app.config();
這樣寫，基本閱讀起來就沒有問題了。
run()方法用於啟動運行程序。后續會加入config()等相關方法。
二、路由和控制器
在www目錄下創建一個templates文件夾並添加一個home.html空白頁面。同時在js文件夾中創建一個controllers.js文件。
修改index.html內容如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="js/platformOverrides.js"></script> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="cordova.js"></script> <script src="js/app.js"></script> <!--添加controllers引用--> <script src="js/controllers.js"></script> </head> <body ng-app="starter"> <!--添加導航視圖標簽--> <ion-nav-view></ion-nav-view> </body> </html>
將原來body內容添加到home.html中，並添加一個視圖標簽：
<ion-view view-title="Home"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">標題</h1> </ion-header-bar> <ion-content> </ion-content> </ion-pane> </ion-view>
打開app.js,在run()方法后連綴config()方法，配置內容如下：
.config(function ($stateProvider, $urlRouterProvider) { $stateProvider.state('app', { url: '/app', templateUrl: 'templates/home.html' }); $urlRouterProvider.otherwise('/app'); });
這里使用$stateProvider.state()方法聲明一個狀態（路由）。$urlRouterProvider.otherwise('/app')設置默認路由。上述代碼功能是在程序啟動時，請求/app的路由，該路由導向home.html視圖模板，並將該視圖內容渲染到<ion-nav-view>導航視圖標簽上。
控制器的作用就是在視圖渲染前將數據送到視圖處理。而數據內容我們可以使用網絡請求從服務器上獲取，也可以使用本地數據等。
例如上述案例需要在視圖渲染之前，動態顯示標題，在控制器中處理如下：
打開controllers.js文件，添加如下代碼：
angular.module('starter.controllers', [])
.controller('HomeCtrl', function ($scope) {
$scope.msg = 'Hello';
});
同時修改app.js文件相關配置，完整app.js為內容如下：
angular.module('starter', ['ionic', "starter.controllers"]) //添加控制器模塊
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('app', {
url: '/app',
templateUrl: 'templates/home.html',
controller: 'HomeCtrl' //增加控制器處理
});
$urlRouterProvider.otherwise('/app');
});
在home.html中就可以使用表達式進行數據綁定了。
<ion-view view-title="Home"> <ion-pane> <ion-header-bar class="bar-stable"> <!--這里修改為數據綁定，動態上下文中獲取--> <h1 class="title">{{msg}}</h1> </ion-header-bar> <ion-content> </ion-content> </ion-pane> </ion-view>
angular的綁定表達式使用{{}}這種方式。
結束語：以上就是一個最簡單的請求-路由-控制的案例。對於數據的操作一般是放在服務端處理的，手機程序使用$http對象從服務器上獲取數據即可。本地數據存儲，最簡單的方式就是使用json存儲。下篇給一個側邊欄菜單和標簽選項卡的案例，作為日后開發的一個基礎骨架。