（一）AngularJS入门贴之Hello World

最新推荐文章于 2019-01-08 06:26:36 发布

aitangyong

最新推荐文章于 2019-01-08 06:26:36 发布

阅读量2.3k

点赞数 7

分类专栏： AngularJS 文章标签： AngularJS学习

本文链接：https://blog.csdn.net/aitangyong/article/details/39645903

版权

AngularJS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

以前项目都是使用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很类似，就是一种数据的获取机制。

aitangyong

关注

7
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
（一）AngularJS入门贴之Hello World

以前项目都是使用JQuery和原始的javascript，最近参加一个项目需要用到AngularJS、RequireJS等比较潮的框架。这里写一些博客，记录自己的学习过程，虽然冠以原创之名，其实都是参考网上的一些资料，加上自己的一些理解。再没有熟悉AngularJS之前，估计也不出什么高质量的文章，只能算是学习笔记和备忘录。
复制链接

扫一扫