“菁英汇项目”（angular）个人总结，以及经验总结-CSDN博客

本文分享了一个实际Angular项目的开发经验，包括解决浏览器兼容性问题、页面权限控制、HTTP错误处理、与后台交互的数据格式转换等内容。

整个项目下来，真正开发时间没有十天，两个前端一个负责后台，一个负责前台。开会的时候自告奋勇了，说要做前台，感觉更有挑战些。这是我的第一个angular项目，做起来非常的顺利。

一、浏览器的兼容性bug总结

1.IE的select选项框出现很臭的下拉，而且使用appearance：none并不能去掉

解决方法：select::-ms-expand{display: none}

2、火狐浏览器出现select出现黑色虚线框，a标签出现黑色虚线

火狐浏览器中select黑框必须使用

select{
    blr:expression(this.onFocus=this.blur());
}

a:focus{

outline: none;

}

3、在safari中input标签显示不正常

line-height：normal

二、页面权限控制

项目中的权限控制主要分为

1、未登入用户的权限，只有首页，还有两个宣传页的权限

2、免费用户，注册并登入的用户，点击（收费的地方）提示要购买，自己一些模块的不可见

3、收费用户，又分为审核通过与审核未通过，店铺信息填写与为填写的情况

权限的控制只有通过ui-route的路由检测来实现

$stateChangeStart
这些代码主要是先判断是否已经登入，登入后是否是收费用户，不是收费用户的话，要去的页面的（toState.name）是不允许被跳转的
如果是未登录的情况，判断哪些是可以在未登入情况下就可以访问的 也就是formState.name 和 toState.name的值

注意：

 var oHeight=document.documentElement.scrollTop||document.body.scrollTop;
    if(oHeight!=0){
        window.scrollTo(0,0)
 }
应为angular是单页面的项目，所以当遇到页面比较长的情况下，跳到另外一个页面也是尴尬，还在相应的滚动位置。

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, formState, formParams){
    var oHeight=document.documentElement.scrollTop||document.body.scrollTop;
    if(oHeight!=0){
        window.scrollTo(0,0)
    }
    if($rootScope.user){
        if($rootScope.user.data.user_type==0){
            if(toState.name=="app.myDiagnosis"){
                $scope.noPaying = true;
                event.preventDefault()
            }
        }
    }
    if(!$rootScope.user){
    if( formState.name == 'access.login' || formState.name == 'access.register'||formState.name == 'access.forgetPwd'||formState.name=='app.proIndex' ||formState.name=='app.classLevel'||formState.name=='app.eliteClass'||formState.name=='app.membersInfo'||formState.name=='app.submitSuccess') {
        if(toState.name == 'access.login' || toState.name == 'access.register'||toState.name == 'access.forgetPwd'||toState.name=='app.proIndex' ||toState.name=='app.classLevel'||toState.name=='app.eliteClass'||toState.name=='app.membersInfo'||toState.name=='app.submitSuccess'){

        }else{
            // 取消默认跳转行为
            $state.go('access.login'); //跳转到登录界面
            event.preventDefault();
        }
    }  //登录页面则不需要监视
    // 未登录
    }
});

三、AngularJS 中利用 Interceptors 来统一处理 HTTP 的错误

var app = angular.module('app', []);

// 定义一个 Service ，稍等将会把它作为 Interceptors 的处理函数
app.factory('HttpInterceptor', ['$q', HttpInterceptor]);

function HttpInterceptor($q) {
  return {
    request: function(config){
      return config;
    },
    requestError: function(err){
      return $q.reject(err);
    },
    response: function(res){
      return res;
    },
    responseError: function(err){
      if(-1 === err.status) {
        // 远程服务器无响应
      } else if(500 === err.status) {
        // 处理各类自定义错误
      } else if(501 === err.status) {
        // ...
      }
      return $q.reject(err);
    }
  };
}

// 添加对应的 Interceptors
app.config(['$httpProvider', function($httpProvider){
  $httpProvider.interceptors.push(HttpInterceptor);

  $httpProvider.defaults.withCredentials = true;    //允许cookie传递

}]);

四、与后台进行交互时，对传入的json转化为aaa="111"&bbb="222"格式

       $httpProvider.defaults.transformRequest = [function(data)
            {
                /**
                 * The workhorse; converts an object to x-www-form-urlencoded serialization.
                 * @param {Object} obj
                 * @return {String}
                 */
                var param = function(obj)
                {
                    var query = '';
                    var name, value, fullSubName, subName, subValue, innerObj, i;
                    for(name in obj){
                        value = obj[name];
                        if(value instanceof Array)
                        {
                            for(i=0; i<value.length; ++i)
                            {
                                subValue = value[i];
                                fullSubName = name + '[' + i + ']';
                                innerObj = {};
                                innerObj[fullSubName] = subValue;
                                query += param(innerObj) + '&';
                            }
                        }
                        else if(value instanceof Object)
                        {
                            for(subName in value)
                            {
                                subValue = value[subName];
                                if(subValue != null){
                                    // fullSubName = name + '[' + subName + ']';
                                    fullSubName = name + '.' + subName;
                                    // fullSubName =  subName;
                                    innerObj = {};
                                    innerObj[fullSubName] = subValue;
                                    query += param(innerObj) + '&';
                                }
                            }
                        }
                        else if(value !== undefined ) //&& value !== null
                        {
                            query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
                        }
                    }
                    return query.length ? query.substr(0, query.length - 1) : query;
                };
                return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
            }];

四、配上oclazyload后，对应的指令的，服务的配置

    app.config(function($controllerProvider,$compileProvider,$filterProvider,$provide){
            app.register = {
                //得到$controllerProvider的引用
                controller : $controllerProvider.register,
                //同样的，这里也可以保存directive／filter／service的引用
                directive: $compileProvider.directive,
                filter: $filterProvider.register,
                service: $provide.service,
                factory:$provide.factory
            };
        })

这些事大致的框架部分。

接下来是功能实现的方面

一、注册页的60秒倒计时的实现
二、各种弹出层的实现
三、导师轮播图的实现
四、分页插件的实现（资讯页，查看更多）
五、支付接口的跳转
六、上传excel，校验 ng-file-uoload
七、表单的验证
八、断网提示、
九、videoangular视屏播放
十、权限控制渲染
十一、自定义滚动条的实现 ng-scroll-bar的实现 （这里要考虑各种因素，数据加载完后div才被撑开）
十二、自定义checkbox ，radiobox

转载于:https://www.cnblogs.com/heyinwangchuan/p/6769541.html