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 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
红米手机抢购的js代码
Mar 10 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
javascript三种代码注释方法
Jun 02 Javascript
JS中substring与substr的用法
Nov 16 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 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实现递归循环每一个目录
2010/08/08 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
Python简单进程锁代码实例
2015/04/27 Python
Python网站验证码识别
2016/01/25 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
用python批量下载apk
2020/12/29 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
房地产销售大学生自我评价分享
2013/11/11 职场文书
应届大学生自荐信
2013/12/05 职场文书
岗位职责的构建方法
2014/02/01 职场文书
2014年个人委托书范本
2014/10/13 职场文书
2015年大学社团工作总结
2015/04/09 职场文书