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使用ng-app自动加载bootstrap框架问题分析
- AngularJS框架的ng-app指令与自动加载实现方法分析
- AngularJS 在同一个界面启动多个ng-app应用模块详解
- AngularJS ng-app 指令实例详解
- 基于AngularJS实现页面滚动到底自动加载数据的功能
- Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
- angularjs中ng-attr的用法详解
- Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
- AngularJS实现网站换肤实例
- AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
相关文章
这篇文章主要为大家详细介绍了angularjs创建弹出框实现拖动效果的相关资料，angularjs modal模态框创建可拖动的指令，感兴趣的小伙伴们可以参考一下2016-01-01
Ionic + Angular.js实现验证码倒计时功能的方法
验证码倒计时这个功能相信对大家每个人来说都不陌生，之前介绍了在Android中的实现方法，下面这篇文章主要给大家介绍了利用Ionic + Angular.js实现验证码倒计时功能的相关资料，文中介绍的非常详细，需要的朋友们下面来一起看看吧。2017-06-06
angularJS利用ng-repeat遍历二维数组的实例代码
本篇文章主要介绍了angularJS利用ng-repeat遍历二维数组的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了angular中如何绑定iframe中src的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了AngularJS动态绑定HTML的方法,结合实例形式分析了AngularJS实现动态绑定HTML的相关操作指令用法与使用注意事项,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了angular中$state.go页面跳转并传递参数的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-05-05
这篇文章主要介绍了AngularJS 的$timeout服务示例代码,需要的朋友可以参考下2017-09-09
本篇文章主要介绍了angular2路由切换改变页面title的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
今天小编就为大家分享一篇angularjs手动识别字符串中的换行符方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了AngularJS实现Model缓存的方式，分享了多种AngularJS实现Model缓存的方法，感兴趣的小伙伴们可以参考一下2016-02-02
最新评论