（一个）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非常类似。就是一种数据的获取机制。

转载于:https://www.cnblogs.com/blfshiye/p/4713772.html

（一个）AngularJS获取贴纸Hello World相关推荐

复制一个文件或者从一个资源获取一个文件并复制
/*** 复制一个文件或者从一个资源获取一个文件并复制* @param unknown_type $source 一个文件名或者一个资源,如$source='http://dctest.jub.cn/ ...
[js] 写一个方法获取图片的方向
[js] 写一个方法获取图片的方向 <!DOCTYPE html> <html> <head><meta charset="utf-8"& ...
C++ 一个程序获取另一个程序Edit控件的内容
转载地址:https://www.cnblogs.com/lujin49/p/4796502.html //一个程序获取另一个程序Edit控件的内容 //根据指定程序的标题名获取改程序窗口的句柄 HW ...
《AngularJS高级程序设计》——第2章你的第一个AngularJS应用 2.1 准备项目
本节书摘来自异步社区<AngularJS高级程序设计>一书中的第2章,第2.1节,作者:[美]Adam Freeman(弗里曼)著,更多章节内容可以访问云栖社区"异步社区&quo ...
js获取url上的数据;angularjs获取url上的参数
<script> var id= location.search.substring(1).split('=')[1] //获取url上的数据 </script> ====== ...
MySQL 两张表关联更新（用一个表的数据更新另一个表的数据）两个表使用条件从另外一个表获取数据更新本表
MySQL 两张表关联更新(用一个表的数据更新另一个表的数据)两个表使用条件从另外一个表获取数据更新本表有两张表,info1, info2 . info1: info2: 方式一:要用info2中的 ...
一个SQL获取某股票连续上涨的天数
一个SQL获取某股票连续上涨的天数 1.1 问题 2.1 思路 3.1 创建Table 3.2 插入数据 3.3 sql1:计算每天的涨跌情况 3.4 sql2:根据sql1的结果计算连续上涨的时间段 ...
java简单从一个数据库获取数据，然后插入到另外一个数据库
思路:从一个数据库获取数据,然后插入到另外一个数据库,使用springboot的话就需要在application.yml配置两个数据库,这样比较麻烦也要注意注解的使用,如: server:port: ...
angularjs学习笔记一——了解angularjs、开发环境搭建、第一个angularjs程序
一.什么是angularJS angularJS是基于javascript的框架,所谓框架,自然就是封装了很多功能,举个例子,使用原生javascript,如果你要写一个网页幻灯片,你可能需要几十行代 ...

（一个）AngularJS获取贴纸Hello World

（一个）AngularJS获取贴纸Hello World相关推荐

最新文章

热门文章