angularJS的核心特性
前几天师傅让我了解一下angularJS，angularJS是一个前端框架，具体的优缺点和运用场景我现在也还没有搞清楚，暂时就先不做描述了，留到运用以后进行补充吧。
angularJS四大核心特性：MVC、Module（模块化）、指令系统、双向数据绑定。
下面就以上四大核心特性，进行一些简要介绍：
1、MVC（Module——Control——View）
我们应该都知道MVC代表：数据模型层（Module）——业务逻辑和控制逻辑（Control）——视图层（View），先看一个简单的angularJS例子：
<!Doctype html> <html ng-app> <head> <meta charset="utf-8"> <script> function HelloAngular($scope){ $scope.greeting = { text: "Hello" }; } </script> </head> <body> <div ng-controller="HelloAngular"> <p>{{greeting.text}},Angular</p> </div> </body> <script src="js/angular-1.3.0.js"></script> </html>
运行结果：Hello,Angular
分析这个简单的例子，我们可以比较明显的区分出MVC的各层，div中定义的ng-controller就是一个控制器，这个控制器被定义为一个函数，而p标签的内容很明显就是显示层，函数中定义了一个greeting对象的text属性，而在显示曾中的通过{{}}获取它的值，很明显为数据模型层。这样页面显示的内容就是数据模型的值了。
2、Module（模块化）
上面的例子中我们定义了一个全局函数，但是有经验的开发者都知道我们在开发过程中应该尽量避免定义全局变量和全局函数。因此我们就需要了解angularJS的模块化特性了，我们修改上面的实例
<!Doctype html> <html ng-app="HelloAngular"> <head> <meta charset="utf-8"> </head> <body> <div ng-controller="helloAngular"> <p>{{greeting.text}},Angular</p> </div> </body> <script src="js/angular-1.3.0.js"></script> <script> var myModule = angular.module("HelloAngular", []); myModule.controller("helloAngular", ['$scope', function HelloAngular($scope) { $scope.greeting = { text: 'Hello' }; } ]); </script> </html>
和上面的实例比对，下面的实例中使用angular的module方法定义了一个模块，并在定义的模块上调用了一个controller方法，很明显是定义了一个myModule模块的一个控制器，该控制器的名字为helloAngular，其具体实现则为上面实例中的HelloAngular函数，这样我们就把控制器模块化了，而不在使用全局函数作为控制器。
注意：一切都是从模块开始的，我们在使用angularJS时，一定要先想到模块，所有的东西都是建立在模块的基础上，只有定义了模块才能调用其它方法。
上面实例中的ng-app相当于java中main函数，所以每个页面中只能定义一个ng-app，他定了所在的模块。
3、指令系统
angular的指令系统是最有特色、最吸引人的一个特性。下面先看一个实例：
<!Doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> </head> <body> <hello></hello> </body> <script src="js/angular-1.3.0.js"></script> <script> var myModule = angular.module("MyModule", []); myModule.directive("hello", function() { return { restrict: 'E', template: '<div>Hi everyone!</div>', replace: true } }); </script> </html>
实例中的html代码中有一个hello标签，但我们知道标准的HTML代码中并没有hello标签，我们再看一下具体的js代码中，如上个实例，首先定义了一个模块myModule，然后在模块上调用了directive函数，很明显hello则是这个指令名称，而对应的方法也很明显，返回一个template，而这个templte的内容则成为了hello标签的内容了。
大家想一下，如果我们定义大量的指令，然后就可以在页面中随便调用了。
4、双向数据绑定
大部分框架实现的都是单向数据绑定，单向数据绑定的意思是将数据绑定到模板上，并且显示到界面上，这种模式的缺点是显示出来后，当数据更改时，并不能及时的更新到页面上，因此angular提出了双向数据绑定的定义。
我们来看一个实例：
<!Doctype html> <html ng-app> <head> <meta charset="utf-8"> </head> <body> <div> <input ng-model="greeting.text"/> <p>{{greeting.text}},AngularJS</p> </div> </body> <script src="js/angular-1.3.0.js"></script> </html>
界面截图：
该实例无论你在input中输入任何内容，都会实时的显示在下面的p标签中，我们可以看到该实例中我们没有写任何js代码，我们在input上绑定了一个ng-model，它的值为greeting.text，而在p标签中则获取这个值，实时显示在html中。
