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修改表格背景色实例代码分享
Dec 10 Javascript
精通JavaScript的this关键字
May 28 Javascript
js微信支付实现代码
Dec 22 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
vue组件横向树实现代码
Aug 02 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
详解element-ui中表单验证的三种方式
Sep 18 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网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
php 字符串替换的方法
2012/01/10 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
使用URL传输SESSION信息
2015/07/14 PHP
js继承的实现代码
2010/08/05 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
python实现用户登陆邮件通知的方法
2015/07/09 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
解决c++调用python中文乱码问题
2020/07/29 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
机电专业个人自荐信格式模板
2013/09/23 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
大四毕业生自荐书
2014/07/05 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
大国崛起日本观后感
2015/06/02 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
python在package下继续嵌套一个package
2022/04/14 Python
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers