构建兼容浏览器的Angularjs web应用
背景
随着mvvm逐渐成熟，现在使用jQuery构建web应用已经显得过时了，而且使用jQuery需要编写更多的代码去控制dom的取值、赋值、绑定事件等，而mvv从底层实现了对以上操作的支持，让程序员可以从原始的复杂、重复的编码中解放出来，让程序员可以将更多的重心放在业务的实现、数据的交互上去，而且大大减少了程序员需要编写的代码量。
多年来的web经验告诉我们，编写web应用最难的地方主要在于浏览器的兼容问题，而且更多的兼容问题主要体现在ie上，因此只要能解决ie上的问题，那么这个web应用的其他问题都不再是问题了。
今天，我将使用angualrjs来构建兼容浏览器的web应用，其实主要是解决ie下的一些问题，大致如下：
- ie下构建app
- ie下a标签unsafe问题
- ie下ngSrc无法正确绑定问题
- ie下ngMouseleave的问题
- ie下创建service的一些问题
- ie下使用swfupload的一些问题
这里将使用angular的1.0.7版本，这是由于该版本对于ie低版本的支持较好，且存在的BUG较少，而高版本在ngShow、ngHide、ngBindHtml等标签上都会出现严重的问题。
ie下构建app
在chrome、ff等浏览器下，我们可以直接在html或者body标签上直接绑定ngApp来绑定angularjs的应用，但是在ie下是无法实现的，这是由于低版本的ie不支持html5的一些特性以及JSON对象，因此我们需要引入2个js来解决这个问题：
有了以上2个js文件后，ie下绑定ngApp的方式也略微有点区别，需要有class、ngApp、id的支持，代码如下：
<body class="ng-app:myApp" id="ng-app" ng-app="myApp">
ie下a标签unsafe问题
当a标签的href绑定有效的url时，无法触发绑定其他事件，如：click，但是如果没有href或者href为空，在ie下则会出现unsafe的问题，因此需要给href绑定javascript:void(0)，这样既能解决unsafe的问题又能解决无法触发事件的BUG。
ie下ngSrc无法正确绑定问题
在ie下，不管是使用ng-src或者ng-src="{{ xx }}"都无法让img显示图片，而且在低版本ie下使用属性="{{xx}}"都是无法实现你想要的功能的，因此只能使用自定义的指令去实现某些不支持的标签。
这里我自己实现了一个customSrc的指令去解决ie下ngSrc的问题，大致代码如下：
myApp.directive('customSrc', function () {
return {
scope: {
data: '='
},
link: function (scope, element, attrs) {
scope.$watch('data', function (v) {
if (!v)
return;
element.attr('src', v);
});
}
};
});
ie下ngMouseleave的问题
其实这不算是ng-mouseleave的bug，而是ie下，对于mouseleave和mouseover的表现不同而已，首先我们来看一段html代码，如：
<div ng-click="display=!display">下拉单</div>
<div ng-show="display" ng-mouseleave="display=false">
<div>标题</div>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
在chrome、ff等浏览器下，这个脚本运行的还是很顺利的，但是在ie下会出现一个问题，就是当鼠标移入ul的时候，下拉单的列表层会消失，但是在ul内加上ng-mouseover="display=true"以后，这个BUG就可以解决了
ie下创建service的一些问题
当我在创建模块的时候，如果模块只有一个方法时，我一般会直接返回这个函数，示例代码为：
//seajs
module.exports = function (){
//coding
}; //angular
myApp.service('$fn', function (){
return function (){
//coding
};
});
在ie下，$fn()是无法正确调用的，会出现异常，因此需要做些许调整，代码如：
//angular
myApp.service('$fn', function (){
return {
exec: function (){
//coding
}
};
});
在ie下使用$fn.exec()就不会出现问题了。
ie下使用swfupload的一些问题
使用swfupload在低版本的ie下，最常出现的问题是flash的版本问题，因此首先得保证ie下flash的版本。
偶尔会遇到"例外被抛出且未被接住"，出现该异常的时候，主要注意2个问题：
1、后台返回数据的时候，需要设置响应流的Head的ContentType为text/html; charset=UTF-8
2、ie下绑定swfupload的button_placeholder的元素不能包含在ng-repeat内，如：
//html
<li ng-repeat="m in imgs">
<a href="javascript:void(0)">
<img data="m" width="178" height="178" custom-src />
</a>
</li>
当我们要将最后一个li的元素绑定到swfupload的button_placeholder上时，低版本ie下就会出现以上的错误，因此在使用当中要注意。
结尾
以上是我在开发兼容浏览器angular应用遇到的一些问题以及解决方案，如果你有更好的解决方案，请告诉我。
那么今天的文章就到这里了，如果文章中有什么问题请告诉我，谢谢！
构建兼容浏览器的Angularjs web应用的更多相关文章
- Angularjs web应用
构建兼容浏览器的Angularjs web应用 背景 随着mvvm逐渐成熟,现在使用jQuery构建web应用已经显得过时了,而且使用jQuery需要编写更多的代码去控制dom的取值.赋值.绑定事件等 ...
- 25个超有用的 AngularJS Web 开发工具
AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,改善了JavaScript. 下面我要说的就是25个超有用的AngularJS工具, ...
- AngularJs + Web API 页面开发（一）
AngularJS这个JS框架是个神马东东我也不太清楚,我也是初学者~~ AngularJS适用于single page App,单页面程序都是局部刷新的,这一点和Ajax有第一的区别,因为使用Aja ...
- js event 事件兼容浏览器 ie不需要 event参数 firefox 需要
js event 事件兼容浏览器 ie不需要 event参数 firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- iframe框架在IE浏览器，360兼容浏览器下将白色背景设为透明色
<IFRAME ID="Frame1" SRC="transparentBody.htm"></IFRAME> iframe在大部分浏览 ...
- 《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想
总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and Angula ...
- js 事件监听 兼容浏览器
js 事件监听 兼容浏览器 ie 用 attachEvent w3c(firefox/chrome) 用 addEventListener 删除事件监听 ie 用 detachEven ...
- 【转发】构建高可伸缩性的WEB交互式系统（下）
原文转自:http://kb.cnblogs.com/page/504518/ 本文是<构建高可伸缩性的WEB交互式系统>系列文章的第三篇,以网易的NEJ框架为例,对模块的可伸缩性进行分析 ...
- 【转发】构建高可伸缩性的WEB交互式系统（中）
原文转自:http://kb.cnblogs.com/page/503953/ 在<构建高可伸缩性的WEB交互式系统>的第一篇,我们介绍了Web交互式系统中平台的可伸缩性.本文将描述模块的 ...
随机推荐
- imcs初探
imcs简介 https://github.com/knizhnik/imcs 翻译过来是在内存上的列存储,在对于一张'静态'的表计算方面很有优势,在许多聚合运算中都有使用线程并行计算,而且其中使用了 ...
- MongoDB学习笔记~MongoDB实体中的值对象
回到目录 注意,这里说的值对象是指在MongoDB实体类中的,并不是DDD中的值对象,不过,两者也是联系,就是它是对类的补充,自己本身没有存在的价值,而在值对象中,也是不需要有主键Id的,这与DDD也 ...
- SQL Server 2008 R2——使用FULL OUTER JOIN实现多表信息汇总
=================================版权声明================================= 版权声明:原创文章 谢绝转载 请通过右侧公告中的“联系邮 ...
- 理解 Nova 架构 - 每天5分钟玩转 OpenStack（23）
Compute Service Nova 是 OpenStack 最核心的服务,负责维护和管理云环境的计算资源. OpenStack 作为 IaaS 的云操作系统,虚拟机生命周期管理也就是通过 Nov ...
- 解决webkit浏览器中js方法中使用window.event提示未定义的问题
这实际上是一个浏览器兼容性问题,根源百度中一大堆,简要说就是ie中event对象是全局变量,所以哪里都能使用到,但是webkit内核的浏览器中却不存在这个全局变量event,而是以一个隐式的局部变量的 ...
- unity 实现物体破碎效果的一些方法 - 细雨淅淅
游戏越来越接近现实的感觉,如果有一个真是的 虚拟现实设备,可能我们真的会感觉是在真实世界.场景的逼真是在渲染效果.角色AI.游戏逻辑.物理效果等等一起导致的结果.现在游戏越来越大,除了渲染,物理估计是 ...
- [No00006F]总结C#获取当前路径的各种方法
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- IIS 设置默认首页静态页，无静态页，走路由
在Global.asax文件中添加 protected void Application_BeginRequest(Object sender, EventArgs e) { ...
- SecureCRT连接虚拟机（ubuntu）配置
使用SecureCRT连接虚拟机(ubuntu)配置记录 这种配置方法,可以非常方便的操作虚拟机里的Linux系统,且让VMware在后台运行,因为有时候我直接在虚拟机里操作会稍微卡顿,或者切换速 ...
- 微信内嵌html5页面清楚缓存
给每个js添加一个版本号,每次修改js后改变一下版本号,浏览器即可自动刷新不用手动清理缓存 <script src="<%=path%>/js/boss/kpi/redli ...