带你初识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 ...
随机推荐
- spring源码解析(一)---占位符解析替换
一.结构类图 ①.PropertyResolver : Environment的顶层接口,主要提供属性检索和解析带占位符的文本.bean.xml配置中的所有占位符例如${}都由它解析 ②.Config ...
- cocos2d-x Sprite
转自:http://codingnow.cn/cocos2d-x/795.html 精灵是游戏中十分重要的组成部分,随处可见,如:游戏背景.NPC.人物.道具等.在cocos2d-x引擎中,只要是用图 ...
- Cocos2dx 小技巧（十一） 小人虽短，但能够旋转
转眼五一就到了,放假三天应该做些什么呢?窝在家里钻研技术?写博客?no no no no,这样的"伤害"自己的方式实在让我无法忍受.本来和大学那伙人越好了一起去哪里玩玩,喝酒聊天啥 ...
- eclipse代码提示框背景色改动
因为个人习惯,喜欢把eclipse的文本编辑框背景调成全黑色,可是代码提示框的默认背景色也是黑色.所以两者就冲突了.导致看不到代码提示框的内容. 后来发现代码提示框的背景色能够改动.改动内容例如以下: ...
- istringstream
编写程序,将来自一个文件中的行保存在一个vector<string>中,然后使用一个istringstream从vector读取数据成员,每次读取一个单词 #include <ios ...
- mysql事务回滚
首先条件是表要设置为 InnoDB 类型. 当在一个库连接中,通过调用另一个 库名称.表名称,可以回滚: 当用USE dbName后,在两个或多个库操作时,一次只能回滚一个库中的东西: 当在多个数据 ...
- 如何在mac上創建txt文档
文件編輯(Mac下的記事本),shift + command + T 進入純文字編輯模式!
- ERROR:_OBJC_CLASS_$_ADBannerView
http://stackoverflow.com/questions/4127489/iads-integration-with-cocos2d You are getting that error ...
- View绘制详解，从LayoutInflater谈起
自定义View算是Android开发中的重中之重了,很多小伙伴可能或多或少都玩过自定义View,对View的绘制流程也有一定的理解.那么现在我想通过几篇博客来详细介绍View的绘制流程,以便使我们更加 ...
- Java基础知识强化之网络编程笔记22：Android网络通信之 Android常用OAuth登录（获取个人信息）
1. 获取百度个人信息(使用Gson解析): 2. 代码案例: (1)工程一览图,如下: (2)activity_main.xml: <LinearLayout xmlns:android=&q ...