行如风 Angular 初识3

最近一直在学习AngularJs的内容，受益颇多，今天就继续为大家分享我的学习成果，上一篇博文主要说了一下关于MVC的事情，这个是学习Angular的基础，所以我觉得如果是小白的话非常有必要搞清楚三者之间的关系，废话不多说。

Angualar的主要特征呢，前面说过是双向数据绑定，那么是怎么来实现的呢？

先来说一下MVVM，MVVM就是module-view-view-module(模型---视图---视图---模型)，与之前的MVC不同的是MVVM是双向的，即模型改变视图会自动跟着变，视图改变模型也会跟着变，控制器同样起中间桥梁的作用。下面上一段代码，来举例说明：

<divng-app="myApp"ng-controller="ctrl">
<div>{{name}}</div>
<inputng-model="name">
</div>
<scripttype="text/javascript"src="js/angular.js"></script>
<script>
varm=angular.module('myApp',[]);
m.controller('ctrl',['$scope',function($scope){
$scope.name="helloworld!";
}])
</script>

在上面的代码中ng-app是模块化指令，ng-controller是控制器指令，下面的所有数据的绑定和引用必须全部在当前模块"myApp"和控制器"ctrl"之内写入，否则的话Angular不会检测到对应的服务，{{name}}是控制器内的固定服务对象$scope的name属性，表单里的值由ng-model="name"指令来绑定到视图上。

将上面这段代码Copy到HTML里面去，在页面上会看到div和表单input里的值都是"hello world!"，那么怎么知道视图的变化会影响到模型的变化呢？大家只要在页面里将input里面的值改变，会发现上面div里的值会相应作出同样的变化，这是因为，在改变表单里的值的同时，触发js的事件，js里的控制器$scope里的属性会跟着变化，同样当$scope里的值发生改变的时候，视图里绑定的值也会发生改变，所以当表单input里的值变化，$scope的属性改变，然后{{name}}也跟着变化，故大家会发现表单和div里的值会同时变化。这篇先到这里，大家一起努力~~Fingting!

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!