代码改变世界

随笔分类 - AngularJs

最新Angular2案例rebirth开源

2016-09-07 21:42 by 破狼, 14733 阅读, 收藏, 编辑
摘要:在过去的几年时间里,Angular1.x显然是非常成功的。但由于最初的架构设计和Web标准的快速发展,逐渐的显现出它的滞后和不适应。这些问题包括性能瓶颈、滞后于极速发展的Web标准、移动化多平台应用,学习难度等。 所以Angular团队最终决定以全新方式构建Angular2框架。Angular2框架现在已经进入RC6版本,很快它就将进入最终发布版。Angular2带来了很多不错的特性,它们包括跨平台、高性能、高效开发,拥抱web标准等等。 阅读全文

《AngularJS深度剖析与最佳实践》简介

2015-12-31 09:47 by 破狼, 10800 阅读, 收藏, 编辑
摘要:由于年末将至,前阵子一直忙于工作的事务,不得已暂停了微信订阅号的更新,我将会在后续的时间里尽快的继续为大家推送更多的博文。毕竟一个人的力量微薄,精力有限,希望大家能理解,仍然能一如既往的关注和支持shuang_lang_shuo[破狼]微信号,同时也欢迎大家的高质量文章的投稿。 在2015年一年时间中,我、雪狼大叔、彭洪伟一起共同编写了《AngularJS深度剖析与最佳实践》这本前端Angular.js框架的进阶书籍。在写作期间也得到很多人的支持,特别是在Angularjs中文社区群中的各位群友的持续关注。中途由于写作、出版流程等因素,花费了大家很长的等待时间,就在昨天《AngularJS深度剖析与最佳实践》这本书籍终于上市了,大家现在可以在京东上预订书籍了,相信出版社也会在很快的时间内送到大家手中。 阅读全文

Angular移除不必要的$watch之性能优化

2015-11-12 08:25 by 破狼, 12593 阅读, 收藏, 编辑
摘要:双向绑定是Angular的核心概念之一,它给我们带来了思维方式的转变:不再是DOM驱动,而是以Model为核心,在View中写上声明式标签。然后,Angular就会在后台默默的同步View的变化到Model,并将Model的变化更新到View。 双向绑定带来了很大的好处,但是它需要在后台保持一只“眼睛”,随时观察所有绑定值的改变,这就是Angular 1.x中“性能杀手”的“脏检查机制”($digest)。可以推论:如果有太多“眼睛”,就会产生性能问题。在讨论优化Angular的性能之前,笔者希望先讲解下Angular的双向绑定和watchers函数。 阅读全文

Promise的前世今生和妙用技巧

2015-10-22 19:43 by 破狼, 13451 阅读, 收藏, 编辑
摘要:浏览器事件模型和回调机制 JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的。同时出于对UI线程操作的安全性考虑,JavaScript和UI线程也处于同一个线程中。因此对于长时间的耗时操作,将会阻塞UI的响应。为了更好的UI体验,应该尽量的避免JavaScript中执行较长耗时的操作(如大量for循环的对象diff等)或者是长时间I/O阻塞的任务。所以在浏览器中的大多数任务都是异步(无阻塞)执行的,例如:鼠标点击事件、窗口大小拖拉事件、定时器触发事件、Ajax完成回调事件等。当每一个异步事件完成时,它都将被放入一个叫做”浏览器事件队列“中的事件池中去。而这些被放在事件池中的任务,将会被javascript引擎单线程处理的一个一个的处理,当在此次处理中再次遇见的异步任务,它们也会被放到事件池中去,等待下一 阅读全文

自定义Angular插件 - 网站用户引导

2015-10-19 22:25 by 破狼, 5222 阅读, 收藏, 编辑
摘要:最近由于项目进行了较大的改版,为了让用户能够适应这次新的改版,因此在系统中引入了“用户引导”功能,对于初次进入系统的用户一些简单的使用培训training。对于大多数网站来说,这是一个很常见的功能。所以在开发这个任务之前,博主尝试将其抽象化,独立于现有系统的业务逻辑,将其封装为一个通用的插件,使得代码更容易扩展和维护。 阅读全文

CoffeeScript实现Python装潢器

2015-09-22 08:46 by 破狼, 1236 阅读, 收藏, 编辑
摘要:在上篇Angular遇上CoffeeScript – NgComponent封装中,我们讲述了CoffeeScript这门小巧的语言,摒弃JavaScript中糟粕(“坑”)部分,并将JavaScript中精粹部分发挥到淋淋尽致。虽然笔者更喜欢ES6 + Babel或者TypeScript这类鲜明特... 阅读全文

Angular遇上CoffeeScript - NgComponent封装

2015-09-13 14:38 by 破狼, 2689 阅读, 收藏, 编辑
摘要:CoffeeScript是基于JavaScript的一门扩展小巧语言,它需要编译成JavaScript,然后再运行与浏览器或者Nodejs平台。JavaScript由于商业原因10天时间就匆忙诞生,所以存在很多弊病。但如《JavaScript精粹》一书中所说:JavaScript也存在着一颗华丽的心... 阅读全文

前端获取元素定位位置的法宝

2015-09-08 17:23 by 破狼, 5069 阅读, 收藏, 编辑
摘要:在前端开发中,我们经常需要定位一个元素。如tooltip、popover或者modal等,或许是我们需要将它们定位在依赖元素的周围或屏幕滚动屏幕中心位置。这对于前端开发的码农来说并不是难事。算出和依赖元素的offset,设置元素的left、right。对于稍复杂的场景我们可能需要考虑被positio... 阅读全文

