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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
jQuery UI实现动画效果代码分享
Aug 19 jQuery
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
微信小程序图片自适应实现解析
Jan 21 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
PHP用户指南-cookies部分
2006/10/09 PHP
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
vue element upload实现图片本地预览
2019/08/20 Javascript
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
python脚本实现验证码识别
2018/06/07 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
django的settings中设置中文支持的实现
2019/04/28 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
Python 发送邮件方法总结
2020/08/10 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
农村党员一句话承诺
2014/05/30 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
老公保证书
2015/01/17 职场文书
感谢信怎么写
2015/01/21 职场文书
花木兰观后感
2015/06/10 职场文书