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

AngularJS学习之MVC模式的更多相关文章

  1. AngularJS中的MVC模式

    MVC根据逻辑关系,把前端项目的代码分为三个层次 model:模型,就是业务数据,前端项目中就是JS变量. view:视图,就是业务数据在用户面前的展现,前端项目中就是HTML. controller ...

  2. iOS学习之MVC模式

    Modal 模型对象: 模型对象封装了应用程序的数据,并定义操控和处理该数据的逻辑和运算.例如,模型对象可能是表示商品数据 list.用户在视图层中所进行的创建或修改数据的操作,通过控制器对象传达出去 ...

  3. 二十八、带给我们一种新的编码思路——EFW框架CS系统开发中的MVC模式探讨

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://p ...

  4. Extjs MVC模式开发,循序渐进(一)

    本文讲述extjs mvc的Helloworld,tabPanel,event,页面布局layout等内容. 本页包含:MVC模式案例(一)~MVC模式案例(六),从搭建extjs mvc到点击按钮生 ...

  5. AngularJS学习之数据绑定

    既然AngularJS是以数据作为驱动的MVC框架,在上一篇文章中,也介绍了AngularJS如何实现MVC模式的,所有模型里面的数据,都必须经过控制器,才能展示到视图中. 什么是数据绑定 首先来回忆 ...

  6. AngularJS学习笔记(1)——MVC模式的清单列表效果

    MVC模式的清单列表效果 使用WebStorm新建todo.html并链入bootstrap.css.bootstrap-theme.css.angular.js.要链入的相关css和js文件预先准备 ...

  7. ABP 教程文档 1-1 手把手引进门之 AngularJs, ASP.NET MVC, Web API 和 EntityFramework(官方教程翻译版 版本3.2.5)含学习资料

    本文是ABP官方文档翻译版,翻译基于 3.2.5 版本 转载请注明出处:http://www.cnblogs.com/yabu007/  谢谢 官方文档分四部分 一. 教程文档 二.ABP 框架 三. ...

  8. ASP.Net MVC开发基础学习笔记:一、走向MVC模式

    一.ASP.Net的两种开发模式 1.1 ASP.Net WebForm的开发模式 (1)处理流程 在传统的WebForm模式下,我们请求一个例如http://www.aspnetmvc.com/bl ...

  9. ASP.Net MVC开发基础学习笔记(1):走向MVC模式

    一.ASP.Net的两种开发模式 1.1 ASP.Net WebForm的开发模式 (1)处理流程 在传统的WebForm模式下,我们请求一个例如http://www.aspnetmvc.com/bl ...

随机推荐

  1. react-router里使用history

    import React, { Component } from 'react';import {Router, Route, Switch} from 'react-router-dom';impo ...

  2. #leetcode刷题之路25- k个一组翻转链表

    给出一个链表,每 k 个节点一组进行翻转,并返回翻转后的链表.k 是一个正整数,它的值小于或等于链表的长度.如果节点总数不是 k 的整数倍,那么将最后剩余节点保持原有顺序. 示例 :给定这个链表:1- ...

  3. 【Java项目】GUI图形用户界面(不断更新中!)

    <目录> 1 创建一个简单的窗体 2 如何进行事件监听 (1) 按钮监听 (2) 键盘监听 (3) 鼠标监听 3 容器 (1) 创建一个简单的对话框 (2) 创建一个简单的模态对话框 (3 ...

  4. python实现用户登录问候

    创建一个至少包含 5个用户名的列表,且其中一个用户名为 'admin' .想象你要编写代码,在每位用户登录网站后都打印一条问候消息.遍历用户名列表,并向每位用户打印一条问候消息.添加一条 if 语句, ...

  5. C# 删除指定目录下的所有文件及文件夹

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...

  6. JQuery 同时获取多个标签的指定内容并储存为数组

    在网页开发中经常会碰到获取同种类型的 标签 的值得问题,比如下面的两种情况. 当需要批量获取同种标签的指定值时,新人就会碰上一点小麻烦. 比如 id=problem1的demo var list1=$ ...

  7. Java实例 Part6:Java中的克隆

    目录 Part6:Java中的克隆 Example01:Java对象的假克隆 Example02:Java对象的浅克隆 Example03:Java对象的深克隆 Example04:序列化与对象克隆 ...

  8. python的___setattr__魔方方法

     ___setattr__魔方方法一定要注意防止无限递归当在此方法内部给属性赋值的时候,那会调用此方法,又会重新赋值,无限重复最后要归于super是种解决方法.或者用dict方法.   class R ...

  9. MongoDB固定集合(capped collection)

    一 . 什么是固定集合 MongoDB中有一种特殊类型的集合,值得我们特别留意,那就是固定集合(capped collection). 固定集合可以声明collection的容量大小,其行为类似于循环 ...

  10. Altium Designer (AD) 中规则的部分讲解

    当创建好PCB时,选择 Design - Rules 即可进行规则的设置,也可以直接利用快捷键D-R(多利用快捷键,可以有效的提高设计效率,) 这个是规则的总界面,熟练以后可以直接从这里进行修改,很便 ...