移动端SeeApp开发总结-5

2016-03-07

好紧张

这次总结一下用Angular的一些小技巧~

好的实践

自动启动：ng-app，自动引导启动第一个ng-app;手工启动：angular.bootstrap()
使用ng-bind代替双括号语法。避免Angular用数据替换时出现双括号；实在要用时，使用ng-cloak,并且能避免内容闪烁
需要使用background-image时，可以自己定义指令：

app.directive('backImg', function(){
    return function(scope, element, attrs){
        attrs.$observe('backImg', function(value) {
            element.css({
                'background-image': 'url(' + value +')'
            });
        });
    };
});

也可以使用ng-style来实现。

过滤器的实践：

1	<img ng-src="imgsrc \| imageFormat: 200 : 200" />

/* 添加cdn的图片处理后缀 */
app.filter('imageFormat', function() {
    return function(path, width, height, mode) {
        if (!path) {
            return "";
        }
        if (!width || !height) {
            return path;
        }
        mode = mode || 0;
        width = see.isRetina() ? parseInt((window.devicePixelRatio || 1) * width) : parseInt(width);
        height = see.isRetina() ? parseInt((window.devicePixelRatio || 1) * height) : parseInt(height);
        return path + "?imageView2/" + mode + "/w/" + width + "/h/" + height + "/q/80";
    };
});

列表渲染完成使用回调函数：

1	<li ng-repeat="t in list" on-finish-render-filters="callback"></li>

app.directive('onFinishRenderFilters', function ($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function() {
                    var fun = scope.$parent[attr.onFinishRenderFilters];
                    if(fun) {
                        fun();
                    }
                });
            }
        }
    };
});

定义服务的三种api：provider,factory,service;
factory：只需要一些数据和方法的集合
service：通过构造函数的方式创建service，利用面向对象来定义，通过原型模式创建对象。单例对象
provider：能使用config()方法来配置，通过this.$get()来进行依赖注入。可配置性强，在应用开始前进行配置
下面是自己写的一个创建接口的provider:

app.provider('BackEndList', function() {
    this.list = [];
    this.setBackEndList = function(list) {
        if (list) {
            this.list = list;
        }
    };
    this.$get = function($http, $httpParamSerializerJQLike) {
        var t = this,
            href = window.location.href,
            testStr = "";
        if (href.indexOf('localhost') > -1 || href.indexOf('192.168') > -1)
            testStr = "/Mock";
        var service = {};
        angular.forEach(this.list, function(value) {
            service[value.name] = function() {
                return $http({
                    url: see.getUrlPrefix(true) + value.url + testStr,
                    mothod: value.method || "get",
                    dataType: value.dataType || "json"
                });
            };
        });
        return service;
    };
});
app.config(function (BackEndListProvider) {
    BackEndListProvider.setBackEndList([{
        name: "getYearIndex",
        url: "/act/actShoppingYear/getActivity"
    }, {
        name: "getCoupon",
        url: "/act/actShoppingYear/getCoupon"
    }, {
        name: "getShareCoupon",
        url: "/act/actShoppingYear/getExtraCoupon"
    }]);
});

关于三者的参考文章:AngularJS中service,factory,provider的区别

http请求时如果需要jQuery的格式，使用$httpParamSerializerJQLike，调用原生$http方法
初始化可以使用ng-init="init()"，或者在angular.element(document).ready()中写
Angular和jQuery一起用的时候，使用$会调用jQuery。
使用测试数据可以用Mockjs
controller里面也可以使用filter：

1
2
3

app.controller('Ctrl', function ($scope, $filter) {
  $scope.cur_date = parseInt($filter('date')(new Date(), 'dd'), 10);
})

不是Angular触发的事件要更新数据时，使用$apply：

1
2
3

$scope.$apply(function () {
  $scope.a = 'test';
});

使用Angular自带的$timeout，原理同上
单次绑定模板，减少数据监控，提高性能：

1
2
3

<li ng-repeat="t in list">
  <span ng-bind="::t.name"></span>
</li>

参考文章:Exploring Angular 1.3: One-time bindings

Biousco

前端

移动端SeeApp开发总结-5

好的实践