您的位置:首页> 日志> 前端技术 正文
DTOP

AngularJS学习记录-1

laomao800 | 2014年10月04日 |

>>收藏本文 已有 3条评论

AngularJS诞生于Google,是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。

当然跟详细的还是查看百科 http://baike.baidu.com/view/9604951.htm ,这里就不进行摘录了。

而最近刚对这个框架进行小小的学习,先看看能够实现什么样的效果更好帮助学习理解。

 

简单数据绑定

Angular中使用ng-model指令来进行数据绑定,如:

<input ng-model="username" type="text" placeholder="请输入用户名称" />

而绑定之后在模板内则可以通过{{}}符号在页面上输出相应值,如:

<h1>欢迎您: {{ username }}</h1>

而当我们改变文本框内的值的时候,可以看到页面上输出的内容会自动相应的更新,这也就是通过视图进行了一个简单的双向数据绑定。 在线演示:

 

数据添加演示

从上面的例子可以看到数据内容是直接更新到页面中,当然如果我们动态的更新数据变量,Angular也会自动更新到视图上。可以先看以下的例子:

看完了效果演示之后可以切换到JavaScrip面板查看,我们先给定了一个datalist变量做测试,并赋给了$scope.booklist,而添加信息的方法内只是简单的把bookname的内容push到booklist内,然后清空其内容,并无作其他视图上的处理,而页面则会自动把新数据循环出来、清空文本框。

另外从HTML面板中,可以看到ng-repeat、ng-disabled 2个内置指令,可以相应循环出数据和根据文本框的输入状态判断是否启用按钮

 

购物车计算

综合一下前面的效果,扩展一下可以实现简单的购物车总价计算效果:

 

暂时先写这几个例子,后面的根据学习情况和进度后面再继续写吧。