（一个）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网 ...
随机推荐
- Core 1.0中的管道-中间件模式
ASP.NET Core 1.0中的管道-中间件模式 SP.NET Core 1.0借鉴了Katana项目的管道设计(Pipeline).日志记录.用户认证.MVC等模块都以中间件(Middlewar ...
- C++写一个简单的解析器（分析C语言）
该方案实现了一个分析C语言的词法分析+解析. 注意: 1.简单语法,部分秕.它可以在本文法的基础上进行扩展,此过程使用自上而下LL(1)语法. 2.自己主动能达到求First 集和 Follow 集. ...
- HDU1698_Just a Hook(线段树/成段更新)
解题报告 题意: 原本区间1到n都是1,区间成段改变成一个值,求最后区间1到n的和. 思路: 线段树成段更新,区间去和. #include <iostream> #include < ...
- SICP的一些个人看法
网上搜书的时候,看到非常多人将这本书神话. 坦率地说,个人认为这本书过于学术化, 没什么实际project价值.一大堆题目也基本是高中数学竞赛题类似,浪费时间. 软件的核心技术是什么? 1> ...
- C++ Primer 学习笔记_40_STL实践与分析（14）--概要、先来看看算法【上】
STL实践与分析 --概述.初窥算法[上] 标准库容器定义的操作很少.并没有给容器加入大量的功能函数.而是选择提供一组算法,这些算法大都不依赖特定的容器类型,是"泛型"的. ...
- SQL Server数据库视图
1:什么是视图 2:视图和查询的区别 3:视图的优点 4:如何创建和管理视图 5:如何通过视图修改基本表的数据 6:如何通过视图实现数据的安全性 A:什么是视图: 视图(view):从一个或几个基本表 ...
- Android：简单的弹幕效果达到
首先,效果图.分类似至360检测到的骚扰电话页面: 布局非常easy,上面是一个RelativeLayout,以下一个Button. 功能: (1)弹幕生成后自己主动从右側往左側滚动(Translat ...
- mapreduce程序来实现分类
文件的内容例如以下所看到的: 5 45 8 876 6 45 要求最后的输出格式: 1 5 2 6 3 8 4 45 5 45 5 876 首先,这个题目是须要对文 ...
- 打开 chm 帮助文件显示空白及解决方法
有个很奇葩的解决方法:把 chm 文件用压缩软件压缩,然后用压缩软打开此压缩包,直接双击压缩包里面的 chm 文件 这虽然解决了问题,但是这不科学…… 分析:直接打开压缩包里面的文件,压缩包的文件是临 ...
- CentOS 6.3 安装 samba 共享(转)
PHP环境在linux下,但是开发的时候用的是windows,于是我用了samba将linux的一个目录共享,然后在windows上做映射,这样就可以直接在windows下编辑linux上的文件了 首 ...