AngularJS1.3一些技巧

前言

     框架选择。在上一篇文章评论中,有人说angular1.3是个过时的东西,建议使用angular2。其实这种说法很像拿jQuery1.x和jQuery2.x做比较,新的版本当然会有优化优势的地方,但并不一定是最适合你项目的。当你项目必须支持IE6/7/8时,那又得使用jQuery1.x版本。所以不要以新不新去选择一个框架或者某个版本,而是看是不是适合的。当初用angular1.3是他比较成熟有配套的文档,而angular2的文档是不健全的,另外有一点是1.x与2.x的区别太大了,两者的用法没有继承性。更重要的是,目前的angular2只有Alpha版本(测试),并没有一个正式版本。

     性能。有人说angular2的性能会比较好,我还没有用过,不做什么评论。但对于angular1.x,我确实是不放心它的性能的,作为PC Web我敢用angular,但在移动终端我不敢用,在我看来无论从框架体积或框架运行效率,在脆弱的移动端都是致命的。有一些基于angular做的Hybrid框架(例Ionic),希望使用过的人能告诉我它体验怎么样(性能上)。

 

一些技巧

     这篇文章记录一些angular1.3的小技巧,angular2我会找个时间做个实践。

1. ng-repeat多个字段排序的写法

使用orderBy过滤器,第一个参数是一个数组,表示依次按数组中的属性值进行排序(若按第一项比较的值相等,再按第二项比较),第二个参数是正序还是倒序(默认是正序)。

ng-repeat="groupUser in groupUsers | orderBy:['isOwner','isAdmin']:true"

 

2. ng-include引入HTML片段

使用ng-include,第一个参数是页面的相对地址的字符串。应该注意,是一个字符串,不是ng-expression,所以不要忘了加单引号,否则会发现怎么都引不进这个HTML片段。

<div ng-include="'msgs.html'"></div>

 

3. ng-bind的$scope对象没有随着数据变化而变化

自己实现的ajax,获取数据后,设置到$scope上,view却没有更新。这其实就是angular双向数据的原因,angular不可预见的scope变化,是不会帮忙刷新view的(例$.ajax或setTimeout)。解决方法就是,数据设置到$scope上后,手动调$scope.$apply();。

PS:一些指令(例ng-click、ng-model)以及服务(例$timeout、$http)才会自动刷新view。

 

4. 移动触摸(Touch)事件

angular-touch模块提供了触摸的事件和其他手势ngSwipeLeft、ngSwipeRight。

 

5. ng-bind-html的内容无法正常的显示在页面中

使用ng-bind-html属性,该属性依赖于$sanitize,也就是需要引入angular-sanitize.js文件。但会发现ng-bind-html的内容无法正常的显示在页面中,这是因为某些标签会被angularJS认为是不安全的自动过滤掉,而为了保留这些表情就需要开启非安全模式。

<div ng-bind-html="article.content | trustHtml">
</div>

 

myApp.filter('trustHtml', function ($sce) {
    return function (input) {

        return $sce.trustAsHtml(input);
    }
});

其中$sce是angular自带的安全处理服务,$sce.trustAsHtml(input) 返回的是受信任的对象。

 

6.  如何划分一个module

我的想法是在关系比较密切(业务逻辑)的页面可以划为一个module,因为页面可能存在共用service或template或directive(controller不共用),而这些元件归属于同个module,我们就可以不同页面调用了。而不想关的页面可划分为另一个module,增加代码的清晰度。

 

7. 是否要把工具类弄成service

在弄工程之前,我会考虑到是否要将一些工具类封装成一个service(为了看起来代码统一),但我发觉是没有必要的,因为service是归属于某个模块的,而我们的工具类可能在不同模块都有使用,不归属于某个模块。把工具类当成一个jquery的库引入即可。

 

8. 配合RequireJS使用

angular没有异步加载模块的功能,所以使用配合RequireJS使用的效果还是不错的。在这里面有些异议的是对于模块定义的地方,是该把一个模块定义成RequireJS的模块还是angular的服务(可以依赖注入),我觉得还是功能归属的问题,如果是全局使用的工具服务,就定义成RequireJS模块,而如果是与模块密切相关的业务逻辑就使用服务。

PS:可在RequireJS的config加上urlArgs,可以避免缓存问题。

urlArgs: "bust=" +  (new Date()).getTime()  //可用来清理缓存,在部署到生产环境去掉。

 

9. iframe打开跨域URL时报错

<iframe width="100%" height="100%" ng-src="{{url}}"></iframe>

如果不做处理,上面的跨域URL是打不开的, 需要定义白名单。

myApp.config(function($sceDelegateProvider) {
        $sceDelegateProvider.resourceUrlWhitelist([
            // Allow same origin resource loads.
            'self',
            // Allow loading from our assets domain.  Notice the difference between * and **.
            "https://link.bingosoft.net/**"]);
 });

 

10. 使用其他Controller的scope的属性方法

先声明我并不清楚我的用法是否恰当。使用其他Controller的scope局限于其parent scope,而不是任何Controller的都可以访问。scope有个属性$parent, 通过这个属性可以找到某一层Controller的scope。

var parentScope = $scope.$parent.$parent.$parent;

PS:多少层$parent是我打印scope对象出来找的。

 

总结

这一篇是angular1.3的小技巧,希望有用。

 

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址 :http://www.cnblogs.com/lovesong/p/4889931.html

转载:http://www.cnblogs.com/lovesong/p/4889931.html

时间: 2016-05-20

AngularJS1.3一些技巧的相关文章

AngularJS1.3框架使用技巧总结

