带你初识Angular中MVC模型

简介

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对象。

时间: 2024-10-23 03:24:46

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

Android中MVC模型(复合模式)

mvc是model,view,controller的缩写,mvc包括三个部分: 1.模型(model)对象:是应用程序的主体部分,全部的业务逻辑都应该写在该层. 2.视图(view)对象:是应用程序中负责生成用户界面的部分.也是在整个mvc架构中用户唯一能够看到的一层,接收用户的输入,显示处理结果. 3.控制器(control)对象:是依据用户的输入,控制用户界面数据显示及更新model对象状态的部分,控制器更重要的一种导航功能,想用用户出发的相关事件,交给m处理. android鼓舞弱耦合和组

angular中的MVC思想

MVC是一种使用 MVC(Model View Controller 模型-视图-控制器)设计模式,该模型的理念也被许多框架所吸纳.在学习angular的过程中,我在网上查找关于angular MVC介绍的文章很少,有些文章也没有很直白地为初学者指明angular MVC到底是啥样貌,因此,今天我们就来谈谈MVC模型在angular的形态. view指的是视图,在web前端工程中,view往往指的是HTML代码. <!DOCTYPE html><html lang="en&qu

理解ASP.NET中MVC 编程模型 第5章 引用参考

类 类 说明 AcceptVerbsAttribute 表示一个特性,该特性指定操作方法将响应的 HTTP 谓词. ActionDescriptor 提供有关操作方法的信息,如操作方法的名称.控制器.参数.特性和筛选器. ActionExecutedContext 提供 ActionFilterAttribute 类的 ActionExecuted 方法的上下文. ActionExecutingContext 提供 ActionFilterAttribute 类的 ActionExecuting

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

废话不多话,直接上代码 1.创建MVC项目,新建一个过滤器类以及使用到的实体类: 1 public class DemoFiltersAttribute : AuthorizeAttribute 2 { 3 public override void OnAuthorization(AuthorizationContext filterContext) 4 { 5 var person = new Person(); 6 //过滤器中使用模型绑定 7 BindModel<Person>(filt

理解ASP.NET中MVC 编程模型 上

MVC 编程模型 MVC 是 ASP.NET 开发模型之一. MVC 是用于构建 web 应用程序的一种框架,使用 MVC (Model View Controller) 设计: Model(模型)表示应用程序核心(比如数据库记录列表) View(视图)对数据(数据库记录)进行显示 Controller(控制器)处理输入(写入数据库记录) MVC 模型同时提供对 HTML.CSS 以及 JavaScript 的完整控制. MVC 模型通过三个逻辑层来定义 web 应用程序: business l

理解ASP.NET中MVC 编程模型 第3章 数据模型

MVC 模型 MVC 模型包含所有应用程序逻辑(业务逻辑.验证逻辑.数据访问逻辑),除了纯视图和控制器逻辑.通过 MVC,模型可保存并操作应用程序数据. Models 文件夹 Models 文件夹包含表示应用程序模型的类. 以登录验证为例,创建一个 AccountModels.cs 文件,用于应用程序安全的模型. AccountModels 包含 LogOnModel.ChangePasswordModel 以及 RegisterModel. LogOnModel: public class L

Notifications:关于MVC模型中的&#39;radio station&#39;

转载请注明来源,谢谢——by Guava Notification 既iOS中的“通知”(广播站)机制可以用来监听系统.模型的变化. 接收端: 通过 [NSNotificationCenter defaultCenter] 获得一个共享实例,就用这个对象来接收广播. 收听广播的方法是,向对象发送消息: - (void)addObserver:(id)observer // you (the object to get notified) 收听广播的对象,对一般的controller来说是self

JAVA Web中的MVC模型

在学习完servlet之后,老师讲解了一个MVC模型,将我们练习的项目进行升级,之前我们的代码全是在jsp里面写的,也就是说网页里的有大量的java代码.在写页面的逻辑的时候很方便,在网页里直接写,写完下面就能用,但是里面的逻辑处理太多,这就是一个大问题,任何人都可更改源码使结果发生改变,这样设计出来的网页没有任何安全性而言. 升级后的项目采用的是最普通的MVC模型,即一个请求一个servlet,但是这样重复代码太多,开发效率大大降低,在这个基础之上,老师讲了一个MVC模型,将servlet当作

Django框架进阶5 models常用字段及参数, choices参数, 自动显示sql命令配置, orm查询优化相关, orm中的事务操作, MTV与MVC模型, 图书管理系统(图书的增删改查)

models中的常用字段 AutoField(primary_key=True) 主键   (int自增列,必须填入参数 primary_key=True.当model中如果没有自增列,则自动会创建一个列名为id的列.) CharField(max_length=32)     varchar(32) IntegerField()       int BigIntergerField()           bigint DecimalField()    decimal EmailField(