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实现点击添加一个input节点
Dec 05 Javascript
Angular实现form自动布局
Jan 28 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
JS中Array数组学习总结
Jan 18 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
使用ionic播放轮询广告的实现方法(必看)
Apr 24 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 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乱码问题
2012/03/25 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
JS实现密码框效果
2020/09/10 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
Python3实现腾讯云OCR识别
2018/11/27 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
python类中super() 的使用解析
2019/12/19 Python
Python-for循环的内部机制
2020/06/12 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
什么是反射
2012/03/17 面试题
文案策划求职信
2014/04/14 职场文书
幼师个人总结范文
2015/02/28 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
七年级作文之冬景
2019/11/07 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
Python实现批量自动整理文件
2022/03/16 Python
vue使用element-ui按需引入
2022/05/20 Vue.js
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL