（一个）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网 ...
随机推荐
- 【Android进阶】Android面试题目整理与讲解（一）
这一篇文章专门整理一下研究过的Android面试题,内容会随着学习不断的增加,如果答案有错误,希望大家可以指正 1.简述Activity的生命周期 当Activity开始启动的时候,首先调用onCre ...
- Mongoose即使是简单的表查询
从我原来的博客尖,欢迎大家光临 http://www.hacke2.cn 像我这篇文章所说的基于Node.js + jade + Mongoose 模仿gokk.tv.当时停止开发是由于我深深的感觉到 ...
- Blend4精选案例图解教程（五）：可视数据管理
原文:Blend4精选案例图解教程(五):可视数据管理 应用程序中我们会经常需要操作数据,在程序设计之初示例数据一般都是手工添加,Blend4提供了非常方便的数据管理能力,包括丰富的数据类型和内置示例 ...
- 玩转html5（二）----用canvas结合脚本在画布上画简单的图（html5又一强大功能）
在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字. 在代码中均给出了注释,在这里特别强调的一点是:使用c ...
- 【原创】UVAOJ水题10025解题报告
首先是原题,转自UVAOJ The ? 1 ? 2 ? ... ? n = k problem The problem Given the following formula, one can s ...
- VC版八皇后
一． 功能需求: 1. 可以让玩家摆棋,并让电脑推断是否正确 2. 能让电脑给予帮助(给出全部可能结果) 3. 实现悔棋功能 4. 实现重置功能 5. 加入点按键音效果更佳 二． 整体设计计: 1 ...
- 返璞归真 asp.net mvc (1) - 添加、查询、更新和删除的 Demo
原文:返璞归真 asp.net mvc (1) - 添加.查询.更新和删除的 Demo [索引页] [源码下载] 返璞归真 asp.net mvc (1) - 添加.查询.更新和删除的 Demo 作者 ...
- 【C语言】推断一个数的奇偶（位操作）
//推断一个数的奇偶 #include <stdio.h> int is_signal(int num) { if (num & 1) return 1; else return ...
- [LeetCode238]Product of Array Except Self
题目: Given an array of n integers where n > 1, nums, return an array output such that output[i] is ...
- 虚拟机VM10连衣裙Mac OS X 10.9.3
最近WWDC终极大招释放--新的编程语言Swift(迅速),导致大波浪,渴望围观程序猿.当然,工欲善其事,其利润,因此,对于那些谁不Mac非常为难.可是,请放心.本文教你怎样在Windows下也能体验 ...