第一個(gè)ionic簡(jiǎn)例分析
上文中已經(jīng)將ionic的開(kāi)發(fā)環(huán)境搭建完畢墓猎，并且創(chuàng)建了一個(gè)帶有tab頁(yè)的項(xiàng)目蔬顾。
運(yùn)行效果圖：
項(xiàng)目代碼目錄圖：
ionic中是使用angularJs和ionic的頁(yè)面組件來(lái)進(jìn)行開(kāi)發(fā)的吱七，其代碼的核心目錄為上圖中的www目錄疾捍，代碼一般都寫(xiě)在該目錄下男杈，主要是html找前，js和css文件糟袁。（上圖中的hello.html文件不屬于該項(xiàng)目，可忽略）
整個(gè)項(xiàng)目運(yùn)作的流程如下：
1．用戶(hù)請(qǐng)求應(yīng)用起始頁(yè)躺盛。
2．用戶(hù)的瀏覽器向服務(wù)器發(fā)起一次HTTP 連接项戴，然后加載index.html 頁(yè)面，這個(gè)頁(yè)面里面包含了模板槽惫。
3．Angular 被加載到頁(yè)面中周叮，等待頁(yè)面加載完成辩撑，然后查找ng-app 指令，用來(lái)定義模板邊界仿耽。
4．Angular 遍歷模板合冀，查找指令和綁定關(guān)系，這將觸發(fā)一系列動(dòng)作：注冊(cè)監(jiān)聽(tīng)器项贺、執(zhí)行一些DOM 操作君躺、從服務(wù)器獲取初始化數(shù)據(jù)。這項(xiàng)工作的最后結(jié)果是敬扛，應(yīng)用將會(huì)啟動(dòng)起來(lái)晰洒，并且模板被轉(zhuǎn)換成了DOM 視圖。
5．連接到服務(wù)器去加載需要展示給用戶(hù)的其他數(shù)據(jù)啥箭。
下面具體分析一下代碼：
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">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
index.html中 head中就是配置一些適配參數(shù)和引用一些js谍珊，包括app.js，controllers.js急侥，services.js 自己定義的3個(gè)js文件砌滞。
body中是繪制整個(gè)頁(yè)面的，在body這個(gè)標(biāo)簽上加上了ng-app 標(biāo)記坏怪，表示body這個(gè)標(biāo)簽之內(nèi)的東西由angularJs來(lái)解析贝润，angularJs承包了body這個(gè)魚(yú)塘，并且起了一個(gè)名字：starter铝宵，這樣就會(huì)告訴Angular 去管理頁(yè)面上的所有DOM 元素打掘。
body中就是一些ionic的界面組件了，每個(gè)組件的解釋和用法可參考該網(wǎng)站：組件api
在最后一行鹏秋，有個(gè)ion-nav-view組件尊蚁，該組件的作用為：在app啟動(dòng)時(shí)，$stateProvider就會(huì)檢查url侣夷，檢查它的索引匹配狀態(tài)横朋，然后嘗試將對(duì)應(yīng)的html加載到<ion-nav-view>內(nèi)。
tabs.html
<!--
Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Dashboard Tab -->
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>
<!-- Account Tab -->
<ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
</ion-tabs>
該html即為整個(gè)布局頁(yè)面百拓，3個(gè)tab頁(yè)：Status琴锭，Chats，Account
定義了3個(gè)tab衙传，每個(gè)tab中有一個(gè)ion-nav-view 决帖，還定義了tab 頁(yè)選中和沒(méi)選中時(shí)的圖標(biāo)，以及指定超鏈接目標(biāo)的 URL
tab-dash.html
<ion-view view-title="Dashboard">
<ion-content class="padding">
<div class="list card">
<div class="item item-divider">Recent Updates</div>
<div class="item item-body">
<div>
There is a fire in <b>sector 3</b>
</div>
</div>
</div>
<div class="list card">
<div class="item item-divider">Health</div>
<div class="item item-body">
<div>
You ate an apple today!
</div>
</div>
</div>
<div class="list card">
<div class="item item-divider">Upcoming</div>
<div class="item item-body">
<div>
You have <b>29</b> meetings on your calendar tomorrow.
</div>
</div>
</div>
</ion-content>
</ion-view>
此html中是純的靜態(tài)代碼蓖捶，用到了較多的ionic組件古瓤，可參考上面的api了解每個(gè)組件的用法。
-----重點(diǎn)來(lái)了-----
tab-chats.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>
這是第2個(gè)tab頁(yè)，是一個(gè)list列表落君。首先定義了頁(yè)面的標(biāo)題：Chats ，然后定義了一個(gè)列表亭引，接著定義列表的item绎速，其中有這么一句：ng-repeat="chat in chats" , ng-repeat是angular的標(biāo)簽，表示遍歷焙蚓，后面的寫(xiě)法應(yīng)該就是遍歷chats了纹冤，那么問(wèn)題來(lái)了：chats從哪來(lái)的呢？
帶著疑問(wèn)繼續(xù)看代碼
先看一下angularJs中的一個(gè)重要概念
$scope概念
$scope 的使用貫穿整個(gè) Angular App 應(yīng)用,它與數(shù)據(jù)模型相關(guān)聯(lián),同時(shí)也是表達(dá)式執(zhí)行的上下文.有了 $scope 就在視圖和控制器之間建立了一個(gè)通道,基于作用域視圖在修改數(shù)據(jù)時(shí)會(huì)立刻更新 $scope,同樣的 $scope 發(fā)生改變時(shí)也會(huì)立刻重新渲染視圖购公。其實(shí)就是雙向綁定萌京。
有了 $scope 這樣一個(gè)橋梁,應(yīng)用的業(yè)務(wù)代碼可以都在 controller 中,而數(shù)據(jù)都存放在controller 的 $scope 中。
$scope 的作用
$scope 對(duì)象在 Angular 中充當(dāng)數(shù)據(jù)模型的作用,也就是一般 MVC 框架中 Model 得角色.但又不完全與通常意義上的數(shù)據(jù)模型一樣,因?yàn)?$scope 并不處理和操作數(shù)據(jù),它只是建立了視圖和 HTML 之間的橋梁,讓視圖和 Controller 之間可以友好的通訊宏浩。
再進(jìn)一步系統(tǒng)的劃分它的作用和功能:
- 提供了觀(guān)察者可以監(jiān)聽(tīng)數(shù)據(jù)模型的變化
- 可以將數(shù)據(jù)模型的變化通知給整個(gè) App
- 可以進(jìn)行嵌套,隔離業(yè)務(wù)功能和數(shù)據(jù)
- 給表達(dá)式提供上下文執(zhí)行環(huán)境
在 Javascript 中創(chuàng)建一個(gè)新的執(zhí)行上下文,實(shí)際就是用函數(shù)創(chuàng)建了一個(gè)新的本地上下文,在 Angular 中當(dāng)為子 DOM 元素創(chuàng)建新的作用域時(shí),其實(shí)就是為子 DOM 元素創(chuàng)建了一個(gè)新的執(zhí)行上下文知残。
$scope 生命周期
Angular 中也有一個(gè)'事件'的概念,比如當(dāng)一個(gè)綁定了 ng-model的 input 值發(fā)生變化時(shí),或者一個(gè) ng-click 的 button 被點(diǎn)擊時(shí),Angular 的事件循環(huán)就會(huì)啟動(dòng).事件循環(huán)是 Angular 中非常非常核心的一個(gè)概念,因?yàn)椴皇潜疚闹髦妓圆欢嗾f(shuō),感興趣的可以自己看看資料.這里事件就在 Angular 執(zhí)行上下文中處理,$scope 就會(huì)對(duì)定義的表達(dá)式求值.此時(shí)事件循環(huán)被啟動(dòng), Angular 會(huì)監(jiān)控應(yīng)用程序內(nèi)所有對(duì)象,臟值檢查循環(huán)也會(huì)啟動(dòng)。
$scope 的生命周期有4個(gè)階段:
- 創(chuàng)建
控制器或者指令（ng-controller）創(chuàng)建時(shí), Angular 會(huì)使用 $injector 創(chuàng)建一個(gè)新的作用域,然后在控制器或指令運(yùn)行時(shí),將作用域傳遞進(jìn)去比庄。
- 鏈接
Angular 啟動(dòng)后會(huì)將所有 $scope 對(duì)象附加或者說(shuō)鏈接到視圖上,所有創(chuàng)建 $scope 對(duì)象的函數(shù)也會(huì)被附加到視圖上.這些作用域?qū)?huì)注冊(cè)當(dāng) Angular 上下文發(fā)生變化時(shí)需要運(yùn)行的函數(shù).也就是 $watch 函數(shù), Angular 通過(guò)這些函數(shù)或者何時(shí)開(kāi)始事件循環(huán)求妹。
- 更新
一旦事件循環(huán)開(kāi)始運(yùn)行,就會(huì)開(kāi)始執(zhí)行自己的臟值檢測(cè).一旦檢測(cè)到變化,就會(huì)觸發(fā) $scope 上指定的回調(diào)函數(shù)。
- 銷(xiāo)毀
通常來(lái)講如果一個(gè) $scope 在視圖中不再需要, Angular 會(huì)自己清理它.當(dāng)然也可以通過(guò) $destroy() 函數(shù)手動(dòng)清理佳窑。
可以參考以下網(wǎng)站來(lái)進(jìn)一步了解$scope ：
http://www.tuicool.com/articles/nUzMz2J 或者
http://blog.csdn.net/aitangyong/article/details/40267583?utm_source=tuicool&utm_medium=referral
筆者總結(jié)一下：
一個(gè)controller對(duì)應(yīng)了一個(gè)$scope對(duì)應(yīng)了一個(gè)DOM制恍，強(qiáng)調(diào)一下是DOM，不一定是body神凑，也有可能是div净神，總之就是一個(gè)標(biāo)簽都可以配置一個(gè)ng-controller。而這個(gè)DOM范圍內(nèi)溉委，都可以引用$scope中存儲(chǔ)的數(shù)據(jù)或者函數(shù)
接著上面的問(wèn)題：chats從哪來(lái)的呢鹃唯？
從來(lái)的解釋中可以看出，這個(gè)chats定是存儲(chǔ)在tab-chats.html對(duì)應(yīng)的某個(gè)$scope中薛躬，由于tab-chats.html中沒(méi)有直接的DOM指出一個(gè)具體的controller俯渤，否者我們就直接去controller中找$scope就行了。
但是我們?cè)赼pp.js文件中發(fā)現(xiàn)一些端倪：
app.js源代碼
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.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 && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.platform.ios.tabs.style('standard');
$ionicConfigProvider.platform.ios.tabs.position('bottom');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('bottom');
$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('left');
$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');
$ionicConfigProvider.platform.ios.views.transition('ios');
$ionicConfigProvider.platform.android.views.transition('android');
})
.config(function ($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
// abstract: true 表明此狀態(tài)不能被顯性激活型宝，只能被子狀態(tài)隱性激活
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
直接看到以下代碼：
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
tab-chats.html頁(yè)面對(duì)應(yīng)的controller為ChatsCtrl八匠，這時(shí)候我們就可以去controllers.js中找到名字為ChatsCtrl的controller了。
controllers.js
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {})
.controller('ChatsCtrl', function($scope, Chats) {
$scope.chats = Chats.all();
$scope.remove = function(chat) {
Chats.remove(chat);
};
})
.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
$scope.chat = Chats.get($stateParams.chatId);
})
.controller('AccountCtrl', function($scope) {
$scope.settings = {
enableFriends: true
};
});
看到 $scope.chats = Chats.all(); 給chats賦值了趴酣，此處的chats即為前面提到問(wèn)題的答案梨树，tab-chats.html頁(yè)面的chats的來(lái)源即為此處，并且已經(jīng)賦值了岖寞。
那么問(wèn)題又來(lái)了抡四，它（chats ）的值是什么呢？
從上面的代碼可以看出它的值為：Chats.all() 但是Chats是什么呢？
其實(shí)Chats和$scope一樣都是服務(wù)指巡，只不過(guò)$scope是系統(tǒng)服務(wù)（就是有系統(tǒng)來(lái)定義的）淑履，而Chats是自定義服務(wù)，需要自己寫(xiě)代碼定義藻雪。
我們?cè)趕ervices.js中可以找到Chats服務(wù)秘噪。
services.js代碼
angular.module('starter.services', [])
.factory('Chats', function() {
var chats = [{
id: 0,
name: 'Ben Sparrow',
lastText: 'You on your way?',
face: 'https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png'
}, {
id: 1,
name: 'Max Lynx',
lastText: 'Hey, it\'s me',
face: 'https://avatars3.githubusercontent.com/u/11214?v=3&s=460'
}, {
id: 2,
name: 'Adam Bradleyson',
lastText: 'I should buy a boat',
face: 'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg'
}, {
id: 3,
name: 'Perry Governor',
lastText: 'Look at my mukluks!',
face: 'https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png'
}, {
id: 4,
name: 'Mike Harrington',
lastText: 'This is wicked good ice cream.',
face: 'https://pbs.twimg.com/profile_images/578237281384841216/R3ae1n61.png'
}];
return {
all: function() {
return chats;
},
remove: function(chat) {
chats.splice(chats.indexOf(chat), 1);
},
get: function(chatId) {
for (var i = 0; i < chats.length; i++) {
if (chats[i].id === parseInt(chatId)) {
return chats[i];
}
}
return null;
}
};
});
上面的factory('Chats', function() 中的 Chats 自定義的服務(wù)名稱(chēng) ，該服務(wù)定義了返回值勉耀，返回了3個(gè)函數(shù)：all() ,
remove() 指煎，get() 。
所以上面的Chats.all()的值是什么也就很清楚了便斥，即是var chats 這個(gè)對(duì)象數(shù)組至壤。
關(guān)于如何自定義服務(wù)，可參考這個(gè)網(wǎng)站 http://my.oschina.net/tanweijie/blog/295067
從上面的網(wǎng)站中枢纠，了解到這一點(diǎn)：
在A(yíng)ngular里面像街，services作為單例對(duì)象在需要到的時(shí)候被創(chuàng)建，只有在應(yīng)用生命周期結(jié)束的時(shí)候（關(guān)閉瀏覽器）才會(huì)被清除京郑。而controllers在不需要的時(shí)候就會(huì)被銷(xiāo)毀了宅广。
說(shuō)的是服務(wù)的生命周期，很重要的一點(diǎn)些举。
基本上分析了demo中的大部分跟狱，不想寫(xiě)了，下一次再寫(xiě)户魏，分析一下app.js中的一些東西驶臊。
文章中用到項(xiàng)目地址 :https://github.com/viphsx123/myApp
完。
參考鏈接：
http://my.oschina.net/blogshi/blog/316745
http://www.tuicool.com/articles/nUzMz2J
http://blog.csdn.net/aitangyong/article/details/40267583?utm_source=tuicool&utm_medium=referral
