angular

1.设置代码结构

index.html放在外围 templates 包含 tabs.html 及 所有视图

2.为了便于修改 api 接口，在config.js 中 使用常量（EVN）,标记所有接口

3.app.js

?

1 2 3 4

设置平台 $ionicPlatform 定义抬头 $httpProvider.defaults.header 配置全局风格 $ionicConfigProvider.platform 进行路由配置 $stateProvider

 

?

1 2 3 4 5

state {     1.url 状态     2.templateUrl 文件位置     3.controller 控制器    }

4.directives.js 存放 自定义标签

?

1 2 3 4

strict require scope link

5.controller 控制器 一个视图 对应一个控制器

通过 $http 请求数据

?

1 2 3 4 5 6 7 8 9

$http({     method:'',     url:'',     data:{} }).success(function(){   }).error(function(){   })

通过

?

1 2 3

$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 简化代码

?

1 2 3 4 5

var resource = $resource(); var params = {} resource.save(params,function(data){   })

7.自定义全局提示框

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.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 实现 图片的显示 及 压缩