2-1~3 MVC
2-1~3 MVC
内容简介
-
为什么需要mvc?
-
前端mvc的困难在哪里?
-
AngularJS语境下的mvc是如何实现的?
1. 为什么需要mvc
-
代码规模越来越大,切分职责是大势所趋。
-
为了复用:很多逻辑是一模一样的。
-
为了后期维护方便:修改一块功能不影响其它功能。
MVC只是手段,终极目标是模块化和复用
2. 前端mvc的困难

操作DOM的代码必须等待整个页面加载完毕
多个JS文件之间如果出现相互依赖,程序员必须自己解决。
JS原型继承也给前端编程带来了很多困难。
3. AngularJS语境下的mvc是如何实现的
Controller
- Controller的实现方式一
问题 :如果“视图1”和“视图2”根本没有任何逻辑关系,“控制器”的角色就会很尴尬。
- Controller的实现方式二
- Controller的实现方式一
问题:如果“控制器1”和“控制器2”里面有2个方法是一样的怎么办?
一般的做法如下(错误的
)
- Controller的实现方式三
通常把通用的东西抽成一个公用的service,让Controller去调用它而不是继承它。
Controller使用过程的注意点
- 不要试图去复用Controller,一个Controller只负责一小块视图。
- 不要在Controller中操作DOM,这不是控制器的职责。
- 不要在Controller中做数据格式化,ng有很好用的表单控件。
- 不要在Controller中做数据过滤操作,ng有$filter服务。
- 一般Controller是不会相互调用的,控制器之间的交互会通过事件进行。
Model
View
利用 Directive实现View复用

AngularJS的MVC是借助于$scope实现的!!!
4. 神奇的$scope
$scope是一个POJO(Plan old JavaScript Object)。
$scope提供了一些工具和方法$watch()/$aply()。
$scope是表达式的执行环境(或者叫作用域)。
$scope是一个树型结构,与DOM标签平行。
子$scope对象会继承父$scope上的 属性和方法。
每一个Angular应用只有一个根$scope对象(一般位于ng-app上)。
$scope可以传播事件,类似DOM事件,可以向上也可以向下。
$scope不仅是mvc的基础,也是后面实现双向数据绑定的基础。
可以使用angular.element($0).scope()进行调试。
5. $scope的生命周期

2-1~3 MVC的更多相关文章
- Asp.Net Mvc 使用WebUploader 多图片上传
来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...
- .Net Core MVC 网站开发(Ninesky) 2.4、添加栏目与异步方法
在2.3中完成依赖注入后,这次主要实现栏目的添加功能.按照前面思路栏目有三种类型,常规栏目即可以添加子栏目也可以选择是否添加内容,内容又可以分文章或其他类型,所以还要添加一个模块功能.这次主要实现栏目 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- ASP.NET Core MVC/WebAPi 模型绑定探索
前言 相信一直关注我的园友都知道,我写的博文都没有特别枯燥理论性的东西,主要是当每开启一门新的技术之旅时,刚开始就直接去看底层实现原理,第一会感觉索然无味,第二也不明白到底为何要这样做,所以只有当你用 ...
- ASP.NET Core 中文文档 第四章 MVC(3.8)视图中的依赖注入
原文:Dependency injection into views 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:孟帅洋(书缘) ASP.NET Core 支持在视图中使用 依赖 ...
- 开源:Taurus.MVC 框架
为什么要创造Taurus.MVC: 记得被上一家公司忽悠去负责公司电商平台的时候,情况是这样的: 项目原版是外包给第三方的,使用:WebForm+NHibernate,代码不堪入目,Bug无限,经常点 ...
- Taurus.MVC 2.2 开源发布:WebAPI 功能增强(请求跨域及Json转换)
背景: 1:有用户反馈了关于跨域请求的问题. 2:有用户反馈了参数获取的问题. 3:JsonHelper的增强. 在综合上面的条件下,有了2.2版本的更新,也因此写了此文. 开源地址: https:/ ...
- Taurus.MVC 2.0 开源发布:WebAPI开发教程
背景: 有用户反映,Tausus.MVC 能写WebAPI么? 能! 教程呢? 嗯,木有! 好吧,刚好2.0出来,就带上WEBAPI教程了! 开源地址: https://github.com/cyq1 ...
- 使用Visual Studio 2015 开发ASP.NET MVC 5 项目部署到Mono/Jexus
最新的Mono 4.4已经支持运行asp.net mvc5项目,有的同学听了这句话就兴高采烈的拿起Visual Studio 2015创建了一个mvc 5的项目,然后部署到Mono上,浏览下发现一堆错 ...
- .NetCore MVC中的路由(2)在路由中使用约束
p { margin-bottom: 0.25cm; direction: ltr; color: #000000; line-height: 120%; orphans: 2; widows: 2 ...
随机推荐
- 重学DSP:对于卷积的理解
最近,我发现自己对于一个事情,如果不给自己一个说服自己的理由,就会出现不能理解,不能记住,以至于不会使用或者“盲目”应用的情况. 但是,我学的这个学科就是应当建立在对信号作用过程的理解上面的. 下面, ...
- boost replace_if replace_all_regex_copy用法
#include <boost/algorithm/string.hpp> // for is_any_of #include <boost/range/algorithm/repl ...
- Spring Boot配置多个DataSource
使用Spring Boot时,默认情况下,配置DataSource非常容易.Spring Boot会自动为我们配置好一个DataSource. 百牛信息技术bainiu.ltd整理发布于博客园 如果在 ...
- CSS:CSS 合法颜色值
ylbtech-CSS:CSS 合法颜色值 1.返回顶部 1. CSS 颜色 可以用以下方法来规定 CSS 中的颜色: 十六进制色 RGB 颜色 RGBA 颜色 HSL 颜色 HSLA 颜色 预定义/ ...
- 什么是weex
Weex是一个使用web开发体验来开发高性能原生应用的框架 在集成WeexSDK之后,你可以使用javaScript和现代流行的前端框架来开发移动应用. Weex的结构是解耦的,渲染引擎与语法层是分开 ...
- PICO 中关于时基ps3000aGetTimebase函数介绍
- hdu-2141
Can you find it? Time Limit: 10000/3000 MS (Java/Others) Memory Limit: 32768/10000 K (Java/Others ...
- C++STL 求和:accumulate 【转】
该算法在numeric头文件中定义. accumulate()的原型为(文件取自DEV-C++编译器): template<typename _InputIterator, typename _ ...
- 4.1-4.2 基于HDFS云盘存储系统分析及hadoop发行版本
一.基于HDFS云盘存储系统 如:某度网盘 优点: *普通的商用机器 内存 磁盘 *数据的安全性 操作: *put get *rm mv *java api *filesystem 核心: *H ...
- 接口开发之PHP创建XML文件
用PHP的DOM控件来创建输出 输出的格式为XML 接口开发的相关文件及说明 <?php header("Content-type: text/xml");//头文件非常重要 ...