带你初识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
var book = {
title: "angular"
}
controller
angular.module("app", ["InputModule"]);
angular.module("InputModule", [])
.controller("InputController", ["$scope", function ($scope) {
var book = {
title: "angular"
}
$scope.book = book;
}]);
总结
带你初识Angular中MVC模型的更多相关文章
- Android中MVC模型（复合模式）
mvc是model,view,controller的缩写,mvc包括三个部分: 1.模型(model)对象:是应用程序的主体部分,全部的业务逻辑都应该写在该层. 2.视图(view)对象:是应用程序中 ...
- angular中的MVC思想
MVC是一种使用 MVC(Model View Controller 模型-视图-控制器)设计模式,该模型的理念也被许多框架所吸纳.在学习angular的过程中,我在网上查找关于angular MVC ...
- angular总结控制器的三种主要职责： 为应用中的模型设置初始状态 通过$scope对象把数据模型或函数行为暴露给视图 监视模型的变化，做出相应的动作
m1.双向数据绑定: <body> <div ng-app ng-init="user.name='world'"> <h1>使用NG实现双边数 ...
- Asp.net Mvc 中的模型绑定
asp.net mvc中的模型绑定可以在提交http请求的时候,进行数据的映射. 1.没有模型绑定的时候 public ActionResult Example0() { ) { string id ...
- Asp.Net MVC在过滤器中使用模型绑定
废话不多话,直接上代码 1.创建MVC项目,新建一个过滤器类以及使用到的实体类: public class DemoFiltersAttribute : AuthorizeAttribute { pu ...
- ORM中choices参数(重要)、MTV于MVC模型、多对多关系三种创建方式
choices参数(重要) **使用方式
- 初识Angular
一.AngularJs简介 1.AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷.AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识 ...
- 扩展 ASP.NET MVC 模型扩展 – ASP.NET MVC 4 系列
大部分人不能将核心运行时(System.Web 中的类)和 ASP.NET Web Forms 应用程序平台(System.Web.UI 中的类)区分开来. ASP.NET ...
- angular中的MVVM模式
在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(What ...
随机推荐
- 提高你的Java代码质量吧：少用静态导入
一.分析 从Java 5开始引入静态导入语法(import static),其目的是为了减少字符输入量,提高代码的可阅读性,以便更好地理解程序. 但是,滥用静态导入会使程序更难阅读,更难维护.静态导 ...
- android飞机游戏敌机移动路径
基础android的飞机类游戏,与前人一样,由surfaceView绘制游戏画面,另起线程控制绘制时间间隔达到动态效果.这里附上最近自己写的敌机自动飞行路径代码.请大家给点意见. 在敌机管理模块,加入 ...
- DataGridView单元格显示GIF图片
本文转载:http://home.cnblogs.com/group/topic/40730.html DataGridView单元格显示GIF图片 gifanimationindatagrid.ra ...
- metasploit(MSF)终端命令大全
show exploits 列出metasploit框架中的所有渗透攻击模块. show payloads 列出metasploit框架中的所有攻击载荷. show auxiliary 列 ...
- 【24】若所有参数皆需类型转换，请为此采用non-members函数
1.令class支持隐式类型转换,往往是个糟糕的主意.但有些情况是合理的,比如数值类型.考虑,有理数Rational有分子,分母两个字段,缺省参数值为0,1.Ration a = 2;我们期望构造一个 ...
- error when loading the sdk 发现了元素 d:skin 开头无效内容
把devices.xml这个文件删除,再把sdk里面tools\lib下的这个文件复制到你删除的那个目录里.重新启动eclipse
- LVS DR模型
1,环境 VMWare10, CentOS6.3 2,LVS DR网络规划 所有机器都只需要一张网卡,给Director的eth0网卡起个别名eth0:1即VIP的值:给RealServer的lo网卡 ...
- iOS开发——面试笔试精华（四）
面试笔试精华(四) 1. Object-C有多继承吗?没有的话用什么代替? 1> OC是单继承,没有多继承 2> 有时可以用分类和协议来代替多继承 2. ...
- Linux lsof命令使用小结
lsof(list open files)是一个列出当前系统打开文件的工具.在Linux环境下,任何事物都是以文件的形式存在,通过文件不仅可以访问常规数据,还可以访问网络连接和硬件.所以,如传 ...
- linux文件 编辑常用 inux手把手vi ---针对文件操作
命令语法 说明 使用频率(1:常用;2一般:3:偶尔) 1.VI编辑器的启动与退出 VI编辑器的启动与退出 vi file1 新建一个文本文件名为file1 :q 退出,如果对缓存去进行过修改,则提 ...