ANGULARJS中用NG-BIND指令实现单向绑定的例子
本文简单介绍AngularJS框架后,用一个实例演示{{}}插值法和ng-bind指令的使用。
不同于jquery只是一个加强和简化前端开发的类库,angularjs是一个完整web前端框架,所以学习曲线高了很多。
angularjs给我的感觉类似于Java的Spring框架,处于中心容器位置粘合其他组件,其内置的很多组件已经可以满足一般场景,特殊场景我们可以按照框架思路扩展。
下面从最基础的内容走起:
<!DOCTYPEhtml>
<htmlng-app>
<head>
<metacharset="utf-8">
<title>ng-binddirective</title>
</head>
<bodyng-controller="HelloController">
<div>
<p>直接输出字符串字面值</p>
Hello{{"World"}}
<hr>
</div>
<div>
<p>使用占位符输出变量</p>
Hello{{greeting}}
<hr>
</div>
<div>
<p>使用ng-bind指令输出变量</p>
Hello<spanng-bind="greeting"></span>
<hr>
</div>
<scriptsrc="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
functionHelloController($scope){
$scope.greeting="World";
}
</script>
</body>
</html>
ng-app声明一个angularjs的模块,并限定在声明html标签的范围内。
ng-controller是在模块中声明一个angularjs的控制器,控制器可以有多个,但上下文是隔离的,应尽可能缩小控制器的作用范围。
{{}}是angularjs的插值语法,类似于JSP的EL表达式${}。第一个输出因为”World”是个字面值,程序会直接输出;第二个输出因为greeting是在控制器里定义的一个变量,所以也会输出变量对应的值,一样是World;第三个输出利用了angularjs内置的ng-bind属性指令,最终结果等价于{{}},但注意指令=后面是字符串,不要写错。
js里面的HelloController和body上面的指令对应,入参$scope是框架提供的一个服务,代表当前控制器的上下文,还有其他类似服务,框架会自动注入,以后慢慢了解。方法体只有一行,是在$scope上定义了一个变量,就是html代码里引用的变量。
这一篇很简单,代码复制了就能运行。注意angular.min.js是1.2分支最新的版本,同样的代码用1.3.0版本无法运行,原因未知,可能1.3.0还不是最终Release版本有关。
相关文章
- 基于Qt实现的带图形界面的MIPS汇编指令的编辑器、汇编器、反汇编器、模拟器
- vue自定义指令实现长按功能
- MYSQL实现Oracle的Start with…Connect By递归树查询详解编程语言
- Linux服务器配置指南:快速实现优化(如何配置linux服务器)
- Oracle OSB:实现业务连接体系的新高度(oracleosb)
- Linux 下硬盘分区命令实现方法(linux分区指令)
- Linux技巧:实现最佳计算效率的PDF指南(linux技巧pdf)
- Linux汇编指令:实现高效率编程(linux汇编指令)
- 使用MongoDB 指令实现快速操作(mongodb指令)
- Linux下灵活使用AT指令实现定时任务(linux中at的用法)
- 处理Redis中Java实现的自动过期处理(redisjava过期)
- 发指令实现数据读取(linux串口收)
- SQL Server实现高效分页查询技巧(sqlserver分页查询)
- Linux解释器: 实现程序指令化处理(linux解释器)
- 使用Java程序执行Linux指令:实现自动化操作(java执行linux命令)
- Redis实现延时指令,让用户体验更贴心(延时指令redis)
- 库Oracle数据库快速克隆技术实现加速部署(oracle 克隆数据)
- MySQL数据库导出以CMD指令实现(cmd导mysql数据库)
- MySQL表连接指令实现两个表数据联结(mysql两张表连接命令)
- 玩转Redis实现高效缓存(如何用redis做缓存)
- Oracle系统数据库中的事件表实现(oracle事件表)
- 重启Redis使用CLI指令实现(redis 重新启动指令)
- Redis实现超时时间控制的指令研究(redis超时时间命令)
- 用C实现PHP扩展Fetch_Url类数据抓取的方法
- 使用lua实现split字符串分隔
- C#实现线程池的简单示例