1.AngularJS 数据绑定

AngularJS 通过原生的MVC 功能增强了HTML，可以快捷和愉悦的构建出极富表现力的客户端应用。将页面的一部分封装为一个应用，但是并不强迫整个页面都使用AngularJS 进行开发。

要理解数据绑定，必须先理解MVC。MVC是一种软件架构设计模式，它将表现从用户交互中分离出来。AngularJS 应用MVC的组成如下：

  • View（视图），即HTML
  • Model（模型），当前视图中可用的数据
  • Controller（控制器），即JavaScript 函数，可以添加或修改属性

通常，模型包含应用的数据和与数据交互的方法，视图将数据呈现给用户，控制器则是二者之间的桥梁。可以将视图理解为模型状态的映射，当客户端的数据模型改变时，视图就能反映出这些变化，不需要写自定义的代码来实现这个过程。没错，就是这么简单。

这个机制怎么实现的呢？AngularJS 会实时记录数据模型所包含的数据，当AngularJS认为某个值可能发生变化是，就运行自己的事件循环来检查这个值是否变脏，这个事件会调用$digest() 循环。这个过程叫做脏检查(dirty checking)。当有潜在的变化存在时，AngularJS 会在事件循环执行脏检查来保证数据的一致性。这样，不需要构建复杂的JavaScript 功能就能在视图中实现数据自动同步。

1.简单的数据绑定

数据对象是指$scope 对象，是一个简单的JavaScript 对象，它的属性可以被视图访问，也可以同控制器交互。

<!DOCTYPE html>
<!--ng-app声明所有被他包含的元素都属于AngularJS应用-->
<html ng-app>
<head>
<title>Simple app</title>
<!--引入js 文件, 也可以拷本地使用 -->
<script src="https://cdn.bootcss.com/angular.js/1.2.16/angular.min.js"></script>
</script>
</head>
<body>
<!--用ng-model 指令将内部数据模型对象($scope)中的name 属性绑定到文本数据字段上，无论在这里输入了啥都会实时同步到数据模型中-->
<input ng-model="name" type="text" placeholder="Your name">
<!--这里实时地反映出模型的更新-->
<h1>Hello {{ name }}</h1>
</body>
</html>

　

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8">
<!--高版本可能会有问题-->
    <script src="https://cdn.bootcss.com/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<!--ng-controller 指令声明所有被它包含的元素都属于这个控制器-->
    <div ng-controller='MyController'>
        <input ng-model="person.name" type="text" placeholder="Your name">
        <h1>Hello {{ person.name }}</h1>
        <!--这里实时的反映模型的更新-->
        <h5>{{ clock }}</h5>
    </div>
    <script>
        function MyController($scope, $timeout) {
            var updateClock = function () {
                <!--更新$scope 的clock 属性-->
                $scope.clock = new Date();
                <!--每过一秒调用一次-->
                $timeout(function () {
                    updateClock();
                }, 1000);
            };
            updateClock();
        };</script>
</body>
</html>

　　

2.数据绑定的最佳方式

由于JavaScript 自身的特点，以及它在传递值和引用时的不同处理方式。通常认为，在视图中通过对象的属性而不是对象本身来进行引用绑定，是最佳的方式。

function MyController($scope) {
$scope.clock = {
now: new Date()
};
var updateClock = function() {
<!--相比更新$scope.clock, 更新$scope.clock.now 是更好的选择 -->
$scope.clock.now = new Date()
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};

　　

 

posted on 2017-08-10 11:13  MojoJojo  阅读(247)  评论(0)    收藏  举报

导航