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中Eval函数的使用
Mar 23 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
分享20款好玩的jQuery游戏
Apr 17 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
vue实现节点增删改功能
Sep 26 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
JavaScript实现图片合成下载的示例
Nov 19 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
php中使用url传递数组的方法
2015/02/11 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
php实现数字补零的方法总结
2018/09/12 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
Python中的filter()函数的用法
2015/04/27 Python
python3.x上post发送json数据
2018/03/04 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
python实现银行账户系统
2021/02/22 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
高性能装备提升营地:Kammok
2019/02/27 全球购物
工程管理造价应届生求职信
2013/11/13 职场文书
商业用房租赁协议书
2014/10/13 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
英文版辞职信
2015/02/28 职场文书
2015年幼师工作总结
2015/04/28 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL