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实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
用js实现in_array的方法
Nov 05 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 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防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
js时间控件只显示年月
2017/01/08 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
利用layer实现表单完美验证的方法
2019/09/26 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
Cython 三分钟入门教程
2009/09/17 Python
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
详解Python中expandtabs()方法的使用
2015/05/18 Python
浅谈Python基础之I/O模型
2017/05/11 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
简述数组与指针的区别
2014/01/02 面试题
实习自荐信
2013/10/13 职场文书
国际商务系学生个人的自我评价
2013/11/26 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
诚信贷款承诺书
2014/05/30 职场文书
使用Redis做预定库存缓存功能
2022/04/02 Redis