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的闭包的一个示例说明
Nov 18 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
vue实现div单选多选功能
Jul 16 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 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与已存在的Java应用程序集成
2006/10/09 PHP
用函数读出数据表内容放入二维数组
2006/10/09 PHP
在Windows版的PHP中使用ADO
2006/10/09 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php实现异步数据调用的方法
2015/12/24 PHP
js css样式操作代码(批量操作)
2009/10/09 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
python简单线程和协程学习心得(分享)
2017/06/14 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
一个SQL面试题
2014/08/21 面试题
主治医师岗位职责
2013/12/10 职场文书
工作中个人的自我评价
2013/12/31 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
元宵晚会主持词
2014/03/25 职场文书
代理协议书范本
2014/04/22 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript