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 相关文章推荐
jQuery代码优化 遍历篇
Nov 01 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
几种响应式文字详解
May 19 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 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 curl模拟post请求小实例
2013/11/13 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
php获取apk包信息的方法
2014/08/15 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
php实现微信企业转账功能
2018/10/02 PHP
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
Python callable()函数用法实例分析
2018/03/17 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
django框架自定义用户表操作示例
2018/08/07 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
tensorflow 变长序列存储实例
2020/01/20 Python
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
幼儿园毕业家长感言
2014/02/10 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
《西门豹》教学反思
2016/02/23 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android