AngularJS四大核心特性：MVC、模块化、指令系统、双向数据绑定。
- MVC
image.png
好处：职责清晰，代码模块化，可复用（特别是Model和View）。
- 模块
一切都是从模块开始。
一个应用可包含多个模块，每一个模块都包含了定义具体功能的代码。
使用模块的好处：
- 保持全局命名空间的清洁
- 编写测试代码更容易，并能保持其清洁，以便更容易找到相互隔离的功能
- 易于在不同应用间复用代码
- 使应用能够以任意顺序加载代码的各个部分
使用angular.module()的方法来声明模块：
//接受两个参数，第一个是模块的名称，第二个是依赖列表，即可以被注入到模块中的对象列表。
angular.module('myApp',[]);
如果调用这个方法时只传递一个参数，那么该方法只用来引用该模块：
//引用名为myApp的模块
angular.module('myApp');
- 作用域
作用域是什么？
- 是表达式执行的上下文
- 是定义应用业务逻辑、控制器方法和视图属性的地方
- 是视图和控制器之间的胶水，在应用将视图渲染并呈现给用户之前，视图中的模板和作用域进行连接，然后应用会对DOM进行设置以便将属性变化通知给AngularJS
- 作用域提供了监视数据模型变化的能力
- 将应用的业务逻辑都放在控制器中，将相关的数据都放在控制器的作用域中，是比较完美的架构
- $scope对象在AngularJS中充当数据模型，但与传统的数据模型不一
样，$scope并不负责处理和操作数据，它只是视图和HTML之间的桥梁，它的所有属性都可以自动被视图访问到
关于作用域的简单代码：
<body>
<div ng-app="myApp">
<h1>Hello {{name}}</h1>
</div>
</body>
<script>
angular.module('myApp',[]).run(function($rootScope){//$rootScope是所有$scope对象的最上层，AngularJS启动并生成视图时，会将根ng-app元素同$rootScope进行绑定
$rootScope.name = "World"
})
</script>
运行结果：
image.png
但在实际情况中，我们一般不会在$rootScope上附加业务逻辑，以免污染全局作用域。我们可以用控制器创建一个隔离的子$scope对象：
<body>
<div ng-app="myApp">
<div ng-controller="MyController">
<h1>Hello {{name}}</h1>
</div>
</div>
</body>
<script>
angular.module('myApp',[]).controller('MyController',
function($scope){
$scope.name = "World";
}
)
</script>
运行结果同上。
作用域的基本功能有：
- 提供观察者以监视数据模型的变化
- 可以将数据模型的变化通知给整个应用，甚至是系统外的组件
- 可以进行嵌套，隔离业务功能和数据
- 给表达式提供运算时所需的执行环境
$scope对象的生命周期处理有四个不同阶段：
- 创建
创建新控制器或指令时，AngularJS会创建一个新的作用域。 - 链接
当AngularJS开始运行时，所有的$scope对象都会附加或者链接到视图中。 - 更新
当事件循环运行时，它通常执行在$rootScope对象上，每个子作用域都执行自己的脏值检测。 - 销毁
当一个$scope在视图中不再需要时，这个作用域会清理和销毁自己。
- 双向数据绑定
简单来说双向数据绑定可以总结为下图：
image.png
数据绑定使我们可以将视图理解为模型状态的映射，当客户端的数据模型发生变化时，视图就能反映出这些变化。AngularJS会记录数据模型所包含的数据在任何特定时间的值，而非初始值。当AngularJS认为某个值可能发生变化的时候，它会运行自己的事件循环来检查这个值是否变“脏”，如果该值从上次事件循环运行之后发生了变化，则该值会被认为是“脏”值，这个过程被称作脏检查。AngularJS会在事件循环时执行脏检查来保证数据的一致性。
简单的双向数据绑定小例子：
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
- 效果：
image.png
网友评论