Angular运用总结

前端开辟大部分时刻面临两类题目：一是营业逻辑，二是界面展现逻辑。在一个治理体系或互联网产物中，我们起首会经由过程营业数据对全部营业体系建模。所谓营业逻辑，反应到递次层面就是对一些营业数据的增编削查操纵；同时我们也须要将这些营业逻辑的操纵效果反馈给用户，这就是界面展现逻辑。比方当你在宣布一条微博，在营业逻辑上是多了一条微博数据，同时在界面上也须要将这条数据显现出来。在我看来，用户界面实质上就是营业数据的一种对用户友爱的展现形状。一个抱负的前端架构是将营业逻辑和界面展现逻辑完整星散，二者自力变化，互不影响。在我们斟酌营业逻辑的时刻，就不要斟酌界面展现的题目；在斟酌界面展现题目标时刻，就不要斟酌营业逻辑的题目。假如将二者耦合在一起，那末在面临复杂题目标时刻可以就会进退维谷，无从下手。

MVC形式的重要目标就是将营业逻辑和界面展现星散。虽然关于C(Controller)是有争议的，然则M(model)和V(view)是广泛认同的。将营业逻辑和界面展现星散的症结也在model和view的星散。angular是一个异常优异的MV*框架，异常好的表现了MVC的头脑，本文将从该角度来引见angular的一些运用心得。

需求

这是一个厥后治理页面，用来设置各个客户端的banner显现。页面重要有以下功用：
1.编辑banner信息，可以设置banner的范例和上传banner图片。
2.删除和插进去。
3.高低挪动banner递次。
4.保留。

完成营业逻辑

不斟酌页面展现，我们可以先完成营业逻辑。各个端banner列表的逻辑是一样的，只是范例以及与背景的交互接口不一样。我们可以将banner的这些列表逻辑定义成一个service，差别端的列表都可以重用这个service。其定义以下。

这个service的完成异常简朴，就是对一个banner数组举行增编削查。

完成界面展现逻辑

完成完营业逻辑我们再来处理界面展现的题目。angular供应了一个异常壮大的模版引擎,经由过程指令和表达式就能将数据显现到界面。怎样才模版中运用这些营业数据和要领呢？我们须要将这些数据和要领写到scope对象中,scope对象定义了对应模版可以运用的数据和要领。bannerCollection service的attach(scope)要领就是将对应的banner数据和要领写到scope对象中以便能在模版中运用。下面的代码是在mobile controller中运用bannerCollection service,并经由过程其attach要领和对应的scope对象绑定。

将数据和要领注册到scope对象后，我们就可以在模版中运用了。下图是模版的一部分。

ng-repeat指令用来展现banner列表，双花括号用来输出数据，ng-click用来响运用点击。angular框架供应了很多异常有效的内建指令，基本上能满足我们大部分的需求了。除了内建指令，angular还为我们供应了自定义指令的接口，经由过程自定义指令我们可以扩展出异常丰富的web组件。在这个banner治理页面中，有个上传banner图片的功用，我们就可以将其封装成一个指令。

如上图，该指令的完成重要在link要领中。每一个自定义指令都可以完成这个要领，当模版引擎在链接模版的时刻会回调指令的link要领，调用时将当前的scope和element作为参数传进来。link要领异常重要,它表现了指令的实质：scope到element之间的一个桥梁，实在也就是model到view的一个桥梁。我们可以在这个link要领中监听element的事宜来响运用户操纵并修正scope中的数据；也可以监听scope中数据的变化将其反应到用户界面上。scope对象有个$watch要领，可以经由过程该要领去监听scope中须要体贴的数据的变化。
在这个图片上传的指令中，我们在link要领中监听了用户挑选文件的事宜。当用户挑选文件后，经由过程post要求将图片上传到背景天生url和dsfid，同时更新scope中的img数据；ng-repeat指令在监听到scope中img数据的变化后又会革新响应的界面展现。

结语

angular为我们供应了一个异常好的营业逻辑和界面展现逻辑星散的机制，极大地简化了前端开辟。迥殊关于数据型运用，angular是异常好的挑选。