项目环境已经布置好
第一个项目也已经创建好
开始阅读代码
前面创建了一个tabs样式的ionic项目

那就来找找那个页面控制的控制底部的tab
注意以下頁面截自WebStorm,编写HTML代碼，Xcode对HTML的代码提示不好，所以以WebStorm编写

哪里引用这个页面tabs.html的？
这个事例程序的入口是index.html，通过config.xml文件配置，基本很多配置都是在config.xml文件配置
关于config.xml可以参考这里

index.html怎样引用tabs.html?
先来看看index.html页面代码构成

index.html中head中就是配置一些适配参数和引用一些js，包括app.js，controllers.js，services.js自己定义的3个js文件。
body中是绘制整个页面的，在body这个标签上加上了ng-app标记，表示body这个标签之内的东西由angularJs来解析，angularJs承包了body这个模块（用module函数注入），并且起了一个名字：starter，这样就会告诉Angular去管理页面上的所有DOM元素。
body中就是一些ionic的界面组件了，每个组件的解释和用法可参考该网站：组件api
ion-nav-view组件，该组件的作用为：在app启动时，$stateProvider就会检查url，检查它的索引匹配状态，然后尝试将对应的html加载到内。###
.

这里没有任何地方指向tabs.html
进入app.js看看

angular.module('starter',['ionic','starter.controllers','starter.services'])

声明AngularJS模块,并把'ionic','starter.controllers','starter.services'传入AngularJS主模块，所有的结合起来我们就得到了Angular模块。
这里叫做App模块，这将告诉HTML页面这是一个AngularJS作用的页面，它的内容由AngularJS引擎来解释。
目录中，有一个controllers.js与services.js,对应的就是上面注册的两个模块，
controllers.js代码$scope概念在AngularJS中尤为重要具体请参考这篇文章Cordovawebapp实战开发（四）-AngularJS之$Scope

//声明AngularJS模块，与声明Starter模块中的starter.controllers对应
angular.module('starter.controllers',[])

//控制器实例化
.controller('controllerName',function($scope,...))

services.js代码

factory()让我们通过返回一个包含service方法和数据的对象来定义一个service。在service方法里面我们可以注入services，比如这里的chats等。
然后就可以在controller中注入
.controller('ChatsCtrl',function($scope,Chats,...){
//忽略主体代码
})

再来看.config里面

这一个是AngularJS比较重要的一个概念，AngularJS路由
AngularJS路由允许我们通过不同的URL访问不同的内容。###
简单来说就是配置页面的URL，制定HTML模板，指定Controller等
详细AngularJS路由解释，请看Cordovawebapp实战开发（四）-AngularJS之$Scope（作用域）    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！