angularJS 和其他的JavaScript框架类似,是帮助我们建立MVC框架,从而使前端团队能够同时分工工作,并建立起结构清晰(MVC),易于扩展和维护的前端代码的非常亲密的好朋友(您会爱上它--在大规模JS代码开发的时候)。小型的项目,比如一些中小型企业站点,应该还用不到angularJS,不过即使是中小型项目,我们也鼓励去用一些模块加载器,比如seaJS,达到代码易于维护的目的。
好了回到正题,angularJS的口号是:使用超动感HTML&JS开发WEB应用!为什么能做到这么游刃有余,这得益于使用
模型-视图-控制器(MVC)模式 解耦代码和分离关注点
![](/attachment/201312/23/29377463_1387758319kn6n.png)
(%E2%80%93View%E2%80%93Controller)。
为了理解angular的
模型-视图-控制器(MVC)模式,我们必须逐个了解一下
1,视图(和模板)
在angularJS中,一个视图是模型通过HTML模板渲染之后的映射。这意味着,不论模型什么时候发生变化,AngularJS会实时更新结合点,随之更新视图。比如这个模板
-
<html ng-app>
-
<head>
-
...
-
<script src="lib/angular/angular.js"></script>
-
<script src="js/controllers.js"></script>
-
</head>
-
<body ng-controller="PhoneListCtrl">
-
-
<ul>
-
<li ng-repeat="phone in phones">
-
{{phone.name}}
-
<p>{{phone.snippet}}</p>
-
</li>
-
</ul>
-
</body>
-
</html>
模型(model)会利用这个模板进行渲染,最后映射到
视图(view)ng-repeat:angularJS 迭代器。包裹在phone.name和phone.snippet周围的花括号标识着数据绑定。和常量计算不同的是,这里的表达式实际上是我们应用的一个数据模型引用,这些我们在PhoneListCtrl控制器里面都设置好了。
2,模型和控制器
在PhoneListCtrl控制器里面初始化了数据模型,(这里只不过是一个包含了数组的函数,数组中存储的对象是手机数据列表):
-
function PhoneListCtrl($scope) {
-
$scope.phones = [
-
{"name": "Nexus S",
-
"snippet": "Fast just got faster with Nexus S."},
-
{"name": "Motorola XOOM? with Wi-Fi",
-
"snippet": "The Next, Next Generation tablet."},
-
{"name": "MOTOROLA XOOM?",
-
"snippet": "The Next, Next Generation tablet."}
-
];
-
}
尽管控制器看起来并没有起到什么控制的作用,但是它在这里起到了至关重要的作用。通过给定我们数据模型的语境,控制器允许我们建立模型和视图之间的数据绑定。我们是这样把表现层,数据和逻辑部件联系在一起的:
-
PhoneListCtrl——控制器方法的名字(在JS文件controllers.js中)和标签里面的指令的值相匹配。
-
手机的数据此时与注入到我们控制器函数的作用域($scope)相关联。当应用启动之后,会有一个根作用域被创建出来,而控制器的作用域是根作用域的一个典型后继。这个控制器的作用域对所有标记内部的数据绑定有效。
AngularJS的作用域理论非常重要:一个作用域可以视作模板、模型和控制器协同工作的粘接器。AngularJS使用作用域,同时还有模板中的信息,数据模型和控制器。这些可以帮助模型和视图分离,但是他们两者确实是同步的!任何对于模型的更改都会即时反映在视图上;任何在视图上的更改都会被立刻体现在模型中。
阅读(358) | 评论(0) | 转发(0) |