开发环境与项目创建请参考 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（作用域）
网友评论