2-1~3 MVC

内容简介

  • 为什么需要mvc?

  • 前端mvc的困难在哪里?

  • AngularJS语境下的mvc是如何实现的?


1. 为什么需要mvc

  • 代码规模越来越大,切分职责是大势所趋。

  • 为了复用:很多逻辑是一模一样的。

  • 为了后期维护方便:修改一块功能不影响其它功能。

MVC只是手段,终极目标是模块化和复用

2. 前端mvc的困难

1487141651282.jpg
  • 操作DOM的代码必须等待整个页面加载完毕

  • 多个JS文件之间如果出现相互依赖,程序员必须自己解决。

  • JS原型继承也给前端编程带来了很多困难。

3. AngularJS语境下的mvc是如何实现的

  • Controller

    • Controller的实现方式一

    问题 :如果“视图1”和“视图2”根本没有任何逻辑关系,“控制器”的角色就会很尴尬。

    • Controller的实现方式二

问题:如果“控制器1”和“控制器2”里面有2个方法是一样的怎么办?

一般的做法如下(错误的

  • Controller的实现方式三

通常把通用的东西抽成一个公用的service,让Controller去调用它而不是继承它。

Controller使用过程的注意点

  • 不要试图去复用Controller,一个Controller只负责一小块视图。
  • 不要在Controller中操作DOM,这不是控制器的职责。
  • 不要在Controller中做数据格式化,ng有很好用的表单控件。
  • 不要在Controller中做数据过滤操作,ng有$filter服务。
  • 一般Controller是不会相互调用的,控制器之间的交互会通过事件进行。
  • Model

  • View

利用 Directive实现View复用

1487144166528.jpg

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的生命周期

1487146227181.jpg

2-1~3 MVC的更多相关文章

  1. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  2. .Net Core MVC 网站开发(Ninesky) 2.4、添加栏目与异步方法

    在2.3中完成依赖注入后,这次主要实现栏目的添加功能.按照前面思路栏目有三种类型,常规栏目即可以添加子栏目也可以选择是否添加内容,内容又可以分文章或其他类型,所以还要添加一个模块功能.这次主要实现栏目 ...

  3. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  4. ASP.NET Core MVC/WebAPi 模型绑定探索

    前言 相信一直关注我的园友都知道,我写的博文都没有特别枯燥理论性的东西,主要是当每开启一门新的技术之旅时,刚开始就直接去看底层实现原理,第一会感觉索然无味,第二也不明白到底为何要这样做,所以只有当你用 ...

  5. ASP.NET Core 中文文档 第四章 MVC(3.8)视图中的依赖注入

    原文:Dependency injection into views 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:孟帅洋(书缘) ASP.NET Core 支持在视图中使用 依赖 ...

  6. 开源:Taurus.MVC 框架

    为什么要创造Taurus.MVC: 记得被上一家公司忽悠去负责公司电商平台的时候,情况是这样的: 项目原版是外包给第三方的,使用:WebForm+NHibernate,代码不堪入目,Bug无限,经常点 ...

  7. Taurus.MVC 2.2 开源发布:WebAPI 功能增强(请求跨域及Json转换)

    背景: 1:有用户反馈了关于跨域请求的问题. 2:有用户反馈了参数获取的问题. 3:JsonHelper的增强. 在综合上面的条件下,有了2.2版本的更新,也因此写了此文. 开源地址: https:/ ...

  8. Taurus.MVC 2.0 开源发布:WebAPI开发教程

    背景: 有用户反映,Tausus.MVC 能写WebAPI么? 能! 教程呢? 嗯,木有! 好吧,刚好2.0出来,就带上WEBAPI教程了! 开源地址: https://github.com/cyq1 ...

  9. 使用Visual Studio 2015 开发ASP.NET MVC 5 项目部署到Mono/Jexus

    最新的Mono 4.4已经支持运行asp.net mvc5项目,有的同学听了这句话就兴高采烈的拿起Visual Studio 2015创建了一个mvc 5的项目,然后部署到Mono上,浏览下发现一堆错 ...

  10. .NetCore MVC中的路由(2)在路由中使用约束

    p { margin-bottom: 0.25cm; direction: ltr; color: #000000; line-height: 120%; orphans: 2; widows: 2 ...

随机推荐

  1. 重学DSP:对于卷积的理解

    最近,我发现自己对于一个事情,如果不给自己一个说服自己的理由,就会出现不能理解,不能记住,以至于不会使用或者“盲目”应用的情况. 但是,我学的这个学科就是应当建立在对信号作用过程的理解上面的. 下面, ...

  2. boost replace_if replace_all_regex_copy用法

    #include <boost/algorithm/string.hpp> // for is_any_of #include <boost/range/algorithm/repl ...

  3. Spring Boot配置多个DataSource

    使用Spring Boot时,默认情况下,配置DataSource非常容易.Spring Boot会自动为我们配置好一个DataSource. 百牛信息技术bainiu.ltd整理发布于博客园 如果在 ...

  4. CSS:CSS 合法颜色值

    ylbtech-CSS:CSS 合法颜色值 1.返回顶部 1. CSS 颜色 可以用以下方法来规定 CSS 中的颜色: 十六进制色 RGB 颜色 RGBA 颜色 HSL 颜色 HSLA 颜色 预定义/ ...

  5. 什么是weex

    Weex是一个使用web开发体验来开发高性能原生应用的框架 在集成WeexSDK之后,你可以使用javaScript和现代流行的前端框架来开发移动应用. Weex的结构是解耦的,渲染引擎与语法层是分开 ...

  6. PICO 中关于时基ps3000aGetTimebase函数介绍

  7. hdu-2141

    Can you find it? Time Limit: 10000/3000 MS (Java/Others)    Memory Limit: 32768/10000 K (Java/Others ...

  8. C++STL 求和:accumulate 【转】

    该算法在numeric头文件中定义. accumulate()的原型为(文件取自DEV-C++编译器): template<typename _InputIterator, typename _ ...

  9. 4.1-4.2 基于HDFS云盘存储系统分析及hadoop发行版本

    一.基于HDFS云盘存储系统 如:某度网盘 优点: *普通的商用机器 内存 磁盘 *数据的安全性 操作: *put   get *rm  mv *java api *filesystem 核心: *H ...

  10. 接口开发之PHP创建XML文件

    用PHP的DOM控件来创建输出 输出的格式为XML 接口开发的相关文件及说明 <?php header("Content-type: text/xml");//头文件非常重要 ...