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