開(kāi)發(fā)環(huán)境與項(xiàng)目創(chuàng)建請(qǐng)參考 Cordova webapp實(shí)戰(zhàn)開(kāi)發(fā)（一）- 環(huán)境布置
項(xiàng)目環(huán)境已經(jīng)布置好
第一個(gè)項(xiàng)目也已經(jīng)創(chuàng)建好
開(kāi)始閱讀代碼
前面創(chuàng)建了一個(gè)tabs樣式的ionic項(xiàng)目
那就來(lái)找找那個(gè)頁(yè)面控制的控制底部的tab
注意以下頁(yè)面截自WebStorm, 編寫HTML代碼，Xcode對(duì)HTML的代碼提示不好，所以以WebStorm編寫
哪里引用這個(gè)頁(yè)面tabs.html的？
這個(gè)事例程序的入口是index.html 锨推，通過(guò)config.xml文件配置，基本很多配置都是在config.xml文件配置
關(guān)于 config.xml 可以參考這里
index.html怎樣引用tabs.html?
先來(lái)看看index.html頁(yè)面代碼構(gòu)成
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è)模塊（用module函數(shù)注入），并且起了一個(gè)名字：starter脆粥，這樣就會(huì)告訴Angular 去管理頁(yè)面上的所有DOM 元素砌溺。
body中就是一些ionic的界面組件了，每個(gè)組件的解釋和用法可參考該網(wǎng)站：組件api
ion-nav-view組件变隔，該組件的作用為：在app啟動(dòng)時(shí)规伐，$stateProvider就會(huì)檢查url，檢查它的索引匹配狀態(tài)匣缘，然后嘗試將對(duì)應(yīng)的html加載到<ion-nav-view>內(nèi)猖闪。###
.
這里沒(méi)有任何地方指向tabs.html
進(jìn)入app.js看看
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
聲明AngularJS模塊, 并把'ionic','starter.controllers','starter.services'傳入AngularJS主模塊，所有的結(jié)合起來(lái)我們就得到了Angular模塊肌厨。
這里叫做App模塊培慌，這將告訴HTML頁(yè)面這是一個(gè)AngularJS作用的頁(yè)面，它的內(nèi)容由AngularJS引擎來(lái)解釋柑爸。
目錄中吵护，有一個(gè)controllers.js與services.js,對(duì)應(yīng)的就是上面注冊(cè)的兩個(gè)模塊，
controllers.js代碼 $scope概念在AngularJS中尤為重要具體請(qǐng)參考這篇文章Cordova webapp實(shí)戰(zhàn)開(kāi)發(fā)（四）- AngularJS之$Scope
// 聲明AngularJS模塊， 與聲明Starter模塊中的starter.controllers對(duì)應(yīng)
angular.module('starter.controllers', [])
// 控制器實(shí)例化
.controller('controllerName',function($scope,...))
services.js代碼
factory()讓我們通過(guò)返回一個(gè)包含service方法和數(shù)據(jù)的對(duì)象來(lái)定義一個(gè)service馅而。在service方法里面我們可以注入services祥诽，比如 這里的chats等。
然后就可以在controller中注入
.controller('ChatsCtrl', function($scope, Chats , ...) {
// 忽略主體代碼
})
再來(lái)看.config里面
這一個(gè)是AngularJS比較重要的一個(gè)概念瓮恭，AngularJS路由
AngularJS 路由允許我們通過(guò)不同的 URL 訪問(wèn)不同的內(nèi)容雄坪。###
簡(jiǎn)單來(lái)說(shuō)就是配置頁(yè)面的URL，制定HTML模板屯蹦，指定Controller等
詳細(xì)AngularJS路由解釋维哈，請(qǐng)看Cordova webapp實(shí)戰(zhàn)開(kāi)發(fā)（四）- AngularJS之$Scope（作用域）
