標籤：
歡迎加群學習：457351423 這裡有4000多部學習視頻，涵蓋各種技術，有需要的歡迎進群學習！
一、布局
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儲存。下篇給一個側邊欄菜單和標籤選項卡的案例，作為日後開發的一個基礎骨架。
歡迎加群學習：457351423 這裡有4000多部學習視頻，涵蓋各種技術，有需要的歡迎進群學習！
Cordova+angularjs+ionic+vs2015開發（四）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
