AngularJS学习之MVC模式
AngularJS是谷歌开发维护的前端MVC框架,克服了HTML在构建应用上的不足,从而降低了开发的成本。
在学习AngularJS之前,有必要和之前学过的jQuery进行对比。jQuery是javascript的一个类库(一系列函数的集合),而AngularJS是javascript的一个框架(一系列类库的集合)。还有一点重要的区别是,jQuery是以DOM操作为核心,而AngularJS则是以数据和逻辑为核心,这是它们本质上的区别,类似的框架还有BackBone、KnockoutJS、Vue、React。
AngularJS有着诸多特性,最为核心的是:模块化、双向数据绑定、语义化标签、依赖注入等等,这些我在后面的学习中也会,做相应的记录。
那么在深入学习AngularJS之前,有必要来了解一下MVC模式的概念,以及它在AngularJS中的体现。
什么是MVC?
MVC其实就是一种开发模式,有模型(model)、视图(view)、控制器(controller)3部分构成,采用这种方式为合理组织代码提供了方便,降低了代码间的耦合度,功能结构清晰可见。
- Model:一般用来处理数据,包括读取和设置数据,一般指的是操作数据库。
- View:一般用来展示数据,就是放数据,比如通过HTML来展示。
- Controller:因为一个模块里面可能有多个视图和模型,控制器就起到了连接模型和视图的作用。
下面引用网上的一张图片,清晰的说明了各部分的关系和作用。
在AngularJS中的体现
模块化是AngularJS的重要特性之一,所谓模块化,就是构建应用时,是以模块的方式进行组织的,就类比搭积木。
一、首先定义应用,采用ng-app属性指定一个应用,表示此标签内所包裹的内容都属于APP的一部分。
<html ng-app="App" lang="en">
二、定义模块
AngularJS提供了一个全局对象angular,在此全局对象下提供了很多属性和方法,其中的angular.module()方法用来定义一个模块
//第一参数表示模块的名称,第二个参数表示此模块依赖的其它模块
var app = angular.module('app',[]);
其实应用就是一个很大的模块。
三、定义控制器
控制器作为模型和视图的桥梁,只要我们定义好了控制器,就相当于定义好了模型和视图。
app.controller('StudentController',['$scope',function($scope){
//定义模型,这个$scope对象就相当于用来获取数据的。
$scope.students = [
{name:'周杰伦',sex:'男',age:39}
];
}]);
控制器定义好了,但是要讲模型上的数据展示到视图上,就需要将控制器关联到视图上,通过为HTML标签添加ng-controller属性并赋值相应的控制器名称,就确定了关联关系。
<table ng-controller='StudentController'>
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr ng-repeat="student in students">
<td>{{student.name}}</td>
<td>{{student.sex}}</td>
<td>{{student.age}}</td>
</tr>
</table>
以上就是MVC模式在AngularJS中的体现了。