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

angular中的MVC思想的更多相关文章

  1. angularJS中的MVC思想?

    mvc 思想: 将应用程序的组成,划分为三个部分:model , controller 和 view ; - 控制器的作用是用来初始化模型用的: - 模型就是用于存储数据的: - 视图是展示数据的: ...

  2. 带你初识Angular中MVC模型

    简介 MVC是一种使用 MVC(Model View Controller 模型-视图-控制器)设计模式,该模型的理念也被许多框架所吸纳,比如,后端框架(Struts.Spring MVC等).前端框 ...

  3. angular源码分析:angular中脏活累活承担者之$parse

    我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$pa ...

  4. angular中的MVVM模式

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

  5. 二十七、EFW框架BS系统开发中的MVC模式探讨

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

  6. Angular 中得 scope 作用域梳理

    $scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 ...

  7. java web mvc思想介绍

    1.首先简介一下什么是MVC思想. 在百度百科里面对MVC的说明,MVC全名是Model View Controller.是模型(model)-视图(view)-控制器(controller)的缩写. ...

  8. MVC思想架构的简单自定义UITableViewCell

         在iOS的开发过程中,架构思想是很重要的一部分,目前的主流应该分为MVC与MVVM两种,在这里不做过多的区分,有兴趣的同学可以看看唐巧大神的一篇文章<被误解的MVC和被神化的MVVM& ...

  9. 简单谈谈js中的MVC

    MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器). 本文将用一个经典的例子todoList来展开(代码在最后). 一个事件发生的过程(通信单向流动): ...

随机推荐

  1. Oracle 19c使用dbca来搭建物理DG

    Using DBCA to Create a Data Guard Standby The Database Configuration Assistant (DBCA) can also be us ...

  2. 《转载》强大全面的C++框架和库推荐!

    C++ 资源大全 关于 C++ 框架.库和资源的一些汇总列表,内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了STL容器,算法和 ...

  3. windows修改PowerShell(命令提示符)默认中文编码方式

    如果以下方法都没有作用的话,可以直接在代码中调用<stdlib.h>中的system("mode con cp select=65001")或者是system(&quo ...

  4. package.json文件配置信息

    1.概述 每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称.版本.许可证等元数据).npm install命令根据这个配置文 ...

  5. HTML中的清除浮动的常用方法(转载)

    以下面的div为例: HTML: <div class="test"> <div class="test1"></div> ...

  6. python 链表表达式 map、filter易读版

    链表推导式 [x for x in x] 链表推导式提供了一个创建链表的简单途径,无需使用 map(), filter() 以及 lambda.返回链表的定义通常要比创建这些链表更清晰.每一个链表推导 ...

  7. 浅析 Hinton 最近提出的 Capsule 计划

    [原文]    浅析 Hinton 最近提出的 Capsule 计划     关于最新的 Hinton 的论文 Dynamic Routing Between Capsules,参见 https:// ...

  8. DOM操作的概念

    ////dom 操作//核心思想:找到元素 操作元素//js 找元素:// document.getElementById(dd); 唯一确定// 返回的都是数组 数组元素是元素对象// docume ...

  9. fiddler 修改

    很多新手学习fiddler抓包的同学们都会对https网站抓包难或者抓不起来的问题无所适从,想寻求解决办法,没问题,这节课就来解决你的疑问! 最典型的网站就是目前的百度网站了,百度在近些年采用了htt ...

  10. js中触摸相关变量touches,targetTouches和changedTouches的区别

    touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前事件的触摸点的列表 通过一个例子来区分一下触摸事件中 ...