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 相关文章推荐
js 深拷贝函数
Dec 04 Javascript
javascript iframe编程相关代码
Dec 28 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 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 前一天或后一天的日期
2008/06/28 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
layui文件上传实现代码
2017/05/20 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
用Python实现BP神经网络(附代码)
2019/07/10 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
旅游管理专业学生求职信
2013/09/28 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
五一劳动节活动记录
2014/03/23 职场文书
合同协议书格式
2014/04/18 职场文书
医院标语大全
2014/06/23 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript
nginx之内存池的实现
2022/06/28 Servers