• 为什么在前端也需要MVC

1、代码规模越来越大，切分职责是大势所趋

2、为了复用

3、为了后期维护方便

MVC的目的是为了模块化和复用

  • 前端实现MVC的困难

1、操作DOM必须等整个页面加载完

2、多个js如果出现依赖，需要程序员自己解决

3、js的原型继承

  • Controller

需求：有一些功能，在各个控制器中都会用到，怎么办？

 <!DOCTYPE html>

 <html lang="en" ng-app="myApp">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script type="text/javascript" src="../../jslib/angular.min-1.5.8.js"></script>

     <script type="text/javascript" src="demo02.js"></script>

 </head>

 <body>

     <div ng-controller="CommonController">

         <div ng-controller="Controller1">

             <p>{{greet.text}},AngularJs</p>

             <button ng-click="test1()">test1</button>

         </div>

         <div ng-controller="Controller2">

             <p>{{greet.text}},AngularJs</p>

             <button ng-click="test2()">test2</button>

         </div>

         <button ng-click="commonFn()">通用</button>

     </div>

 </body>

 </html>

demo02.html

 /**

  * Created by sherry on 16/8/3.

  */

 var myApp = angular.module("myApp",[]);

 myApp.controller("CommonController",function ($scope) {

     $scope.commonFn = function () {

         alert("这是通用功能");

     }

 });

 myApp.controller("Controller1",function ($scope) {

     $scope.greet = {

         text:"Hello1"

     };

     $scope.test1 = function () {

         alert("test1");

     }

 });

 myApp.controller("Controller2",function ($scope) {

     $scope.greet = {

         text:"Hello2"

     };

     $scope.test2 = function () {

         alert("test2");

     }

 });

demo02.js

对于button，不管其隶属于哪个控制器，只要是在 CommonController 内的，就都能被调用  commonFn 方法就变成了两个“子”控制器的公共方法

如下：

    <div ng-controller="CommonController">

        <div ng-controller="Controller1">

            <p>{{greet.text}},AngularJs</p>

            <button ng-click="test1()">test1</button>

        </div>

        <div ng-controller="Controller2">

            <p>{{greet.text}},AngularJs</p>

            <button ng-click="test2()">test2</button>

            <button ng-click="commonFn()">通用</button>

        </div>

    </div>

但是：AngularJs中并不推荐这么做，AngularJs的最佳实践，是把公共部分抽取成Service，被Controller调用

Controller使用中的注意点：

1、不要试图去复用Controller，一般控制器只负责一小块视图【一般一个Controller负责的是一个业务逻辑，除非业务逻辑切分得足够细，否则不具备复用的可能】

2、不要在Controller中操作DOM，这不是控制器的职责【推荐将DOM操作使用指令来做，Controller中操作DOM的速度是非常低的】

3、不要在Controller里面做数据格式化，AngularJs有很好的表单控件

4、不要在Controller里面做数据过滤操作，AngularJs有$filter服务

5、一般来说，Controller是不会相互调用的，控制器之间的交互通过事件进行

  • Model
<!DOCTYPE html>

<html lang="en" ng-app>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript" src="../../jslib/angular.min-1.5.8.js"></script>

</head>

<body>

    <input type="text" placeholder="输入..." ng-model="name">

    <p>{{name}}</p>

</body>

</html>

通过  ng-model 标签，定义一个数据模型，实现双向绑定

  • View

利用 driective 实现View的复用，就是定义一个指令，设置一个模板

AngularJs中的MVC，是借助$scope（作用域）实现的

  • AngularJs作用域

$rootScope，根作用域，如果属性在当前控制器的$scope中找不到，就会依次向上去寻找，这点很像JavaScript中的原型继承

$scope是一个POJO

$scope提供了一些工具方法 $watch/$apply

$scope是表达式的执行环境

$scope是一个树型结构，与DOM标签平行

子$scope会继承父$scope上的属性和方法

每个AngularJs只有一个根$scope对象（一般位于ng-app上）

$scope可以传播事件，类似DOM事件，可以向上或向下传播

$scope不仅仅是MVC的基础，也是数据双向绑定的基础

使用 angular.element($0).scope() 获取当前$scope进行调试

