前言： angularJS以node为主的js页面的mvvm框架
四大特性： 1，mvc(很简单，model–view–controller) 2，模块化（将所有的执行函数，为了防止污染全局变量，把它加在angular对象下） **3，指令系统（ng-controller等） 4，双向数据绑定(类似vue，观察者模式)**
往往在学习某种语言或者框架时，如果之前已经学习过类似的，便不需要再从文档一页一页开始看。先从小的demo来看看，结合官方文档（现在一般官方文档的质量都超高），angular到底是怎么用的。先知道怎么用，再学习为什么，这样效率更高一些，也会在学习原理的时候不会不知所云。 以下代码均可执行成功
directive自定义标签
<!doctype html>
<html ng-app="Directive">
<head><meta charset="utf-8"></head>
<body>
<hello>--这里的内容也不会显示，整个被替换--
</hello>
</body>
<script src="js/angular.js"></script>
<script>
var myModule = angular.module("Directive", []);
myModule.directive("hello", function() {
return {
restrict: 'E',
template: '<div><p>这里演示的是如何定义自己的标签，可以抽象出公共的部分，作为标签用在页面上</p><hr>即，directive方法，自定义标签</div>',
replace: true
}
});
</script>
</html>
数据绑定
<!doctype html>
<html ng-app="Module">
<head><meta charset="utf-8"></head>
<body>
<div ng-controller="greetingText">
<p>"{{}}"表示取值，在这里显示不出来，必须转义\{{}}}：--{{greeting.text}},Angular</p>
</div>
</body>
<script src="js/angular.js"></script>
<script>
var myModule = angular.module("Module", []);
myModule.controller("greetingText", ['$scope',
function HelloAngular($scope) {
$scope.greeting = {
text: 'Hello'
};
}
]);
</script>
</html>
demo总结
以上两个案例很清晰展示了，四种特性。 1，ng-app(表示angular的入口),ng-controller(控制器注册),ng-bind(当页面加载完成后再显示，防止当angular.js未加载完成时显示源代码)等指令系统。 2，模块化。每个var myModule = angular.module(“Module”, []);将ng-app的值的module挂在angular对象下，避免污染全局空间 3，mvc。{{}}view层，取出controller中设置的值（这个值就是module,数据模型）。即，所有的数据值都是属于module层，相当于一个数据结构。所有的逻辑处理都放在controller层。所有的样式，数据展示都放在view层。三层分离，类似于spring的面向切面编程，低耦合。 4，双向数据绑定。大多数mvc,mvvm框架均实现了双向数据绑定。利用观察者订阅模式。在第二个例子里，{{greeting.text}}与$scope.greeting中的text值形成绑定。前者为订阅者。
转载请注明原文地址: https://ju.6miu.com/read-1298657.html
