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中的体现了。