美文网首页
2-1~3 AngularJS特性之:MVC

2-1~3 AngularJS特性之:MVC

作者: p了个f | 来源:发表于2017-03-01 20:48 被阅读36次

内容简介

  • 为什么需要mvc?

  • 前端mvc的困难在哪里?

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


1. 为什么需要mvc

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

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

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

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

2. 前端mvc的困难

enter description hereenter description here
  • 操作DOM的代码必须等待整个页面加载完毕

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

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

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

  • Controller

    • Controller的实现方式一


      enter description hereenter description here

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

    • Controller的实现方式二


      enter description hereenter description here

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

一般的做法如下(错误的

enter description hereenter description here
  • Controller的实现方式三


    enter description hereenter description here

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

Controller使用过程的注意点

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

  • View

利用 Directive实现View复用

enter description hereenter description here

AngularJS的MVC是借助于$scope实现的!!!

4. 神奇的$scope

  • $scope是一个POJO(Plan old JavaScript Object)。

  • $scope提供了一些工具和方法$watch()/$aply()。

  • $scope是表达式的执行环境(或者叫作用域)。

  • $scope是一个树型结构,<span style='color:red'>与DOM标签平行</span>。

  • 子$scope对象会继承父$scope上的 <span style='color:red'>属性和方法</span>。

  • 每一个Angular应用只有一个根$scope对象(一般位于ng-app上)。

  • $scope可以传播事件,类似DOM事件,可以向上也可以向下。

  • $scope不仅是mvc的基础,也是后面实现双向数据绑定的基础。

  • 可以使用angular.element($0).scope()进行调试。

5. $scope的生命周期

enter description hereenter description here

相关文章

  • 2-1~3 AngularJS特性之:MVC

    内容简介 为什么需要mvc? 前端mvc的困难在哪里? AngularJS语境下的mvc是如何实现的? 1. 为什...

  • AngularJS入门案例

    AngularJS入门 ​ AngularJS核心的特性就是:MVC模式、模块化、双向绑定、依赖注入等特性。利...

  • AngularJS学习笔记(一)模块、作用域、双向数据绑定

    AngularJS四大核心特性:MVC、模块化、指令系统、双向数据绑定。 MVC 好处:职责清晰,代码模块化,可复...

  • Angularjs 特性介绍

    Angularjs 有以下几个关键的特性: MVC 数据双向绑定 依赖注入 指令 接下来,将给以上的特性进行简单的...

  • angular中常见问答题

    1、angularjs的几大特性是什么? 双向数据绑定、依赖注入、模板、指令、MVC/MVVM 2、列举几种常见的...

  • angular中常见问答题

    1、angularjs的几大特性是什么? 双向数据绑定、依赖注入、模板、指令、MVC/MVVM 2、列举几种常见的...

  • angularJS几大特性

    angularJS的几大核心特性MVC、模块化Module、指令系统、双向数据绑定。 1、MVCMVC即是Mode...

  • AngularJS使用

    AngularJS实现MVC AngularJS模块化Module AngularJS指令系统 AngularJS...

  • AngularJS学习之数据绑定

    既然AngularJS是以数据作为驱动的MVC框架,在上一篇文章中,也介绍了AngularJS如何实现MVC模式的...

  • 初涉 AngularJS(2)

    Angularjs的四大特性 使用MVC设计模式 双向数据绑定 依赖注入 采用模块化设计 一、控制器的作用域 每次...

网友评论

      本文标题:2-1~3 AngularJS特性之:MVC

      本文链接:https://www.haomeiwen.com/subject/miucgttx.html