angularJS四大核心特性：MVC、Module（模块化）、指令系统、双向数据绑定。
一、MVC
Model:数据模型,其实就是angular变量($scope.XX,$rootScope.XX);
View:视图层,Html+Directive(指令);
Controller:业务逻辑和控制逻辑,就是function,数据的增删改查;
一个简单的小例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .main { text-align: center; } </style> <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> </head> <body> <h5 class='main'>尝试修改以下表单。</h5> <div class='main' ng-app="myApp" ng-controller="myCtrl"> 姓: <input type="text" ng-model="lastName"><br> 名: <input type="text" ng-model="firstName"><br> <br> 姓名: {{firstName + " " + lastName}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName= "Menghua"; $scope.lastName= "Sun"; }); </script> </body> </html>
运行结果：
分析这个简单的例子，我们可以比较明显的区分出MVC的各层：
使用angular的module方法定义了一个模块，并在定义的模块上调用了一个controller方法，定义了一个app模块的一个控制器myCtrl;
而p标签的内容很明显就是显示层view，视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{firstName}};
$scope 对象定义了属性firstName,lastName，视图可以获取这些属性,这些定义的属性为数据模型层。
2、Module（模块化）
上例中，将控制器模块化。
可以通过 AngularJS 的 angular.module 函数来创建模块：
<div ng-app="myApp">...</div> <script> var app = angular.module("myApp", []); </script>
模块定义中 []参数用于定义模块的依赖关系；[ ]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。
添加控制器
可以使用 ng-controller 指令来添加应用的控制器:
<div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName = "Menghua"; $scope.lastName = "Sun"; }); </script>
注意：一切都是从模块开始的，我们在使用angularJS时，一定要先想到模块，所有的东西都是建立在模块的基础上，只有定义了模块才能调用其它方法。
上面实例中的ng-app相当于c语言中main函数，所以每个页面中只能定义一个ng-app，他定义了所在的模块。
3、指令系统
AngularJS 通过被称为 指令 的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。
AngularJS 指令
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="firstName='haiyang'"> <p>在输入框中尝试输入:</p> <p>姓名: <input type="text" ng-model="firstName"></p> <p>你输入的为: {{ firstName }}</p> </div> </body> </html>
运行结果：
数据绑定
上例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。
创建自定义的指令
angularjs的自定义指令系统是最有特色、最吸引人的一个特性。下面先看一个实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="myApp"> <hello></hello> <script> var app = angular.module("myApp", []); app.directive("hello", function() { return { template : "<h1>自定义指令hello!</h1>" }; }); </script> </body> </html>
运行结果：
可以通过设置restrict的值，通过以下方式来调用指令：
- 元素名
- 属性
- 类名
- 注释
restrict 值可以是以下几种:
E作为元素名使用A作为属性使用C作为类名使用M作为注释使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="myApp"> <!-- directive: hello --> <script> var app = angular.module("myApp", []); app.directive("hello", function() { return { restrict : "M", replace : true, template : "<h1>自定义指令!</h1>" }; }); </script> <p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则注释是不可见的。</p> <p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p> </body> </html>
运行结果：
4、双向数据绑定
大部分框架实现的都是单向数据绑定，单向数据绑定的意思是将数据绑定到模板上，并且显示到界面上，这种模式的缺点是显示出来后，当数据更改时，并不能及时的更新到页面上，因此angular提出了双向数据绑定的定义。
比如上面第一个实例，该实例无论在input中输入任何内容，都会实时的显示在下面的p标签中，我们可以看到该实例中我们没有写任何js代码，我们在input上绑定了一个ng-model，它的值为firstName,lastName，而在p标签中则获取这个值，实时显示在html中。