（一个）AngularJS获取贴纸Hello World
一旦项目使用JQuery原创javascript，最近参加了一个项目，需要使用AngularJS、RequireJS比较框架，如汰渍。这里写一些博客，记录自己的学习过程，虽然冠以原来的名字，实际上都是指一些信息网上。的一些实践和理解。再没有熟悉AngularJS之前，预计也不出什么高质量的文章。仅仅能算是学习笔记和备忘录。练习使用的版本号是当前最新的稳定版本号1.2.25。
演示样例代码例如以下：
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Hello,World!</title>
<script src="angular1.2.25.js"></script>
</head>
<body>
<input type="text" ng-model="yourName"> <h1>Hello, {{yourName}}</h1>
</body>
</html>
用浏览器打开这个网页，在文本框进行输入。发现界面会自己主动实时显示。假设用javascript或jquery，完毕这么一个小功能，我们组要注冊监听事件，获取text控件的值，然后将值塞入<h1>中显示。
而使用AngularJS，我们须要做的事情是：加入ng-app，加入ng-model。使用{{yourName}}显示。非常显然，使用AngularJS要简单的多，并且代码更紧凑。以下我们简单看下这3个东西的意思：
1、ng-app：它能够放在不论什么dom节点上，代表该结点以及它的全部子节点都在AngularJS的管理范围之内；假设去掉这个标记。发现AngularJS框架不会起效果。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello,World!</title>
<script src="angular1.2.25.js"></script>
</head>
<body>
<div ng-app>
<input type="text" ng-model="yourName"> <h1>Hello, {{yourName}}</h1>
</div>
<h1>Hello, {{yourName}}</h1>
</body>
</html>
这次我们把ng-app放到了<div>上。能够看到div内部的<h1>能够实时显示输入的数据，而外部的<h1>没有效果。能够看到。一个html页面能够所有交予AngularJS来管理。也能够仅仅让AngularJS管理页面的一部分。我们能够按需加入ng-app所在的dom节点。
2、ng-model：这个是AngularJS数据的双向绑定特性。
简单点理解：告诉AngularJS这是个数据模型，你帮我存到内存中。界面上改动数据。内存中数据也会自己主动改动；改动内存中的变量值。界面显示也会自己主动更改。
这个特性显然非常方便，可以保持数据的一致性，避免我们自己加代码来完毕这个功能。
3、{{yourName}}：这个是框架提供的表达式语法，可以显示内存中数据模型的值。这个跟struts2的<s:property>、<s:text>类似，就是用来显示数据的。
这样的仅仅是AngularJS定义的语法格式，跟JSP页面中的EL表达式，struts2的OGNL非常类似。就是一种数据的获取机制。
版权声明：本文博客原创文章，博客，未经同意，不得转载。
（一个）AngularJS获取贴纸Hello World的更多相关文章
- （一）AngularJS获取贴纸Hello World
一旦项目使用JQuery原创javascript,最近参加了一个项目,需要使用AngularJS.RequireJS比较框架,如汰渍. 这里写一些博客,记录自己的学习过程,虽然冠以原来的名字,资料,加 ...
- C++ 一个程序获取另一个程序Edit控件的内容
//一个程序获取另一个程序Edit控件的内容 //根据指定程序的标题名获取改程序窗口的句柄 HWND hWnd=::FindWindow(NULL,"zhang001"); if( ...
- angular.js的ng-app 指令定义一个 AngularJS 应用程序。
<!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UT ...
- oracle 根据一个时间段获取这个时间段内所有月份、天数、日期
注:本文来源于< oracle 根据一个时间段获取这个时间段内所有月份.天数.日期 > 获取月份列表: SELECT TO_CHAR(ADD_MONTHS(TO_DATE('2014-10 ...
- 通过一个uri获取一个Bitmap对象
Android 开发过程中,可能会用到的,通过一个uri获取一个Bitmap对象 private Bitmap getBitmapFromUri(Uri uri){ try { // 读取ur ...
- 第一个AngularJS指令
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 第一个AngularJS表达式实例
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 任意指定一个key获取该key所处在哪个node节点
需求:任意指定一个key获取该key所处在哪个node节点上. 说明:redis自带的命令可以知道一个key所属的slot,可以知道node master对应哪些slot,但没有key和node的对应 ...
- 【Java】Jsoup爬虫,一个简单获取京东商品信息的小Demo
简单记录 - Jsoup爬虫入门实战 数据问题?数据库获取,消息队列中获取中,都可以成为数据源,爬虫! 爬取数据:(获取请求返回的页面信息,筛选出我们想要的数据就可以了!) 我们经常需要分析HTML网 ...
随机推荐
- Callable 获取线程返回值
allable与 Future 两功能是Java在兴许版本号中为了适应多并法才增加的,Callable是类似于Runnable的接口,实现Callable接口的类和实现Runnable的类都是可被其它 ...
- NETSH WINSOCK RESET这个命令的意义和效果？
简要地netsh winsock reset命令含义复位 Winsock 文件夹.一机多用的假设Winsock协议配置问题,那么问题会导致网络连接,我们需要使用netsh winsock reset命 ...
- SpringSecutiry权限管理手册
SpringSecutiry权限管理手册: 请见以下URL: http://www.mossle.com/docs/auth/html/preface.html Spring Security 参考文 ...
- Unreal Engine 4 创建Destructible Mesh(可破坏网格)
Unreal Engine 4的物理引擎用的是PhysX. 支持网格破坏.布料.物理粒子等,非常强大.曾经须要编码才干完毕的工作,在Unreal Engine 4 中仅仅须要拖拖拽拽就完毕了,非常方便 ...
- hdu 2391 Filthy Rich
单纯dp 水一 处理时间点,第一行和第一列特殊处理: 其余的w[i][j]=show(w[i-1][j-1],w[i-1][j],w[i][j-1]); <span style="fo ...
- Hive ERROR: Out of memory due to hash maps used in map-side aggregation
什么时候hive在运行大数据量的统计查询语句时.常常会出现以下OOM错误.详细错误提演示样例如以下: Possible error: Out of memory due to hash maps us ...
- Atitit.列表页and查询条件的最佳实践(1)------设定搜索条件and提交查询and返回json数据
Atitit.列表页and查询条件的最佳实践(1)------设置查询条件and提交查询and返回json数据 1. 1. 配置条件字段@Conditional 1 1 2. 2. 配置条件字段显示类 ...
- 微信开放平台 公众号第三方平台开发 教程四 代公众号调用接口的SDK和demo
原文:微信开放平台 公众号第三方平台开发 教程四 代公众号调用接口的SDK和demo 教程导航: 微信开放平台 公众号第三方平台开发 教程一 平台介绍 微信开放平台 公众号第三方平台开发 教程二 创建 ...
- basename, dirname 在C语言中的使用
basename作用是得到特定的路径中的最后一个'/',后面的内容 如/usr/bin,得到的内容就是bin 如果/sdcard/miui_recovery/backup 得到的内容就是backup ...
- linux文件打开模式
文件打开 int open(const char *pathname, int flags, mode_t mode); 普通方式(Canonical mode) flags中没有设置O_SYN ...