一旦项目使用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. angularJS获取json数据(实战)

    学习了这么多天的AngularJS,今天想从实战的角度和大家分享一个简单的Demo--用户查询系统,以巩固之前所学知识.功能需求需要满足两点 1.查询所有用户信息,并在前端展示 2.根据id查询用户信 ...

  3. ASP.NET Web API 异常处理 HttpResponseException 以及Angularjs获取异常信息并提示

    一.HttpResponseException 如果一个Web API控制器抛出一个未捕捉异常,默认地,大多数异常都会被转化成一个带有状态码“500 – 内部服务器错误”的HTTP响应.HttpRes ...

  4. 前端学习——ionic/AngularJs——获取验证码倒计时按钮

     按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 代码借鉴于:http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p= ...

  5. AngularJS获取项目中定义的json文件

    项目结构: 文件夹js位于根路径下 $http.get('js/app/contact/contacts.json').then(function (res) { /*下面就是获取到的数据*/ $sc ...

  6. angularjs获取元素以及angular.element()用法

    addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 ...

  7. angularJs获取复选框中id 进行批量删除

    主要思路:我们需要定义一个用于存储选中 ID 的数组,当我们点击复选框后判断是选择还是取消选择,如果是选择就加到数组中,如果是取消选择就从数组中移除.在点击删除按钮时需要用到这个存储了 ID 的数组. ...

  8. angularjs获取参数方法

    链接:/tab/newsview?id=58 .controller('NewsViewCtrl', ["$scope", "$location"," ...

  9. angularjs 获取地址传参

    .controller('CityCtrl', function ($scope, $location,$ionicModal) { 注入location服务 $scope.name = $locat ...

随机推荐

  1. A Mathematical Curiosity

    A Mathematical Curiosity Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/O ...

  2. 顺序容器的insert使用方法

    #include <iostream> #include <algorithm> #include <vector> #include <string> ...

  3. 返璞归真 asp.net mvc (4) - View/ViewEngine

    原文:返璞归真 asp.net mvc (4) - View/ViewEngine [索引页] [源码下载] 返璞归真 asp.net mvc (4) - View/ViewEngine 作者:web ...

  4. spring 配置属性的详细信息

    摘要(这篇文章讲的红,蓝说这话节) 字面值 字面值:可用字符串表示的值,能够通过<value>元素标签或value属性进行注入 基本数据类型及其封装类.String等类型都能够採取字面值注 ...

  5. IP多播(组播)

    IP多播是实现数据一对多通信的模式.从一个源点传送到多个目的地,数据仅仅拷贝一份.这里说的数据仅仅拷贝一份,是指在每一条须要它的两个点之间,数据仅仅有一份.例如以下图为<计算机网络>(谢希 ...

  6. jQuery 完成ajax传jsonObject数据,并在后台处理

    效果图: 1.js文件封装的几个js工具 <span style="font-family:KaiTi_GB2312;font-size:18px;">//兼容ie i ...

  7. Android应用程序绑定服务(bindService)的过程源码分析

    Android应用程序组件Service与Activity一样,既能够在新的进程中启动,也能够在应用程序进程内部启动:前面我们已经分析了在新的进程中启动Service的过程,本文将要介绍在应用程序内部 ...

  8. S2SH新手框架结构的准备工作只需要导入这些文件

    实习北京最近一直在某公司.时间很冲突,总想着有事找东西坐,思想,做事先成套我吧 一套完整的东西想好主题,术去实现了,在学校尽管说是学了J2EE,可是确实没学到东西,Struts2+Hibernate不 ...

  9. FastReport扩展类

    题记: 最近有在用FastReport进行开发报表工作,当然也有在看书,突然想到可以用书中所写来实现一个fastreport的帮助类. 对于引用第三方类库,我们都会去将这个库在调用前进行相应的封装,也 ...

  10. Windows Server 2012启用Windows功能NetFx3时出错解决方法

    作者:冰点阳光 | 可以转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明网址:http://baohua.me/operating-system/windows-server-2012- ...