PHP开发工程师@温州。博客关于:技术、生活、读书、互联网。

angular.js使用心得。

从今年年中开始接触angular.js,也用它做了几个项目:

[angular.js + .net] 和别人公司合作的联盟商家app  

[angular.js + php] 帮客户做的ecshop商城webapp

[angular.js + node.js] 自己公司做微信喜帖应用     

这里就简单介绍下这个来自互联网巨人Google的angular.js及使用心得吧。


首先当然是介绍下angular.js

AngularJS 是Google出品的一组用来开发Web页面的MVVM(Moodel-View-ViewModel)框架。具有模板、数据绑定、依赖注入等特性。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 轻量级,只有70K,兼容主流浏览器(当然不会兼容微软IE6这种垃圾的~),与各种其他库配合良好。


为什么要使用angular.js

随着网站逐渐变成"互联网应用程序",前端的Javascript代码越来越庞大,越来越复杂,代码量及复杂度甚至有的超过后端。

这时候也出现了一种开发模式:restful Api + 单页面应用。

即所有的业务逻辑都在客户端实现,而服务端只提供数据api。服务端和浏览器通过ajax(或socket)交换数据。 

好处有:

1.用户体验:所有的数据及页面更新都是无刷新的。

2.减少服务端的压力:大部分代码都在前端执行。

3.扩展移植:容易扩展和移植到phonegap上。

前端需要做:

1.路由控制

2.模板编译

3.数据模型

4.各种业务逻辑等等。。。。。

这时相继出现了一些前端的MVC(MVVM)框架:angular.js / backbone.js / ember.js / knockout.js 。。

当然,个人认为angular.js相对于同类型的框架更加优秀。


特性

模块化编程

我们知道,javascript是没有类和模块的功能的(据说在下一版本Es6会有),这样代码量到了一定量之后就会出现各种不兼容、各种冲突、各种难维护。

angular.js提供的模块化编程很好的解决了该问题,更好的规范团队的代码。

angular.module('app',....);

angular.controller('index',....);


双向的数据绑定

模型层数据的改变自动映射到模板上,模板上数据的改变也自动映射到模型上。

只要微量代码就能实现诸如改变一个值就能使整个页面发生改变的功能。


指令

指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性

如自定义一个ng-drag的拖拽指令添加到html元素上,我们就能对该元素拖拽了。

<div ng-drag >


其他



一些资料:

官网: http://angularjs.org

英文教程: http://docs.angularjs.org/guide/

中文教程: http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html

中文社区: htpp://angularjs.cn


最后:

玩一下angular.js又不会怀孕,大家上吧~

使用angular.js构建大型restful web项目。

评论
热度 ( 1 )

© yuankeqiang | Powered by LOFTER