代码改变世界

随笔分类 -AngularJs

最新Angular2案例rebirth开源

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

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

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

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

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

Promise的前世今生和妙用技巧

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

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

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

CoffeeScript实现Python装潢器

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

Angular遇上CoffeeScript - NgComponent封装

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

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

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

Angular Input格式化

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

Angular实现递归指令 - Tree View

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

Angular Module声明和获取重载

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

动态绑定HTML

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

ngModel 值不更新/显示

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

angular中的MVVM模式

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

Ngnice-国内ng学习网站

2015-01-25 21:30 by 破狼, 7684 阅读, 收藏, 编辑

今天给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 破狼, 1509 阅读, 收藏, 编辑
本文来自网友sun shine的问题,问题如下: 您好, 我想求教一个问题. 在$scope中我的对象名字写的特别深, 在 html中我又多次用到了同一个对象, 对不对在 html中让它绑定到一个临时变量呢? 比如: $scope.this.is.a.very.deep.ob...

Jasmine测试ng Promises - Provide and Spy

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

Ng Http Request/response格式转换

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

angularjs之browserTrigger

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

ng-template寄宿方式

2014-03-15 14:26 by 破狼, 17320 阅读, 收藏, 编辑
如果你是一个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...

细说angular Form addControl方法

2014-02-22 09:30 by 破狼, 5897 阅读, 收藏, 编辑
在本篇博文中,我们将接触angular的验证。angular的验证是由form 指令和ngModel协调完成的。今天博主在这里想要说的是在验证在的一种特殊情况,当验证控件没有没有name属性这是不会被form捕获的。或者是你希望在ngRepeat中使用动态表达式。下面且让我们先来从angular源码中看起如下:首先是ngModel: var ngModelDirective = function() { return { require: ['ngModel', '^?form'], controller: NgModelController, ...

Angularjs中文版本开发指南发布

2014-02-16 15:49 by 破狼, 45702 阅读, 收藏, 编辑
从本人开始在写关于Angularjs的文章开始,也算是见证了Angularjs在国内慢慢的火起来,如今的Angularjs正式如日中天。想知道为什么Angularjs会这么火,请移步angularjs移除不必要的$watch.也是一次偶然的机会,在Angular.js中文社区群里相遇一群Angula...

为Angularjs ngOptions加上index解决方案

2014-02-15 22:33 by 破狼, 14313 阅读, 收藏, 编辑
今天在Angularjs交流群中有位童学问道如何为Angular select的ngOptions像Angularjs的ngRepeat一样加上一个索引$index.其实对于这个问题来说Angular本身并未提供$index之类的变量供使用。但是也不是说对于这个问题我们就没有解决方案。把这个问题换成角度来看,我们所需要的就是js数组的下标,所以我们如果我们能够在对象上加入下标,使用表达式作为option的label就能解决了。但是第一印象让我想起的是js数组本来就是一个key/value的对象,只是key为数组下标而已,所以有了如下之设计:html: js:$scope.getDesc1 =.

Angular ngClick 阻止冒泡和默认行为

2014-02-11 23:29 by 破狼, 50348 阅读, 收藏, 编辑
这其实是一个很简单的问题,如果你认真查看过Angular官方的API文档,本来不想记录的。但是这个问题不止一次的被人问起,所以今天在记录在这里。在Angular中已经对一些ng事件如ngClick,ngBlur,ngCopy,ngCut,ngDblclick…中加入了一个变量叫做$event.如ngClick在官方文档是这么描述的:Expression to evaluate upon click. (Event object is available as $event)在查看Angular代码ngEventDirs.js: var ngEventDirectives = {}; fo...

ngCloak 实现 Angular 初始化闪烁最佳实践

2013-12-28 21:42 by 破狼, 29589 阅读, 收藏, 编辑
在做angular的SPA开发时,我们经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁。对于这个问题由于JavaScript去操作DOM,都会等待DOM加载完成(DOM ready)。对于angular会在DOM ready完...

angularjs组件之input mask

2013-12-15 20:36 by 破狼, 13496 阅读, 收藏, 编辑
今天将奉献一个在在几个angularjs项目中抽离的angular组件 input mask。在我们开发中经常会对用户的输入进行控制,比如日期,货币格式,或者纯数字格式之类的限制,这就是input mask的使用场景,在项目中也是会经常被提及需的需求之一。当然在官方的angular-ui ui-utils中有一个相应的组件叫做ui-mask,但是其mask功能是很初级脆弱的。所以我希望能得到一个更强大的mask组件。我所知的jquery.inputmask就是这样一个我所期望的强大的mask组件,所以我不必再去重造轮子,好的软件就是为了不停被重复利用。所以写了一个adapter,https:/

angular ng-model类型格式转化

2013-12-15 09:43 by 破狼, 21490 阅读, 收藏, 编辑
在angular开发中我们经常会遇见输入框中的string的值,却想在scope上的model表现为整型、浮点、货币,或者在radio的value是一个true,false的Boolean类型,一组check box的vlue组成一个Array的数组类型,因为我们的后台程序的model设计接口如此。你是否还在后台应用程序或者ajax提交前做mapper,还在重复着着伪angular的做法?在本人github创建了一个开源项目[https://github.com/greengerong/ngmodel-format](https://github.com/greengerong/ngmodel

prerender-SPA程序的SEO优化策略

2013-12-09 01:22 by 破狼, 9579 阅读, 收藏, 编辑
随着web2.0的兴起,ajax的时代已经成为了事实,更如今Knockout,backbone, angular,ember前端MDV(model driver view)框架强势而来,Single Page Application已经为大家所熟悉了。如今常见的SPA程序,restfull和前端MDV之类的框架能够实实在在的减少我们的代码开发量,让我更多的注意力关注在真正的业务逻辑上。在众多前端MDV框架从博客中可以看出来笔者还是钟爱于angular,然而服务端平台的选择的话:在.net平台笔者会首选webapi+oData,jvm平台spring restfull。但是相应带来的是搜索引擎优

angularjs ng-option ie issue解决方案

2013-12-08 18:10 by 破狼, 4845 阅读, 收藏, 编辑
最近遇见angularjs 在IE上当使用ng-options作为select的选项数据源,并且被套在ng-switch(ng-transclude)之类的,当angular上得ng-options数据源model改变后,在IE上并不渲染。在一阵的测试和阅读相关文档后最后确认为:因为ng-switch(ng-transclude)是为了使其scope为原来的父scope,在父scope上生成了DOM后才克隆(cloneNode)到指定的指令位置。然而IE在对于select克隆的节点,不会主动去触发重绘,所以才有了上面的issue。问题确定了,那我们所需要做的就是手动的去触发让IE对Select

angularjs移除不必要的$watch

2013-08-20 00:40 by 破狼, 22067 阅读, 收藏, 编辑
在我们的web page,特别是移动设备上,太多的angular $watch将可能导致性能问题。这篇文章将解释如何去移除额外的$watch提高你的应用程序性能。 $watch如果不再使用,我们最好将其释放掉,在angular中我们可以自由的选择在什么时候将$watch从$watch列表中移除...

Angular.js Services

2013-08-18 11:28 by 破狼, 36002 阅读, 收藏, 编辑
Angular带来了很多类型的services。每个都会它自己不同的使用场景。我们将在本节来阐述。 首先我们必须记在心里的是所有的services都是singleton(单例)的,这也是我们所希望得到的预期结果。下面让我开始今天的services之旅吧:Constant示例:app.constant('fooConfig', {config1: true,config2: "Default config2"}); constant是个很有用的东东,我们经常会用于对directive之类的做配置信息。所以当你想创建一个directive,并且你希望能够做一些配

(翻译)Angular.js为什么如此火呢?

2013-08-11 21:02 by 破狼, 24871 阅读, 收藏, 编辑
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View))JavaScript框架,其是Google推出的SPA(single-page-application)应用框架,其为我们的web应用开发增加不少魔法变换。 我可以花整天的时间告诉你为什么你必须在新项目尝试angular.js,但是我觉得还是百说不如一练。数据绑定和scopes(作用域) 首先第一个浮出大脑的问题是:angular支持数据绑定吗?下面让我们来了解angular.js的数据...

集成服务监控器-green.monitor发布

2013-05-26 18:42 by 破狼, 1584 阅读, 收藏, 编辑
在大型企业应用开发中,一个项目经常需要依赖于多个项目集成,经常某个集成服务的升级或者不工作,会导致你所工作的服务也挂掉,甚至影响你的开发流程。你是否还在接到测试团队或者运维团队的某个Bug,而自己花费了大量时间终于查出来是某个集成服务升级或异常,在这里浪费了大量时间,在笔者为所在项目建立了一个第三方集成服务监控的Monitor,去实时监控项目所依赖的所有集成服务,数据库。现在开源在github https://github.com/greengerong/green-monitor,在其sample目录下有个使用demo。mavendependency<dependency> &l

细说Angular ng-class

2013-05-22 09:41 by 破狼, 173877 阅读, 收藏, 编辑
在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素(html/css),在controller需要一个简单的POJO(plain object javascript object),与view完全的隔离(交互angularjs框架的职责。但在某些项目中看见controller涉及DOM的元素最多的是在controller scope上定义某变量,其值为class name,形如:function ctr($scope){ $scope.test =“classname”;}<div class=”{..

Angularjs Controller 间通信机制

2013-04-16 20:54 by 破狼, 65849 阅读, 收藏, 编辑
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需要在controller中通信,一般为比较简单的通信机制,告诉同伴controller我的某个你所关心的东西改变了,怎么办?如果你是一个javascript程序员你会很自然的想到异步回调响应式通信—事件机制(或消息机制)。对,这就是angularjs解决controller之间通信的机制,所推荐的唯一方式,简而言之这就是angular way。 Angularjs为在scope中为我们提供了冒泡.

Angularjs的IOC Inject分析

2013-03-27 00:50 by 破狼, 9091 阅读, 收藏, 编辑
在上一篇《Angularjs开发一些经验总结》中提到angular开发中的IOC inject优先,所以在这节将引用angularjs的注入代码来分析angularjs的注入方式。在《再谈angularjs DI(Dependency Injection)》中提到angularjs的注入方式分为3中方式,如果你还不清楚的请移步。推断式注入:在angularjs中我们可以在我们需要注入的地方按照名称注入,这里要求参数名称必须和注入服务实例名称相同,一种名称约定,angularjs会提取参数名称查找相应DI实例注入;:标记注入:在angularjs中我们可以利用$inject标注DI注入,这里需.

Angularjs开发一些经验总结

2013-03-24 17:08 by 破狼, 57493 阅读, 收藏, 编辑
在去年到今年参与了2个使用Angularjs作为客户端开发框架的项目开发。主要利用asp.net web api作为restfull服务提供框架和angularjs结合。Angularjs作为html的扩展,旨在建立一个丰富的动态web应用,通过Directive建立一套html扩展的DSL模型,利用PM模式变形MVVM(在网上很多称MVC模式,本人认为在angular0.8是属于经典MVC模式,但在1.0把scope独立注入过后,更倾向于MVVM模式,这将会后续随笔中写道)简化前端开发和使得前端业务逻辑得以分离,view和表现逻辑的分离,更便于维护,扩展。Angularjs本来就是采用TD.

开源:Angularjs示例--Sonar中项目使用语言分布图(CoffeeScript版)

2012-12-20 21:50 by 破狼, 3061 阅读, 收藏, 编辑
关于SonarLanguage是什么东东,这里就不在描述了,如果你对它感兴趣的话,请移步到上篇随笔开源:Angularjs示例--Sonar中项目使用语言分布图。这里是最近学习CoffeeScript的练习版。 CoffeeScript是一门简洁的,构架于JavaScript之上的预处理器语言,可以静态编译成JavaScript,语法主要受ruby和python影响,目前已经为众多rails和node项目采用。CoffeeScript不是JavaScript的超集,也不是完全替代品。CoffeeScript有点在于:更少,更紧凑,和更清晰的代码通过规避和改变对JavaScript中不良部分的.

Javascript覆盖率(jstd)报表解析Maven插件

2012-12-16 22:03 by 破狼, 1286 阅读, 收藏, 编辑
最近项目中希望加入javascript覆盖率统计,由于项目的单元测试用的google的jstd(javascript test driver),jstd生成<config filename>-coverage.dat LCOV 格式,这是一种linux上格式,在window上网上搜寻了很久没找到可用的maven组件。最后狠下心来自己写一个。代码已经放在github上,并且maven插件也成功release到官网。coverage 文件格式: 项目主要采用java将coverage文件解析成java object在利用json序列化输出到固定位置的javascript文件。在利用an

开源:Angularjs示例--Sonar中项目使用语言分布图

2012-12-02 11:24 by 破狼, 4160 阅读, 收藏, 编辑
在博客中介绍google的Angularjs 客户端PM模式框架很久了,今天发布一个关于AngularJs使用是简单示例SonarLanguage(示例位于Github:https://github.com/greengerong/SonarLanguage)。本项目只是一个全为客户端的示例项目。项目的初始是我想看看在公司的项目中使用语言的分布比例,看看C#的份额,这一年一直坐着Java项目,却还是喜欢着C#,这只是个人问题,不存在语言之争。公司的项目在持续集成CI后都会传递build数据到Sonar产生报表。所以我可以在Sonar获取到项目和项目使用语言,并且Sonar Restfull .

angularjs 过滤器filter

2012-10-31 23:36 by 破狼, 42429 阅读, 收藏, 编辑
在前面介绍angularjs已经很多了,中途由于工作和一切生活琐事,暂停了很久。今天在这里将继续angularjs讲解,这节我们来看看angularjs的过滤去filter。 在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户。比如时间本地化,或者yyyy-MM-dd HH:mm:ss格式,数字精度格式化,本地化,人名格式化等等。在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能,angularjs内部为我们提供了number等很多内置的filter。并且我们能够很轻易的自定义自己的领域filter。 如下实例:html:.

angularjs表达式-Expression

2012-09-14 00:28 by 破狼, 23900 阅读, 收藏, 编辑
紧接上节谈到再谈angularjs DI(Dependency Injection),在这里介绍关于angularjs的表达式expression。expression指的是javascript的一小片段代码,通常用于绑定(binding)例如:{{ expression }}。在angularjs中是通过$parse service解析。 $parse用法: $parse(expression); 参数:javascript代码片段。 返回值:{function(context, locals)},表达式编译结果: context:嵌入表达式执行的作用于scope。 locals:...

再谈angularjs DI(Dependency Injection)

2012-09-11 19:42 by 破狼, 10191 阅读, 收藏, 编辑
在前面已经介绍了关于angularjs,以及扩展了一些jQuery ui的一些组件为angularjs的directive。在这里应进口007 在上篇留言我们来看看在angularjs中的DI特性。 DI:依赖注入,是一种软件设计模式,应DIP依赖倒置原则,描述组件之间高层组件不应该依赖于底层组件。依赖倒置是指实现和接口倒置,采用自顶向下的方式关注所需的底层组件接口,而不是其实现。其应用框架则为IOC,在.net中有很多我们熟悉的IOC框架,如Unity,Castle windsor,Ninject,Autofact等等,其常常分为构造注入,函数注入,属性注。同时在IOC和Service L.

AngularJS Slider指令(directive)扩展

2012-09-05 23:01 by 破狼, 6213 阅读, 收藏, 编辑
继上一篇基于jQuery UI Autocomplete的AngularJS 指令(directive)扩展,在这里发布一个AngularJS的Slider扩展。如果你还不了解AngularJS话的情参见AngularJs - Javascript MVC 框架,Angular-Bootstrap和Compiler以及Google-AngularJS官方文档. 下面直接看代码演示吧,借助我们强大的jsfiddle:链接地址http://jsfiddle.net/whitewolf/vNfsm/20/embedded 这里借助于jsfiddle可能加载速度有点慢,请耐心等待。同时有什么问题请..

基于jQuery UI Autocomplete的AngularJS 指令(directive)扩展

2012-09-02 10:38 by 破狼, 7456 阅读, 收藏, 编辑
在前几篇随笔简单介绍了AngularJS,在AngularJS 指令(directive)是重要的概念,主要负责了很大部分的组建样式交互。在前面介绍过directive需要预先的模板编译在返回一个link的函数,注册行为事件交互等等。在这里不多说了,关于指令的介绍将在后续一并补上。在这里我们先看一个利用jQuery UI组件开发的AngularJS Autocomplete指令。代码:jsfiddle在线测试Directive:1varoldSuggest=jQuery.ui.autocomplete.prototype._suggest;2jQuery.ui.autocomplete.p..

Angular-Bootstrap和Compiler

2012-08-13 23:50 by 破狼, 16609 阅读, 收藏, 编辑
在上节简单介绍了Angular js框架,在这节将继续Angular的Bootstrap(引导)和Compiler(编译)机制。一:Bootstrap:Angular的初始化 1:Angular推荐的自动化初始如下:1<!doctypehtml>23<htmlxmlns:ng="http://angularjs.org"ng-app>45<body>67...89<scriptsrc="angular.js">1011</body>1213</html 利用ngapp标示你需要自动引导应用

AngularJs - Javascript MVC 框架

2012-08-12 23:25 by 破狼, 18089 阅读, 收藏, 编辑
在6月google发布了AngularJs 1.0稳定版, 并宣称:AngularJS可以让你扩展HTML的语法,以便清晰、简洁地表示应用程序中的组件,并允许将标准的HTML作为你的模板语言,AngularJS可以通过双向数据绑定自动从拥有JavaScript对 象(模型)的UI(视图)中同步数据。 开始接触AngularJs是在4月份来到新项目组,这时AngularJs还处于0.8未稳定版,项目中已经开始使用了,并且这套框架应用到了项目整个UI端,服务端也是未稳定的web api,真心佩服团队的勇气,对于新技术的热情,幸好大家都能很好的驾驭,这是第一次尝试一个充满未稳定技术的项目。 回到正.