Cordova webapp实战开发（二）- 代码初探

开发环境与项目创建请参考 Cordova webapp实战开发（一）- 环境布置
项目环境已经布置好
第一个项目也已经创建好

开始阅读代码

前面创建了一个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加载到<ion-nav-view>内。###

.

---

这里没有任何地方指向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中尤为重要具体请参考这篇文章Cordova webapp实战开发（四）- 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路由解释，请看Cordova webapp实战开发（四）- AngularJS之$Scope（作用域）