（一）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比较框架,如汰渍.这里写一些博客,记录自己的学习过程,虽然冠以原来的名字,实际上都是 ...
- angularJS获取json数据（实战）
学习了这么多天的AngularJS,今天想从实战的角度和大家分享一个简单的Demo--用户查询系统,以巩固之前所学知识.功能需求需要满足两点 1.查询所有用户信息,并在前端展示 2.根据id查询用户信 ...
- ASP.NET Web API 异常处理 HttpResponseException 以及Angularjs获取异常信息并提示
一.HttpResponseException 如果一个Web API控制器抛出一个未捕捉异常,默认地,大多数异常都会被转化成一个带有状态码“500 – 内部服务器错误”的HTTP响应.HttpRes ...
- 前端学习——ionic/AngularJs——获取验证码倒计时按钮
按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 代码借鉴于:http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p= ...
- AngularJS获取项目中定义的json文件
项目结构: 文件夹js位于根路径下 $http.get('js/app/contact/contacts.json').then(function (res) { /*下面就是获取到的数据*/ $sc ...
- angularjs获取元素以及angular.element()用法
addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 ...
- angularJs获取复选框中id 进行批量删除
主要思路:我们需要定义一个用于存储选中 ID 的数组,当我们点击复选框后判断是选择还是取消选择,如果是选择就加到数组中,如果是取消选择就从数组中移除.在点击删除按钮时需要用到这个存储了 ID 的数组. ...
- angularjs获取参数方法
链接:/tab/newsview?id=58 .controller('NewsViewCtrl', ["$scope", "$location"," ...
- angularjs 获取地址传参
.controller('CityCtrl', function ($scope, $location,$ionicModal) { 注入location服务 $scope.name = $locat ...
随机推荐
- ftp的主动模式(port)与被动模式(PASV) (转)
FTP是仅基于TCP的服务,不支持UDP.与众不同的是FTP使用2个端口,一个数据端口和一个命令端口(也可叫做控制端口).通常来说这两个端口是21(命令端口)和20(数据端口).但FTP工作方式的不同 ...
- LoaderManager使用具体解释（二）---了解LoaderManager
了解LoaderManager 这篇文章将介绍LoaderManager类,这是该系列的第二篇文章. 一:Loaders之前世界 二:了解LoaderManager 三:实现Loaders 四:实例: ...
- Android_使用StrictMode
调试开发
本博文为子墨原创,转载请注明出处! http://blog.csdn.net/zimo2013/article/details/40076049 1.StrictMode简单介绍 自Android 2 ...
- MFC调试小技巧
今天看acl源码的时候看到一个函数AllocConsole().百度一下感觉这个函数对于调试非常不错,当然对于MFC里面的调试信息,我都是用TRACE打印自己感兴趣的消息的,而且仅仅有在DEBUG里面 ...
- struts2充分国际化案例 错误解决
在struts2中须要做国际化的有: jsp页面的国际化,action错误信息的国际化,转换错误信息的国际化.校验错误信息的国际化 在之前的样例中已经做过和国际化相关的样例了,在struts.xml中 ...
- .Net中获取打印机的相关信息
原文:.Net中获取打印机的相关信息 新项目中牵涉到对打印机的一些操作,最重要的莫过于获取打印机的状态,IP等信息,代码量不大,但是也是自己花了一点时间总结出来的,希望能帮助需要的朋友. Printe ...
- Directx11学习笔记【五】 基本的数学知识----向量篇
本文参考dx11龙书 Chapter1 vector algebra(向量代数) 要想学好游戏编程,扎实的数学知识是尤为重要的,下面将对dx11龙书中有关向量的数学知识做一下总结. 在数学中,几何向量 ...
- decimal ? 含义
例如: decimal ? je = zfje; 意思是 将 JE赋值为 ZFJE , 并且允许 JE 为 NULL 值 这时JE为引用类型
- 证明 poj 1014 模优化修剪，部分递归 有错误
这个问题是存在做.我发现即使是可行的一个问题,但不一定正确. 大部分数据疲软,因为主题. id=1014">poj 1014 Dividing 题目大意:有6堆石头,权重分别为1 2 ...
- [Unity3D]Unity3D游戏开发《反对》说到游戏(上)——目标跟踪
朋友,大家好.我是秦培,欢迎关注我的博客.我的博客地址blog.csdn.net/qinyuanpei. 首先博主要自我反省,过了这么久才来更新博客,这段时间主要是在忙着写期末的作业,所以博主基本上没 ...