ANGULARJS中用NG-BIND指令实现单向绑定的例子


Posted in Javascript onDecember 08, 2014

本文简单介绍AngularJS框架后,用一个实例演示{{}}插值法和ng-bind指令的使用。

不同于jquery只是一个加强和简化前端开发的类库,angularjs是一个完整web前端框架,所以学习曲线高了很多。

angularjs给我的感觉类似于Java的Spring框架,处于中心容器位置粘合其他组件,其内置的很多组件已经可以满足一般场景,特殊场景我们可以按照框架思路扩展。

下面从最基础的内容走起:

<!DOCTYPE html>

<html ng-app>

<head>

    <meta charset="utf-8">

    <title>ng-bind directive</title>

</head>

<body ng-controller="HelloController">

<div>

    <p>直接输出字符串字面值</p>

    Hello {{"World"}}

    <hr>

</div>
<div>

    <p>使用占位符输出变量</p>

    Hello {{greeting}}

    <hr>

</div>
<div>

    <p>使用ng-bind指令输出变量</p>

    Hello <span ng-bind="greeting"></span>

    <hr>

</div>
<script src="../lib/angularjs/1.2.26/angular.min.js"></script>

<script>

    function HelloController($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版本有关。

Javascript 相关文章推荐
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
JS使用H5实现图片预览功能
Sep 30 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
JavaScript实现世界各地时间显示
Sep 07 Javascript
详解Javascript动态操作CSS
Dec 08 #Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 #Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 #Javascript
Jquery实现由下向上展开效果的例子
Dec 08 #Javascript
Javascript常用字符串判断函数代码分享
Dec 08 #Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 #Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 #Javascript
You might like
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
php 操作符与控制结构
2012/03/07 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
Python如何判断数独是否合法
2016/09/08 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Django添加feeds功能的示例
2018/08/07 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
python实现学生管理系统开发
2020/07/24 Python
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
10条PHP编程习惯
2014/05/26 面试题
迎接领导欢迎词
2014/01/11 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
校园之声广播稿
2015/08/18 职场文书
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL