Angularjs开发一些经验总结-阿里云开发者社区

开发者社区> 技术小胖子> 正文

Angularjs开发一些经验总结

简介:
+关注继续查看



       在去年到今年参与了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本来就是采用TDD开发的,提供了一套单元测试组件和End 2 End的测试框架。Angularjs的的强大之处在于提供了一套内似WPF,Silverlight的强大数据绑定和格式化,过滤组件,这也是MVVM模式所必备的条件;再加之IOC的注入机制,使得不能业务逻辑的分离,服务代码的更大程度抽象重用。

     在这节随便中将讨论的angularjs开发的一些基本准则,为什么会有这篇随便呢,因为看见一些项目对于angularjs的乱用。

  1:不要一个page一个God似无所不能的controller包含所有页面逻辑。

        Angularjs ng-controller旨在将业务逻辑的区分,更推荐按照业务逻辑的划分controller,做到业务功能的高内聚,controller的单一原则SRP。

  2:View中包含尽量少的逻辑。

       就像jsp,asp这类服务端模板引擎一样,我们应该把尽量少的逻辑放在view中,因为这样会导致view和逻辑的紧耦合性,view在软件开发中是最易变化的,而表现层逻辑却相对于view是相对稳定的行为。同时也导致的view中的逻辑不能被自动化测试,持续集成所覆盖,这将导致以后修改重构和模块的集成的痛苦。很明显的就是太多的angularjs的ng-switch,ng-when和页面计算表达式等等。

3:注意一些特殊的节点式的angularjs directive,因为在IE7上这是不被认识的,因为IE的严格XML模式。如果你想make ie7 happy,

     1:请注意导入json2或者json3的js

     2:xmlns:ng命令空间和节点element式directive。

<html xmlns:ng="http://angularjs.org">

<head>

<!--[if lte IE 8]>

<script>

document.createElement('ng-include');

document.createElement('ng-pluralize');

document.createElement('ng-view');

 

// Optionally these for CSS

document.createElement('ng:include');

document.createElement('ng:pluralize');

document.createElement('ng:view');

</script>

<![endif]-->

</head>

  4:在controller和service中绝对不能出现html的DOM和CSS代码。

      这会导致逻辑的混杂耦合,对于angularjs自身的绑定对html操作,很多时候你会分不清是view的影响源,导致修复bug,和新增功能,重构的艰难,常常出现很多的诡异行为。最好的实践模式则是把必须的dom,css操作移向angular的Directive,或者view中。在angularjs模式中只有directive和view才能出现dom和css的逻辑操作。

  5:controller中公用的逻辑推向service(factory,value,config),采用IOC的注入,提高代码的重用度,修改的单一点,开闭原则。

  6:controller应该只包含业务逻辑,对于数据模型的格式化过滤尽量交给angular框架filter等处理。

7:viewmodel中最好建立一个通用属性比如vm,它承载view渲染的最小量化model,对于model的变形事件则在vm之外scope之上。这才是MVVM推荐方式。事件相当于WPF中的command,负责模型事件的传递修改模型,从而从模型的改变通知view的强制更新(WPF中model必须实现INotifyPropertyChange接口)。同时这样vm属性也便于数据的填充和收集回发服务端。

8:IOC注入优先,注有助于良好的设计,逻辑的可重用和单元的可测试性,面向对象的“开闭原则”,修改的单一点。

9:良好的分层设计,对于服view的交互采用controller通过viewmode(scope)的推送,服务器的交互推向service层次,利用angularjs的$resource或者$http获取更新数据model,与服务端交互。层次属于纵向分割,将一类功能逻辑的接口放在一起,架构层次,而model则从业务的逻辑横向分离。

10:服务端的服务的接口需要考虑表现层客户端的应用提供,这是一个良好的SOA服务设计的准则,这里不用多余的描述,具体请移步架构篇

11:如果你的公司应用了敏捷开发则,TDD的开发是必备的,angularjs本也是解决javascript测试驱动开发项目。

 

   最后想说说angularjs也不是银弹,并不是万能的,不是所有的项目都适合应用,它适用于CRUD的应用系统,内置了一些默认规则(惯例优先),对于表现层频繁交互的项目不适用,对于一些特殊的项目比如spring hdiv的项目也不是那么友好,或者就是你希望兼容更多的IE8一下的版本的应用系统,同样也不实用。





 本文转自 破狼 51CTO博客,原文链接:http://blog.51cto.com/whitewolfblog/1161630,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10013 0
AngularJS开发指南06:表达式
表达式是类似Javascript的代码片段,通常在绑定中用到,写在双大括号中如{{表达式}}。表达式是用$parse方法来处理的。
684 0
Angular4总结(三)—— 依赖注入
依赖注入是控制反转的一种实现方式。这种模式就是Java Web开发中最流行框架Spring的核心概念。 为什么需要使用依赖注入 在原来最普通的开发中,如果我们有一个方法createCar(new Wheel(), new Engine(), new CarBody())。
749 0
iOS开发经验总结,我的2019进阶之路!
4G改变了生活,抓住机会的人已经在这个社会有了立足之地,马上迎来5G的时代,你做好准备了吗!对于即将迎来的5G时代,无疑会是音视频的又一个高潮!那么作为程序员的我们,应该怎么样去迎接它呢~~ 改变带来的不是淘汰,而是机会! 底层进阶: iOS底层进阶成了当今iOS开发人员的必经之路。
1639 0
Angular4总结(四)—— 数据绑定,响应式,管道
数据绑定 angular4中默认的数据绑定都是单向的。可分为: 插值表达式形式(Dom属性绑定) <p>{{test}}<p> Dom 属性绑定流程: 控制器中定义了一个属性,值发生了改变 对应的dom的value被附上改变了的值 渲染后的页面上也会出现刚刚的值 这一切操作都和html属性不发生任何关系 html属性绑定,使用中括号 <img [src]="imgUrl"/> //如果没有写这个方括号,angular会把属性右侧的值作为字符串进行赋值,而非表达式 基本Html属性绑定 CSS属性绑定 这种形式是全有或者全无的。
1205 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13812 0
21119
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载