带你初识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设计模式系列--原型模式
CV一族,应该很容易理解原型模式的原理,复制,粘贴完后看具体情况是否修改,其实这就是原型模式.从java的角度看,一般使用原型模式有个明显的特点,就是实现cloneable的clone()方法.原型模 ...
- cocos2d-x 动画特效集合
转自:http://www.cnblogs.com/linux-ios/archive/2013/04/09/3009292.html 备用 bool HelloWorld::init() { /// ...
- Nape的回调系统 nape.callbacks
在Nape中增加一个回调大致分为三步 1:定义一些标签,并根据需求为不同的Interactor打上不同的标签 2:定义一个监听器,这个监听器定义了哪些标签触发了哪种行为之后做何种回调 3:为Space ...
- 为什么我刚发表的文章变成了“待审核”，csdn有没有官方解释啊
为什么我刚发表的文章变成了"待审核",csdn有没有官方解释啊,什么样的文章才会变为待审核呢? 并且从草稿箱和回收站里也看不到我的文章了,希望我的文章没有删掉. 文章的字是一个个打 ...
- Nginx动静分离经典
Nginx:安装nginx之前需要安装pcre包和zlib以支持重写,正则以及网页压缩等等]把所需的包下载到/usr/src下[根据自己的习惯,路径可以改变]1.首先安装pcre: cd /usr/s ...
- yum -------包安装库
elrepo: http://elrepo.org/tiki/tiki-index.php CentOSPlus: http://wiki.centos.org/zh/AdditionalR ...
- MySQL 性能监控 4 大指标
[编者按]本文作者为 John Matson,主要介绍 mysql 性能监控应该关注的 4 大指标. 文章系国内 ITOM 管理平台 OneAPM 编译呈现. MySQL 是什么? MySQL ...
- C#_delegate - 值参数和引用参数
值参数不能加,引用参数可以. 引用参数是共享的 using System; using System.Collections.Generic; using System.Linq; using Sys ...
- How to Analyze Java Thread Dumps--reference
原文地址:http://architects.dzone.com/articles/how-analyze-java-thread-dumps The Performance Zone is pres ...
- Java基础知识强化之网络编程笔记14：TCP之多个客户端上传到一个服务器的思考（多线程改进）
1. 多个客户端上传到一个服务器的思考 通过while循环可以改进一个服务器接收多个客户端. 但是这个是有问题的.如果是这种情况,假设我还有张三,李四,王五这三个人分别执行客户端 张三:好好学习.a ...