angular中的MVC思想

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

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指的是模型数据,在java后端开发中,我们常常使用java为业务数据单独建模,然而,在前端中,我们也可以为数据建立模型。比如,下面的代码片段。

var book = {        title: "angular"    }

我们为书籍建立一个数据模型对象,为了简单,我只为book声明了一个属性。

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上的数据才能传递给视图。

在全局使用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-05 04:33:42

angular中的MVC思想的相关文章

(转)Android中的MVC思想

http://wenku.baidu.com/view/b7de0085e53a580216fcfecd.html

带你初识Angular中MVC模型

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

angular中的路径问题

我们在写项目时会遇到启动页调到引导页,引导页再调到首页, 那我们在用angular框架写这种东西的时候如果我们不细心的话就会遇到问题, 比如说找不到引导页的图片等等. 那我们怎么解决这个问题呢? 首先我们要明确,我们使用的angular框架所以我们应该使用angular中的框架来解决这个问题, 而不是还是按照原来的思想按部就班的使用路径跳转. 下面我们就来看一下, 1.启动页跳到引导页 app.controller("zeroController",function ($timeout

Angular.js的MVC

Angular.js中实现MVC的方式: 双向绑定: <!DOCTYPE html> <html lang="zh_CN" ng-app> <head> <meta charset="UTF-8"> <title>AngularJs入门</title> <link type="text/css" rel="stylesheet" href="

简单谈谈js中的MVC

MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器). 本文将用一个经典的例子todoList来展开(代码在最后). 一个事件发生的过程(通信单向流动): 1.用户在视图 V 上与应用程序交互 2.控制器 C 触发相应的事件,要求模型 M 改变状态(读写数据) 3.模型 M 将数据发送到视图 V ,更新数据,展现给用户 在js的传统开发模式中,大多基于事件驱动的: 1.hash驱动 2.DOM事件,用来驱动视图 3.模型事件(业务模型事件和数据模型事

细说Qt中的MVC (一)

好久不写博客了,最近写了不少Qt相关的代码,在此总结一下个人对Qt中MVC的一点理解.MVC全称是 Model View Controller,是一种非常非常流行的架构模式,相关MVC具体的,网上已经非常非常详尽了,不赘述了. 关于Qt中的MVC 其实Qt中的MVC并不叫MVC,而是叫“MVD”,Qt中没有Controller的说法,而是使用了另外一种抽象:Delegate (委托),其行为和传统的MVC是相同的.写过C#的同学肯定对delegate就不陌生了,这里delegate的用法就是负责

【UI插件】简单的日历插件(下)—— 学习MVC思想

前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么就应该考虑其它UI库的接入问题 这个意思就是,我们的系统中所有UI插件应该有一些统一行为,我们如果希望统一为所有的插件加一点什么东西,需要有位置可加 这个意味着,可能我们所有的插件需要继承至一个抽象的UI类,并且该类提供了通用的几个事件点 ② 上次做的日历插件虽然说是简单,其耦合还是比较严重的(其实

Angular 中得 scope 作用域梳理

$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图. 有了 $scope 这样一个桥梁,应用的业务代码可以都在 controller 中,而数据都存放在controller 的 $scope 中. $rootScope Angular 应用启动并生成视图时,会将根 ng-app 元

Struts2的MVC思想

 MVC思想概述 MVC思想将一个应用分成三个基本部分:Model(模型).View(视图).Controller(控制器),这三个部分以最少的耦合协同工作,从而提高应用的可扩展性及可维护性. 在经典的MVC模型中,事件由控制器处理,控制器根据事件的类型改变模型或视图,反之亦然.具体地说,每个模型对应一系列的视图列表,这种对应关系通常采用注册来完成,即:把多个视图(View)注册到同一个模型(Model),当模型发生改变时,模型向所有注册过的视图发送通知,接下来,视图从对应的模型中获得信息,