AngularJS 的四大核心特性：
1. MVC :
Model: 数据模型层
View: 视图层, 所有能看到的都属于视图层
Controller: 业务逻辑和控制逻辑
好处： 职责清晰，代码模块化
为什么23种设计模式里面没有MVC:MVC其实是其它三个经典的设计模式的演变：观察者模式(Observer)(Pub/Sub), 策略模式(Strategy)和组合模式(Composite),它是三种模式的合体！
<!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div ng-controller="test"> <p>{{monica.aha}}</p> </div> <script src="js/angular-1.3.0.js"></script> <script src="HelloAngular_MVC.js"></script> </body> </html>
function test($scope) { $scope.monica = { aha: 'Monica is My Name' }; }
在这个例子中 ng-app 相当于Java 中的 main
<div ng-controller="test"> 就是控制器 controller
<p>{{monica.aha}}</p> 是 view
function test($scope) { $scope.monica = { aha: 'Monica is My Name' }; }
作为 model
在 p 元素中的 {{}} 作用是获取数据
2. 模块化
先创建 angular 模块对象，再调用controller方法
<!doctype html> <html ng-app="a"> <head> <meta charset="utf-8"> </head> <body> <div ng-controller="b"> <p>{{greeting.text}}</p> </div> <div ng-controller="c"> <p>{{greeting.text}}</p> </div> </body> <script src="js/angular-1.3.0.js"></script> <script src="HelloAngular_Modle.js"></script> </html>
var myModule = angular.module("a", []); myModule.controller("b", ['$scope', function ($scope) { $scope.greeting = { text: 'Hello' }; } ]); myModule.controller("c", ['$scope', function ($scope) { $scope.greeting = { text: 'Hello AngularJS' }; } ]);
3. 指令系统
<!DOCTYPE html> <html lang="en" ng-app="Dir"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .test { color: #eee; } </style> </head> <body> <hello></hello> <script src="js/angular-1.3.0.js"></script> <script src="HelloAngular_Dir.js"></script> </body> </html>
var myDir = angular.module('Dir', []); myDir.directive("hello", function() { return { restrict: 'E', template: '<div class="test">Hi Monica</div>', replace: true } });
4. 双向数据绑定
<!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <input ng-model="greeting.text"> <p>{{greeting.text}}, AngularJS</p> </div> <script src="js/angular-1.3.0.js"></script> </body> </html>
三个思考题：
1. 为什么其他的前端框架不支持双向数据绑定
2.如果你来实现双向数据绑定，怎么实现
3.双向数据绑定机制有什么潜在的问题