如果要实现这样一个效果:输入框输入内容,内容实时在输入框外也同时显示出来。
使用了angular的代码:
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>You wrote: {{ name }}</p>
</div>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
效果截图:
从html页面可以看出,实现此交互除了引入angular.min.js之外,没有写一句js,对输入框的监听,对显示容器的改写全部被angular封装了。大大简化了开发过程。
augular是一个实现了mvc的前端js框架,要写一个angular的demo,只需以下几步:
1、引入angular.min.js文件;
2、给要使用angular的容器元素添加ng-app属性,如果是整页面应用angular就给body标签添加;
3、给“模型元素”添加ng-model属性,自定义一个属性值,如name;这里的模型就是mvc中的m,直接理解为数据即可;
4、在需要显示数据的地方用双花括号“{{......}}”把需要显示的模型名称包围,比如要显示上面刚刚定义的name模型,就{{name}},这个显示部分就是mvc中的v;
5、编写控制器部分,mvc中的c,本文例子中暂无相关代码
参考文献:http://www.w3schools.com/angular/default.asp
不过,Angular对低版本ie,ie6\7\8(怪异模式)不兼容,要兼容需要另外多做一些工作!