初识angular体验(四)

亲们，大家好，又到了我们angular每周分享的时间啦，从这周开始呢我准备把angular的基础知识给大家讲解下，欢迎大家随时留言，一起讨论问题！

首先给大家介绍下双向数据绑定，angular的数据绑定是数据模型(model)与视图(view)组件的自动同步。angular的实现方式允许你把应用中的模型看成单一数据源。而视图始终是数据模型的一种展现形式。当模型改变时，视图就能反映这种改变，反之亦然。

下面我们先来看一段代码：

<div ng-app="hd" ng-controller="ctrl">
    <div>`name`</div>
</div>
<script>
    var m = angular.module('hd', []);
    //双向数据绑定
    m.controller('ctrl', ['$scope', function ($scope) {
        //viewModel
        $scope.name = '学习angular';//model   server
    }]);
</script>

以上代码的运行结果是学习angular。

解读：这里的"{{}}"相当于"ng-model"指令，其实就是一种绑定，但是仅从这个例子，不能说实现了双向数据绑定。这里是将angular的数据模型（Model）的值绑定到了视图（View）上了。

上面介绍的不能算是双向数据绑定，下面引出真正的双向绑定，那么双向数据绑定有何应用场景，什么样的情况需要数据模型与视图能够相互映射相互影响呢，可能是你没有察觉，现在很多的网站都能看到这种思想带来的极大便捷，比如说表单，在填写或提交表单时，界面上会根据用户的操作做出及时的相应，这就是一种双向数据绑定的最有力的应用场景。

注意：这个例子很好地诠释了什么是双向绑定。

<div ng-app="hd" ng-controller="ctrl">
    <div>`name`</div>
    <input type="text" ng-model="name">
</div>
<script>
    var m = angular.module('hd', []);
    //双向数据绑定
    m.controller('ctrl', ['$scope', function ($scope) {
        //viewModel
        $scope.name = '学习angular';//model   server
    }]);
</script>

运行结果如下

首先在html中声明了两个标签：一个输入框input和一个div块级标签。

显然采用了两种绑定的方式：{{}}和ng-model，但是功能都是数据绑定，与js文件中控制器中的$scope.name进行了绑定。所以，通过js中$scope.name的赋值会使得前台Html中input和div同时显示"学习angular"。

在输入框中的任何输入都会及时的反应在下面的div中，这也说明了在Html中改变数据也会及时的映射到后台数据模型，真正的实现了双向数据绑定。

本想在本篇再介绍下angular的其它东西，限于时间和篇幅，留在下篇吧，如果觉得有用，记得点赞哦！！！