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 相关文章推荐
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 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 Cookie的一个使用注意点
2008/11/08 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
js图片预加载示例
2014/04/30 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
一些Python中的二维数组的操作方法
2015/05/02 Python
Python字符串逐字符或逐词反转方法
2015/05/21 Python
Python单例模式实例详解
2017/03/01 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
Python处理CSV与List的转换方法
2018/04/19 Python
对python中的高效迭代器函数详解
2018/10/18 Python
python判断自身是否正在运行的方法
2019/08/08 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
智能钱包:Ekster
2019/11/21 全球购物
工厂厂长的职责
2013/12/12 职场文书
运动会开幕式邀请函
2014/01/22 职场文书
会计岗位描述
2014/02/22 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
倡议书作文
2015/01/19 职场文书
2015年护士节慰问信
2015/03/23 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
企业法人代表证明书
2015/06/18 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
Java实现给Word文件添加文字水印
2022/02/15 Java/Android