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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
vue.js中created方法作用
Mar 30 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
element 动态合并表格的步骤
Dec 31 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提示Notice: Undefined variable的解决办法
2012/11/24 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
laypage.js分页插件使用方法详解
2019/07/27 Javascript
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
python实现简单ftp客户端的方法
2015/06/28 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
基于python的列表list和集合set操作
2019/11/24 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
宠物店的创业计划书范文
2014/01/11 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书