AngularJS的四大核心特性（二）

发布时间：2020-12-17 09:38:34 所属栏目：安全来源：网络整理

导读：AngularJS核心特性3---指令系统指令的本质：类似于taglib !DOCTYPE htmlhtml ng-app = "MyModule"headmeta charset="UTF-8"titleAngularJS第三特性指令系统/title/headbodyhello/hello/bodyscript src="js/angular-1.3.0.js"/scriptscript src="js/HelloAng

AngularJS核心特性3---指令系统

指令的本质：类似于taglib

<!DOCTYPE html>
<html  ng-app = "MyModule">
	<head>
		<meta charset="UTF-8">
		<title>AngularJS第三特性指令系统</title>
	</head>
	<body>
		<hello></hello>
	</body>
	<script src="js/angular-1.3.0.js"></script>
	<script src="js/HelloAngular_Directive.js"></script>
</html>

如上HTML代码中出现了<hello>这个标签，但是浏览器不认识<hello>标签，默认的执行行为就是将其忽略。而AngularJS为了不让它被忽略，故在js中如下操作：

var myModule = angular.module("MyModule",[]);
myModule.directive("hello",function  () {
	return {
		restrict: 'E',template: '<div>Hi! Everyone!</div>',replace: true		
	}
});

AngularJS一切都是从模块开始的，所以先创建的模块myModule，再调用它的方法directive，指令名称为hello的标签名，该标签名就是对应HTML页的那个hello标签名，接着就是function函数具体操作了。

运行起来后，就会发现，hello已经被替换成了模板，另外的restrict和replace函数，自己可以查一下。运行结果如下：

指令系统的神奇之处就在于，当调用一大堆东西的时候可以先定义指令，再将其封装起来，然后调用起来就会特别爽！其实上述的ng-app就是一个指令，相当于C#中的main，从这个指令开始，内部的所有标签内容就归AngularJS来管了，也就是说AngularJS是从ng-app来启动的，只能出现一次。

AngularJS核心特性4---双向数据绑定

先简单说一下传统的单向数据绑定的处理流程：把模板写好后，加上数据，这个数据可能从后台服务端读出来的，模板和数据结合在一起，通过数据绑定机制，生成HTML标签，在将该HTML标签插入到文档流中去。

存在的缺点：标签一旦生成就无法变动了，当有新数据进来时，没办法只能重新再来一遍，并整体替换掉。

AngularJS为使过程更优雅进行，采用了双向数据绑定的形式，核心思想是：视图与数据相对应，即视图上数据变化时，数据模型中的数据也响应变化，数据模型变化时，视图会自动更新，可借助一个事件机制来实现。如下：

那么HTML中哪些视图会不断的变化呢？表单!主要用来收集用户输入，很容易变化，通过AngularJS同步到数据模型中去！代码特别简单，不必书写js代码，只需导入相应的js库即可：

<!DOCTYPE html>
<html ng-app>
	<head>
		<meta charset="UTF-8">
		<title>AngularJS核心特性4：数据双向绑定</title>
	</head>
	<body>
		<div>
			<input ng-model="greeting.text" />
			<p>{{greeting.text}},AngularJS</p>
		</div>
	</body>
	<script type="text/javascript" src="js/angular-1.3.0.js" ></script>
</html>

双花括号代表取值，当ng-model变化时，p标签中的内容会自动变化。运行结果：

学习了双向绑定特性后，还请大家思考一下为什么其他前端框架只是单向数据绑定，而不实现双向的？双向数据绑定又有什么潜在的缺点呢？

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!