AngularJS入门示例之Hello World详解
本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
栏 目:AngularJS
下一篇:AngularJS iframe跨域打开内容时报错误的解决办法
本文标题:AngularJS入门示例之Hello World详解
本文地址:http://www.codeinn.net/misctech/154992.html