有人说angular1.3是个过时的东西,建议使用angular2.其实这种说法很像拿jQuery1.x和jQuery2.x做比较,新的版本当然会有优化优势的地方,但并不一定是最适合你项目的.当你项目必须支持IE6/7/8时,那又得使用jQuery1.x版本.所以不要以新不新去选择一个框架或者某个版本,而是看是不是适合的.当初用angular1.3是他比较成熟有配套的文档,而angular2的文档是不健全的,另外有一点是1.x与2.x的区别太大了,两者的用法没有继承性.更重要的是,目前的angu

快速增强路由器安全的十个小技巧

  路由器操作系统同网络操作系统一样容易受到黑客的攻击.大多数中小企业没有雇佣路由器工程师,也没有把这项功能当成一件必须要做的事情外包出去.因此,网络管理员和经理人既不十分了解也没有时间去保证路由器的安全.下面是保证路由器安全的十个基本的技巧. 1.更新你的路由器操作系统:就像网络操作系统一样,路由器操作系统也需要更新,以便纠正编程错误.软件瑕疵和缓存溢出的问题.要经常向你的路由器厂商查询当前的更新和操作系统的版本. 2.修改默认的口令:据卡内基梅隆大学的计算机应急反应小组称,80%的安全事件都

开好网络视频会议的技巧

网络视频会议已经在众多企业里运用起来了,然而在一个通讯咨询公司对网络视频会议使用情况的调查中显示,尽管高达67%的受访高级经理称,未来预计将举行更多的视频会议,但也有62%的人称,他们对自己是否具备充分利用这种会议的技巧感到担心. 可能公司内很多人是初次接触这种会议形式,对于在现场会议环境下成长起来的大众来说,视频会议仍然会让他们感觉陌生.不便,开过后感觉效果不好,可能就搁置了这种现代化的会议模式,造成这种情况的根本原因其实和开视频会议的技巧有关,那要如何开好视频会议呢?这里就来分析影响视频会议

苹果iOS 程序图标的设计技巧

文章像三联的朋友们介绍苹果iOS 程序图标的设计技巧,教程难度中等,IPHONE.IPAD.IPOD成为越来越多的人使用的移动互联设备,因此我们经常会遇到为这些设备设计图片,特别是设计IPHONE图标,这篇文章就像三联的朋友们详细的介绍一下IPHONE图标的设计流程,好了一起来学习吧:程序图标主要作用是为了使该程序更加具象及更容易理解,除了上述的作用外,有更好视觉效果的图标可以提高产品的整体体验和品牌,可引起用户的关注和下载,激发起用户点击的欲望. 表现形态 在有限的空间里表达出相对应的信息,在

VB.net窗体应用技巧

本篇文章的主要开发环境是Visual Studio 2008,Visual Studio系列产品一直以来都提供了强大的控件功能,然而我们利用这些控件可以编写出功能强大的应用程序.本文主要利用微软的最新.net开发工具为大家展示窗体特效的应用方法,为大家介绍创建炫酷的透明化窗体以及浮动型窗体的一些技巧.很适合.net开发工具的初学者,具有一定的实用价值. 打开 Visual Studio 2008在文件 (File) 菜单上,单击新建项目 (New Project). 在新建项目 (New Pro

掌握单页网站设计的5大技巧

  的确,单页设计已然是网页设计的大趋势了.许多流行的设计元素和设计方法都逐渐与这种网页设计手法融合到一起,越来越多的设计师和企业机构开始选择单页网站作为他们沟通世界的门户,而用户也开始接触越来越多的形式多样的单页网站. 但是在很久之前,在单页网站还非常简单的阶段,很多人都认为这是一种非常Low的网页设计方式,直接粗暴如同商业名片一般的网页结构怎么看都和高大上没有血缘关系,谁又会想到这种设计方式在今天会如此流行呢?在设计师们的不懈探究之下,单页设计已经摘掉了混乱单调的帽子,构建起了一套相对比较完

cdr文件导入ps技巧

这篇教程像朋友们介绍cdr文件和ps文件互转的技巧[cdr文件导入ps];cdr和photoshop长期以来一直是pc上常用的的著名设计软件,是专业设计用户的首选,二者在图形.图像的处理方面各有千秋,cdr是矢量图形处理的霸主,而photoshop则是平面图像设计的不二之选,综合应用二者可以充分发挥你的想像力,绘制出美丽而神奇的图案. 这就涉及到怎样将cdr中的图形.图像正确输出到photoshop,以及哪种方法更好的问题. 用cdr结合photoshop生成点阵图的三种方法 (一)在cdr中选

快速定位windows8收藏夹位置的技巧

  在使用IE浏览器时,一般保存网站网址都会存储在默认的收藏夹里,以便轻松访问.在windows其他系统下,用户都能很快地找到收藏夹的位置,但是在新系统windows8下,由于改变了全新的风格,一时之下,用户很难找到收藏夹位置,下面就教大家一个小方法,快速定位windows8收藏夹位置. 1.按"Win键"+"E"进入"计算机",双击打开系统盘"C盘" 2.找到"用户"文件夹(某些系统会显示为"U

十个小技巧提升IE8浏览器使用体验

IE8是微软的新一代浏览器,现在最新的版本是Beta 2.虽然只是测试版本,冲着其强大的功能和更高的安全性还是有不少用户尝鲜在使用它.本文将列举10个笔者在使用过程中总结出来的技巧,希望对提升大家的IE8使用体验有所帮助. 一.将IE8设为默认浏览器 如果你的系统中安装了诸如Firefox.Netscape.IE等两种以上的浏览器,各浏览器为了使自己能够运行往往要争夺将自己设置为默认浏览器.往往第三方的浏览器软件在安装后就会将自己设置为默认浏览器,那如何使IE8为默认的浏览器呢? 运行IE8,点