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动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
js实现漂亮的星空背景
Nov 01 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语法(3)
2006/10/09 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
33道php常见面试题及答案
2015/07/06 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
Node.js创建Web、TCP服务器
2017/12/05 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
品质主管的岗位职责
2013/12/04 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
SQL中的三种去重方法小结
2021/11/01 SQL Server