简介

MVC是一种使用 MVC（Model View Controller 模型-视图-控制器）设计模式，该模型的理念也被许多框架所吸纳，比如，后端框架(Struts、Spring MVC等)、前端框架(Angular、Backbone等)。在学习angular的过程中，我在网上查找关于angular MVC介绍的文章很少，有些文章也没有很直白地为初学者指明angular MVC到底是啥样貌，因此，今天我们就来谈谈MVC模型在angular的形态。

为了介绍angular MVC模型，我建立一个最简单的例子。该例子的启动展示结果为：

下面我会逐一解释。

view

view指的是视图，在web前端工程中，view往往指的是HTML代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
</head>
<body ng-app="app">

    <div class="col-md-4 col-md-offset-4" ng-controller="InputController">
        模型数据: <input type="text" class="text-primary" ng-model="book.title">
    </div>

    <script src="js/angular.js"></script>
    <script src="js/demo1.js"></script>
</body>
</html>

model

model指的是模型数据，在java后端开发中，我们常常使用java为业务数据单独建模，然而，在前端中，我们也可以为数据建立模型。比如，下面的代码片段。
var book = {
        title: "angular"
    }
我们为书籍建立一个数据模型对象，为了简单，我只为book声明了一个属性。
 

controller

controller指的是控制器，它的作用是控制model与view之间的交互。
angular.module("app", ["InputModule"]);

angular.module("InputModule", [])
.controller("InputController", ["$scope", function ($scope) {
    var book = {
        title: "angular"
    }
    $scope.book = book;
}]);
在此例中，我将模型数据book定义在angular的controller控制器中。要想将模型中的数据传递给视图，angular规定依附在$scope上的数据才能传递给视图。

总结

接下来，我用图来描述一下angular中MVC 的关联。
在全局使用ng-app指令，我就不多介绍了。
1、通过在div中添加属性ng-controller="InputController"，并设置属性值，通过angular解析关联到相关的控制器。
     也只有该div元素及其子元素，才能有权限使用InputController中的$scope对象上的模型数据。
2、ng-model="book.title"，通过angular解析，关联到其所处控制器中的$scope对象。
     根据指令的不同，关联到$scope对象上的方式也不同。
     ng-model指令将$scope对象与view对象的值进行双向绑定，犹如java中将对象的引用传给了view对象。
     ng-bind指令则是将$scope对象与view对象进行单向绑定，犹如java中将对象的副本值传给view对象。
 
 
 
 
 
 

带你初识Angular中MVC模型的更多相关文章

  1. Android中MVC模型（复合模式）

    mvc是model,view,controller的缩写,mvc包括三个部分: 1.模型(model)对象:是应用程序的主体部分,全部的业务逻辑都应该写在该层. 2.视图(view)对象:是应用程序中 ...

  2. angular中的MVC思想

    MVC是一种使用 MVC(Model View Controller 模型-视图-控制器)设计模式,该模型的理念也被许多框架所吸纳.在学习angular的过程中,我在网上查找关于angular MVC ...

  3. angular总结控制器的三种主要职责： 为应用中的模型设置初始状态 通过$scope对象把数据模型或函数行为暴露给视图 监视模型的变化，做出相应的动作

    m1.双向数据绑定: <body> <div ng-app ng-init="user.name='world'"> <h1>使用NG实现双边数 ...

  4. Asp.net Mvc 中的模型绑定

    asp.net mvc中的模型绑定可以在提交http请求的时候,进行数据的映射. 1.没有模型绑定的时候 public ActionResult Example0() { ) { string id ...

  5. Asp.Net MVC在过滤器中使用模型绑定

    废话不多话,直接上代码 1.创建MVC项目,新建一个过滤器类以及使用到的实体类: public class DemoFiltersAttribute : AuthorizeAttribute { pu ...

  6. ORM中choices参数(重要)、MTV于MVC模型、多对多关系三种创建方式

    choices参数(重要) **使用方式

  7. 初识Angular

    一.AngularJs简介 1.AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷.AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识 ...

  8. 扩展 ASP.NET MVC 模型扩展 – ASP.NET MVC 4 系列

           大部分人不能将核心运行时(System.Web 中的类)和 ASP.NET Web Forms 应用程序平台(System.Web.UI 中的类)区分开来.        ASP.NET ...

  9. angular中的MVVM模式

    在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(What ...

随机推荐

  1. lua string 库

    --lua中字符串索引从前往后是1,2,……,从后往前是-1,-2……. --string库中所有的function都不会直接操作字符串,只返回一个结果. ---------------------- ...

  2. keystone之预备知识点

    1.webobwebob是一个用来封装http request和http response的一个库,都封装成实例,方便解析http request和构建http response.最佳教程地址: ht ...

  3. BZOJ 2241: [SDOI2011]打地鼠 暴力

    2241: [SDOI2011]打地鼠 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/pro ...

  4. SICP 习题 (1.14)解题总结

    SICP 习题 1.14要求计算出过程count-change的增长阶.count-change是书中1.2.2节讲解的用于计算零钱找换方案的过程. 要解答习题1.14,首先你需要理解count-ch ...

  5. [React Native] Create a component using ScrollView

    To show a list of unchanging data in React Native you can use the scroll view component. In this les ...

  6. MySQL入门笔记

    MySQL入门笔记 版本选择: 5.x.20 以上版本比较稳定 一．MySQL的三种安装方式: 安装MySQL的方式常见的有三种: ·          rpm包形式 ·          通用二进制 ...

  7. C# 之 AES加密源码

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using Exam.Encr ...

  8. linux中shell编程

    shell编程 1 echo -e 识别\转义符 \a \b \t \n \x十六进制 \0八进制 等等 #!/bin/bash echo -e "hello world" 执行脚 ...

  9. 关于Git远程版本库

    Git作为分布式版本库控制系统,每个人都是本地版本库的主人,可以在本地的版本库中随心所欲的创建分支和里程碑. 当需要多人协作时,问题就出现了: 1.如何避免因为用户把所有的本地分支都推送到了共享版本库 ...

  10. 关于Integer类中parseInt()和valueOf()方法的区别以及int和String类性的转换.以及String类valueOf()方法

    Integer类中的. 关于parseInt()方法的API文档.  返回的是int类型的 关于valueOf()方法的API文档 返回的是Integer类型的. 关于intValue()方法的API ...