（一个）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网 ...
随机推荐
- 如何解决Windows8.1(32bit&64bit)下Cisco VPN Client拨号时报442错误的问题
Cisco VPN Cient大多数网络管理员.技术支持project最流行的教师和最终用户VPNclient一间.对于外部网络访问内部网络,技术类人员. 随着Windows8.1的推出.Cisco ...
- Windows Phone开发（15）：资源
原文:Windows Phone开发(15):资源 活字印刷术是我国"四大发明"之一,毕昇在发明活字印刷术之后,他很快发现一个问题,随着要印刷资料的不断增加,要用到的汉字数目越来越 ...
- Oracle SQL Lesson (4) - 使用转换函数和条件表达式
隐式转换select * from emp where empno='7788'字符(char,varchar2)转换为数字(number)或日期(date)数字或日期转换为字符 显式转换字符转换为数 ...
- arcmap坐标点生成线和面（更正版）
一:本博客的脉络 (1 )做了例如以下更正:之前在网上搜到的结果是:arcmap坐标点生成线和面 ------ 注意该功能在ArcGIS10中没有了,当时自己也没有多想就转载了,再此做一下更正或者叫做 ...
- leetcode先刷_Remove Duplicates from Sorted List II
删除重复节点列表中的.假设所有val如果仅仅是为了保持一个非常easy.应承担重复val节点被删除话.要保持pre节点.每当你想保存这pre问题节点,应该head节点可以被取出,好了,没问题边境控制. ...
- IIS6,IIS7中查看w3wp进程
当我们服务器创建了很多应用程序池,然后某个w3wp.exe进程占用CPU和内存过高,我们怎么查找这个w3wp.exe进程属于哪一个网站呢.其实微软为我们提供了很好的查看工具: 首先打开windows任 ...
- Android在API推荐的方式来实现SQLite数据库的增长、删除、变化、检查操作
package com.examp.use_SQLite.dao; import java.util.ArrayList; import java.util.List; import android. ...
- sql分隔字符串数组
declare @relation_code nvarchar(1024) set @relation_code = '#10000#10002' set @relation_code=substri ...
- 对于COM对象使用ComPtr代替传统指针
对于COM对象来说使用传统指针比较麻烦,还要记得Release()防止内存泄漏,一不小心就会出现各种各样的问题.针对这种问题微软提供了对于COM对象的智能指针ComPtr,这里是官方文档https:/ ...
- 【Linux探索之旅】第一部分第四课：磁盘分区，并完成Ubuntu安装
内容简介 1.第一部分第四课:磁盘分区,并完成Ubuntu安装 2.第一部分第五课预告:Unity桌面,人生若只如初见 磁盘分区 上一课我们正式开始安装Ubuntu了,但是到了分区的那一步,小编却戛然 ...