整个项目下来，真正开发时间没有十天，两个前端一个负责后台，一个负责前台。开会的时候自告奋勇了，说要做前台，感觉更有挑战些。这是我的第一个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