AngularJS早些时候有过了解,知道这是一个JS的MVC框架,同类型的框架还有Backbone等。这次是由于项目需要,学习了两天的Angular后开始着手改之前的项目代码,这里大概说一下这一周学习Angular的心得体会吧。
首相,使用Angular最大的感受就是它的设计思路完全不同于Jquery,jquery更倾向于对Dom的操作;而使用Angular则需要你有一个全局的认识,你必须知道你想要做成什么样子才可以下手去做,所以我感觉ng对前端开发的要求比jquery要高一些。先来看看Angular的一些特点:
一、MVC模式
MVC顾名思义:Model-view-Controll设计模式,其实这个有点类似于Java的思想,模型、视图、控制器的分离。但是Angular又有点不同于传统的MVC,严格意义上说它是MVVM(model-view-viewModel)。Model是简单的javascript对象;ViewModel是$scope对象,Angular靠$scope检测状态变化;Controller负责设置初始状态和参数化$scope方法用以控制行为;View是Angular解析渲染后生成的HTML。
二、数据双向绑定
这应该算Angular比较特有的属性,概括来说,Angular通过监听变量的变化来实现双向数据绑定。传统技术上,当model改变时,开发与人员需要手动处理DOM元素并将属性反映到变化中。而在Angular中,程序员可以轻轻松松解决这种问题,省掉了很多的代码。
三、模板
在Angular中,一个模板就是一个HTML文件。但是HTML的内容扩展了,包含了很多帮助你映射到Model到View的内容。
四、服务和依赖注入
Angular服务的作用就是对外提供某个特定的功能。Angular拥有内建的依赖注入(DI)子系统,可以帮助开发人员更容易开发,理解和测试应用。
五、指令
指令比较有意思,可以帮助我们做很多的事情。很多的DOM操作,比如增删改查都可以用指令完成。指令自带的link方法有三个参数:scope、element、attrs。通过这三个参数我们可以完成很多功能,这也是我用的比较多的方法。
简单介绍了Angular的特性,下面说说我对这个项目的一些想法。
我对该项目的理解就是普通的用户登录,进入到主页面后可以通过搜索PID或者FID搜到一些POI,用户可以查看这些具体地址的详情。数据传递是JSON,异步请求。要说复杂的话,那就是对于openlayer的使用吧。
这是一个很传统的jquery项目,但是如果想要把此项目改成Angular成本比较高,最大的原因是因为项目页面少,main.html和poiInfo.html的js操作耦合性太高,我们都知道Angular是一个前端MVC框架,对于高耦合的页面很难进行拆分。方法的调用和逻辑相对比较紧密,抽离不好就会出错。由于我接触Angular时间不多,项目实战经验匮乏,它的一些深入知识还是不太熟悉,如果重新进行开发担心有些功能无从下手。比如传统jquery的一些复杂的嵌套选择器,在Angular当中我有些无力。两个框架的思路不一样,在进行Angular使用时,面对DOM操作还是不能很好的转变过来,不能总想着获取dom然后进行操作,在ng中操作的应该是变量。通过变量改变视图,通过视图的改变,回馈到变量中,这才是Angular的精髓。