AngularJs MVC 详解的更多相关文章

  1. MVC详解（转）

    原文链接:MVC详解 MVC与模板概念的理解 MVC(Model View Controller)模型-视图-控制器   MVC本来是存在于Deskt op程序中的,M是指数据模型,V是指用户界面,C ...

  2. Spring MVC 详解之废话少说

    <陈翔六点半之废话少说>.... Spring WEB MVC 的请求流程: Spring WEB MVC架构: 开始创建.配置gradle项目 1.在gralde项目中,选择SDK 和框 ...

  3. AWS MVC 详解

    由于新工作是在AWS PaaS平台上进行开发,为不耽误工作,先整理一下AWS MVS的使用规范,快速上手.对AWS PaaS平台的相关介绍留到以后再来补充.本文几乎是对官方学习文档的整理,有遗漏的后补 ...

  4. angularjs filter 详解

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...

  5. iOS开发——MVC详解&Swift＋OC

    MVC 设计模式 这两天认真研究了一下MVC设计模式,在iOS开发中这个算是重点中的重点了,如果对MVC模式不理解或者说不会用,那么你iOS肯定学不好,或者写不出好的东西,当然本人目前也在学习中,不过 ...

  6. angularjs 指令详解 - template, restrict, replace

    通过指令机制,angularjs 提供了一个强大的扩展系统,我们可以通过自定义指令来扩展自己的指令系统. 怎样定义自己的指令呢? 我们通过 Bootstrap UI来学习吧.这个项目使用 angula ...

  7. Java中MVC详解以及优缺点总结

     概念:  MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务数据.逻辑.界面显示分离的 ...

  8. AngularJS Providers 详解

    供应者(Providers) Each web application you build is composed of objects that collaborate to get stuff d ...

  9. AngularJS开发指南5：AngularJS表达式详解

    AngularJS表达式类似Javascript的代码片段,通常在数据绑定中用到,写在双大括号中,如:{{表达式}}.表达式是用$parse方法来处理的. 下面是一些合法的AngularJS表达式 1 ...

随机推荐

  1. objective C 内存管理及属性方法具体解释

    oc为每一个对象提供一个内部计数器.这个计数器跟踪对象的引用计数,当对象被创建或拷贝时.引用计数为1.每次保持对象时,调用retain接口.引用计数加1.假设不需要这个对象时调用release,引用计 ...

  2. 【洛谷3648】[APIO2014] 序列分割（斜率优化DP）

    点此看题面 大致题意: 你可以对一个序列进行\(k\)次分割,每次得分为两个块元素和的乘积,求总得分的最大值. 区间\(DPor\)斜率优化\(DP\) 这题目第一眼看上去感觉很明显是区间\(DP\) ...

  3. 张量 (tensor) 是什么？

    对于大部分已经熟练的数学和物理工作者, 这实在是一个极为基础的问题. 但这个问题在我刚接触张量时也困扰了我很久. 张量的那么多定义, 究竟哪些是对的? (显然都是对的. ) 它们的关系是什么? 我尽可 ...

  4. Python判断一个数是否为小数

    一.判断一个数是否为小数 1.有且仅有一个小数点 2.小数点的左边可能为正数或负数 3.小数点的右边为正数 二.实现代码 def is_float(str): if str.count('.') == ...

  5. Cobbler自动安装的Linux系统ssh无法进入

    Linux ssh登陆老提示“permission denied,please try again” ,但是iptables已经关掉了 修改/etc/ssh/sshd_config文件.找如下的一句 ...

  6. java基础——类加载与反射

    第1章 类加载器 1.1 类的加载 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载,连接,初始化三步来实现对这个类进行初始化. (1)加载 就是指将class文件读入内存,并为之创 ...

  7. Bootstrap 历练实例 - 折叠（Collapse）插件方法

    方法 下面是一些折叠(Collapse)插件中有用的方法: 方法 描述 实例 Options:.collapse(options) 激活内容为可折叠元素.接受一个可选的 options 对象. $(' ...

  8. JDBC 基本语法总结

    实现JDBC操作: 静态SQL执行 ① 注册驱动 Class.forName("com.mysql.jdbc.Driver"); ② 创建连接 Connection con = D ...

  9. SummerVocation_Learning--java的线程机制

    线程:是一个程序内部的执行路径.普通程序只有main()一条路径.如下列程序: import java.lang.Thread; //导入线程实现包 public class Test_Thread ...

  10. 开发监测keepalived裂脑的脚本

    检测思路:在备节点上执行脚本,如果可以ping通主节点并且备节点有VIP就报警,让人员介入检查是否裂脑. 在LB02备节点上开发脚本并执行: [root@lb02 ~]# cat /server/sc ...