一旦项目使用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的更多相关文章

  1. （一）AngularJS获取贴纸Hello World

    一旦项目使用JQuery原创javascript,最近参加了一个项目,需要使用AngularJS.RequireJS比较框架,如汰渍. 这里写一些博客,记录自己的学习过程,虽然冠以原来的名字,资料,加 ...

  2. C++ 一个程序获取另一个程序Edit控件的内容

    //一个程序获取另一个程序Edit控件的内容 //根据指定程序的标题名获取改程序窗口的句柄 HWND hWnd=::FindWindow(NULL,"zhang001"); if( ...

  3. angular.js的ng-app 指令定义一个 AngularJS 应用程序。

    <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UT ...

  4. oracle 根据一个时间段获取这个时间段内所有月份、天数、日期

    注:本文来源于< oracle 根据一个时间段获取这个时间段内所有月份.天数.日期 > 获取月份列表: SELECT TO_CHAR(ADD_MONTHS(TO_DATE('2014-10 ...

  5. 通过一个uri获取一个Bitmap对象

    Android 开发过程中,可能会用到的,通过一个uri获取一个Bitmap对象 private Bitmap getBitmapFromUri(Uri uri){  try  {   // 读取ur ...

  6. 第一个AngularJS指令

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. 第一个AngularJS表达式实例

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. 任意指定一个key获取该key所处在哪个node节点

    需求:任意指定一个key获取该key所处在哪个node节点上. 说明:redis自带的命令可以知道一个key所属的slot,可以知道node master对应哪些slot,但没有key和node的对应 ...

  9. 【Java】Jsoup爬虫,一个简单获取京东商品信息的小Demo

    简单记录 - Jsoup爬虫入门实战 数据问题?数据库获取,消息队列中获取中,都可以成为数据源,爬虫! 爬取数据:(获取请求返回的页面信息,筛选出我们想要的数据就可以了!) 我们经常需要分析HTML网 ...

随机推荐

  1. Codeforces Round #256 (Div. 2) C. Painting Fence 或搜索DP

    C. Painting Fence time limit per test 1 second memory limit per test 512 megabytes input standard in ...

  2. Android build-tools升级到23.0.0_rc1无法解决编译后的问题

    背景 作为项目要改变android studio,它采取了.他们主动向我,结果下载了最新的build-tools 23.0.0_rc1,然后,当我再次使用eclipse不了了.git reset了n次 ...

  3. Spring事务讲解示例(转)

    Spring 事务Transaction1.事务的属性1.1 事务隔离IsolationLevel1.2 事务传播PropagationBehavior1.3 事务超时Timeout1.4 只读状态R ...

  4. Android学习笔记（四十）：Preference使用

    Preference从字面上看偏好,译为首选项. 一些配置数据,一些我们上次点击选择的内容.我们希望在下次应用调起的时候依旧有效,无须用户再一次进行配置或选择.Android提供preference这 ...

  5. Java笔试题1

    1. 下面的代码执行后,什么结果输出是? String s1 = new String("Test"); String s2 = new String("Test&quo ...

  6. HTML contact form with CAPTCHA

    http://www.html-form-guide.com/contact-form/html-contact-form-captcha.html#codedownload

  7. Oracle SQL Lesson (11) - 创建其他数据库对象(试图/序列/索引/同义词)

    schema(模式)一个用户下一组对象的集合,一般与用户名一致. 视图 CREATE [OR REPLACE] [FORCE|NOFORCE] VIEW view [(alias[, alias].. ...

  8. HTML5 在canvas绘制一个矩形

    笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...

  9. easyui DateTimeBox OK

    一.datetimebox   ok按钮没有点击事件,但是可以通过onSelect事件模拟出“点击了ok按钮一样的效果”,我的代码: 关键: 0,理解DateTimeBox控件,这个控件是由DateB ...

  10. 【原创】leetCodeOj --- Repeated DNA Sequences 解题报告

    原题地址: https://oj.leetcode.com/problems/repeated-dna-sequences/ 题目内容: All DNA is composed of a series ...