开发环境与项目创建请参考 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(作用域)