angular

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

原文地址:https://www.cnblogs.com/crazycode2/p/6246584.html