带你初识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 ...
随机推荐
- Android事件分发原理
终于用上了word 2013来写博客,感觉真是老好了,以前在网页上写,老是要把网页拖上拖下的,每次都要吐一升老血啊,现在用上本地的word,瞬间感觉好多了.还有感谢为word写插件的这个大神,代码高亮 ...
- 使用纯代码定义UICollectionView和自定义UICollectionViewCell
1.自定义UICollectionView 2.实现<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout,UICollec ...
- struts中的helloword(1)
注:文章中的所有图片均在附件中明白表明 首先要安装jdk1.6以及tomcat6和myeclipse 对于这些配置的安装 这里不再细细说明 其次是下载struts2 第一步:去struts21 ...
- RGB配色表
RGB配色表 查找请按 Ctrl+f 实效 英文名称 RGB 16色 Snow 255 250 250 #FFFAFA GhostWhite 248 248 255 #F8F8FF Whi ...
- Nginx与Tomcat、Client之间请求的长连接配置不一致问题解决[转]
http://bert82503.iteye.com/blog/2152613 前些天,线上出现“服务端长连接与客户端短连接引起Nginx的Writing.Active连接数过高问题”,这个是由于“服 ...
- java.util.Scanner的日常用法
Scanner是新增的一个简易文本扫描器,在 JDK 5.0之前,是没有的.查看最新在线文档: public final class Scanner extends Object implements ...
- 《RESTful Web Services》第四章 设计URI
引言 URI是跨越Web的资源描述符,一个URI由以下内容组成——协议.主机.端口号.路径
- windows7怎么共享文件夹
http://jingyan.baidu.com/article/d45ad148f06fef69552b80e6.html
- Android实现资料收藏
1,调web浏览器 Uri myBlogUri = Uri.parse("http://xxxxx.com"); returnIt = new Intent(Intent.ACTI ...
- python <type 'exceptions.UnicodeDecodeError'>: 'ascii' codec can't decode byte 0xe6 in position 0: ordinal not in range(128)解决
import sysimport osimport stringreload(sys) sys.setdefaultencoding("utf8")