1.设置代码结构
index.html放在外围 templates 包含 tabs.html 及 所有视图
2.为了便于修改 api 接口,在config.js 中 使用常量(EVN),标记所有接口
3.app.js
设置平台 $ionicPlatform 定义抬头 $httpProvider.defaults.header 配置全局风格 $ionicConfigProvider.platform 进行路由配置 $stateProvider
state {
1.url 状态
2.templateUrl 文件位置
3.controller 控制器
}
4.directives.js 存放 自定义标签
strict require scope link
5.controller 控制器 一个视图 对应一个控制器
通过 $http 请求数据
$http({
method:'',
url:'',
data:{}
}).success(function(){
}).error(function(){
})
通过
$scope.$on('$ionicView.beforeEnter',function(event,viewData){
viewData.enableBack = true;
})
监听视图状态
详情页 $stateParams 获取对应的id
选项卡数据 使用对象 两个属性对应 标题 及 数据
操作 iframe 中的内容的CSS样式 contentWindow.document
使用对象,绑定 $rootScope 随着页面的跳转 绑定数据 最后一起提交 创建订单数据
$state.go('tab.home') 实现点击时 页面跳转
$scope.$on 接收服务传递过来的数据
formData 以表单的形式 向后台传递 key value
6.servie 服务
通过 $resource 简化代码
var resource = $resource();
var params = {}
resource.save(params,function(data){
})
7.自定义全局提示框
.factory('TipService', ['$timeout','$rootScope', function($timeout,$rootScope) {
return {
message: null,
setMessage: function(msg) {
$rootScope.tip = {};
$rootScope.tip.message = msg;
$rootScope.tip.show = true;
var _self = this;
$timeout(function() {
_self.clear();
}, 2000);
},
clear: function() {
$rootScope.tip.message = null;
$rootScope.tip.show = false;
}
};
}])
8.使用canvas 的api 实现 图片的显示 及 压缩