AngularJSAngularJS1.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对象下找的。

 

  1. form表单的自发性提交功能

每当输入框点击回车上,AngularJS会默认触发第一只button的click事件。

 

总结

马上无异篇是angular1.3底小技巧,希望来因此。

 

正文也原本创文章,转载请保留原来出处,方便溯源,如发左地方,谢谢指正。

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

相关文章