Angular Input格式化

2015-09-03 18:16 by 破狼, 9574 阅读, 收藏, 编辑
摘要:今天在Angular中文群有位同学问到:如何实现对input box的格式化。如下的方式对吗? 这当然是不对的。在Angular中filter(过滤器)是为了显示数据的格式,它将$scope上的Model数据格式化View显示的数据绑定到DOM之上。它并不会负责ngModel的绑定值的格式化。在An... 阅读全文

Angular实现递归指令 - Tree View

2015-09-02 18:45 by 破狼, 14766 阅读, 收藏, 编辑
摘要:在层次数据结构展示中,树是一种极其常见的展现方式。比如系统中目录结构、企业组织结构、电子商务产品分类都是常见的树形结构数据。这里我们采用Angular的方式来实现这类常见的tree view结构。首先我们定义数据结构,采用以children属性来挂接子节点方式来展现树层次结构,示例如下:[ { ... 阅读全文

Angular Module声明和获取重载

2015-07-06 08:39 by 破狼, 48367 阅读, 收藏, 编辑
摘要:module是angular中重要的模块组织方式,它提供了将一组内聚的业务组件(controller、service、filter、directive…)封装在一起的能力。这样做可以将代码按照业务领域问题分module的封装,然后利用module的依赖注入其关联的模块内容,使得我们能够更好的”分离关... 阅读全文

动态绑定HTML

2015-06-30 06:49 by 破狼, 19123 阅读, 收藏, 编辑
摘要:在Web前端开发中,我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示,特别是在内容管理系统(CMS:是Content Management System的缩写),这样的需求,更是遍地皆是。对于对angular的读者肯定首先会想到ngBindHtml,对,ang... 阅读全文

ngModel 值不更新/显示

2015-06-29 07:13 by 破狼, 14762 阅读, 收藏, 编辑
摘要:angular中的$scope是页面(view)和数据(model)之间的桥梁,它链接了页面元素和model,也是angular双向绑定机制的核心。而ngModel是angular用来处理表单(form)的最重要的指令,它链接了页面表单中的可交互元素和位于$scope之上的model,它会自动把ng... 阅读全文

angular中的MVVM模式

2015-06-16 16:47 by 破狼, 23813 阅读, 收藏, 编辑
摘要:在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用。虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(Whatever)框架,但angular框架整体上更接近MVVM模式。下面是Igor Minar发布在Goo... 阅读全文

Ngnice-国内ng学习网站

2015-01-25 21:30 by 破狼, 8555 阅读, 收藏, 编辑
摘要:今天给angular新手介绍一个国内开源的ng学习网站http://www.ngnice.com/这是由一批ng爱好者在雪狼大叔的带领下共同开发完成,致力于帮助更多的ng新人,他们分别是: ckken,grahamle,NigelYao,asnowwolf,lightma,joeylin,FrankyYang,lrrluo, why520crazy,破狼,二当家, Ken, zxsoft, why520crazy, playing,天猪、jacobdong、以及一批后加入或审校未记名的社区爱好者功能完成的。[这里排名不分先后] 再ngnice还在逐步完善中,目前完成的重要模块主要分为3栏:ng文章、angular中文指南、ng案例展示。 阅读全文

解决ng界面长表达式(ui-set)

2014-09-29 17:12 by 破狼, 1810 阅读, 收藏, 编辑
摘要:本文来自网友sun shine的问题,问题如下: 您好, 我想求教一个问题. 在$scope中我的对象名字写的特别深, 在 html中我又多次用到了同一个对象, 对不对在 html中让它绑定到一个临时变量呢? 比如: $scope.this.is.a.very.deep.ob... 阅读全文

Jasmine测试ng Promises - Provide and Spy

2014-09-29 16:20 by 破狼, 1915 阅读, 收藏, 编辑
摘要:jasmine提供了很多些很实用的处理Promises的方法,首先我们来考虑下面的这个例子: angular.module("myApp.store").controller("StoresCtrl", function($scope, StoreService, Contact) { ... 阅读全文

Ng Http Request/response格式转换

2014-09-03 08:19 by 破狼, 4531 阅读, 收藏, 编辑
摘要:angular作为Single Page Application推荐的交互方式当然是基于json的ajax调用。但今天要说的是当你不幸工作在一个遗留或者不可控制的服务上,而这服务是基于非json提交方式(或许是常规表单(form)提交,或者其他自定义数据格式),那么我们只能改变ng内部$http默认... 阅读全文

angularjs之browserTrigger

2014-06-24 22:42 by 破狼, 2376 阅读, 收藏, 编辑
摘要:今天推荐一款来自angularjs源码的单元测试辅助库browserTrigger,这是来自于ngScenario的一段代码。主要用户触发浏览器型行为更新ng中scope view model的值。这是angularjs源码中单元测试的使用browserTrigger的实例:it('should s... 阅读全文

ng-template寄宿方式

2014-03-15 14:26 by 破狼, 20297 阅读, 收藏, 编辑
摘要:如果你是一个angular的开发者的话,对于ng-html2js你应该 很熟悉。对于angular的指令,我们经常需要定义模板( directive template/templateUrl),你可以选择讲html page 放在真正的的web容器中寄宿,也可以选择angular的ng-template 放在view的page之上,抑或也可以讲html打成一个js文件和directive 的js文件合并在一起发布。对于直接寄宿在web容器.这很简单,直接放在jetty,tomcat,iis, 抑或node express public目录下。这里没什么可以多说的,所以我们跳过。angul... 阅读全文