MVVM:

angular的MVVM实现的是双向数据绑定，模型从服务器端抓取到数据，将数据通过控制器（controller）传递到视图（view）显示，视图数据发生变化时同样也会影响到模型数据的变化，这既是双向数据绑定。

$scope便是视图模型，controller的作用便是view与model之间的桥梁（纽带）。

基本模式分析：

  <!DOCTYPE html>

 <html lang="en">

 <head>

    <meta charset="UTF-8">

     <title>test</title>

  </head>

  <body ng-app="app">　　　　<!-- angular模块 -->

  <p ng-controller="myCtr">{{msg}}</p>   <!-- angular控制器 -->

  </div>

  <script src="angular.min.js"></script>

  <script>

  var m = angular.module("app", []);                  //加载angular模块，[]表示有其他模块需要加载时才会用到

  m.controller("myCtr", ["$scope", function($scope){  //定义控制器   推荐使用这种写法,缩后不易出现问题

     $scope.msg="lol";

  }]);

  </script>

  </body>

  </html>

注意上述代码，每一句都有加分号，是因为在代码通过gulp压缩后，代码会连在一起，若不加分号，压缩后就无法正常运行了

对比下面的写法：

 var m = angular.module("app", []); //加载angular模块，[]表示有其他模块需要加载时才会用到

  m.controller("myCtr", function($scope){ //定义控制器  不建议使用这种写法

     $scope.msg="lol";

  });

这种写法是比较精简，但是代码压缩后，形式参数$scope会变成单个字母，如"a"等，这样代码就不能正常运行了，而上面的第一种写法，可以正常运行，所以建议写成第一种

 angular.module("app", []).controller("myCtr",["$scope", function(a){a.msg="lol";}]); //可以正常运行

 angular.module("app", []).controller("myCtr", function(a){a.msg="lol"; });            //不能正常运行

所以综上所诉，代码书写注意规范且加 “;”,这样代码在压缩后就不会出现问题了。

Angular双向数据绑定MVVM以及基本模式分析的更多相关文章

  1. 第217天：深入理解Angular双向数据绑定的原理

    一.理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理.angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成. 那么什么是双向绑定,下面 ...

  2. 实现双向数据绑定mvvm

    实现双向数据绑定mvvm  

  3. 自己手动实现简单的双向数据绑定 mvvm

    数据绑定 数据绑定一般就是指的 将数据 展示到 视图上.目前前端的框架都是使用的mvvm模式实现双绑的.大体上有以下几种方式: 发布订阅 ng的脏检查 数据劫持 vue的话采用的是数据劫持和发布订阅相 ...

  4. angular 双向数据绑定与vue数据的双向数据绑定

    二者都是 MVVM 模式开发的典型代表 angular 是通过脏检测实现,angular 会将 UI 事件,请求事件,settimeout 这类延迟的对象放入到事件监测的脏队列,当数据变化的时候,触发 ...

  5. Angular 双向数据绑定

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...

  6. angular双向数据绑定

    <body ng-app> //三个view都会变 <input type="text" ng-model="name" value=&quo ...

  7. 简单实现双向数据绑定mvvm。

  8. vue 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点

    <template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...

  9. Vue 及双向数据绑定 Vue事件 以及Vue中的ref获取dom节点

    <template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...

随机推荐

  1. CSS3-06 样式 5

    浮动(Float) 关于浮动,要说的可能就是:一个设置了浮动的元素会尽量向左移动或向右移动,且会对其后的元素造成影响,其后的元素会排列在其围绕在其左下或右下部.似乎就这么简单,但是在实际开发中,它应用 ...

  2. AIDL使用解析

    简书本文地址:点击跳转到简书查看 之前面试的时候被问到这个问题,然而当时只有一个大致的印象,随GG,于是我就重新整理的一下.这里大力推荐<Android开发艺术探索>这本书,写的太好了! ...

  3. HDFS --访问

    Hdfs的访问方式有两种,第一:类似linux命令,hadoop shell.第二:java API方式. 先看第一种. FS Shell cat chgrp chmod chown copyFrom ...

  4. 125个工具与技术(PMBOK2008)

    名称 定义 适用场景 适用过程 专家判断 对某方面擅长的人就是专家,找专家协助就是专家判断,专家可能是顾问.干系人.PMO.团队成员 制定项目章程.制定项目管理计划.指导与管理项目执行.监控项目工作. ...

  5. 不能在DropDownList 中选择多个项

    在绑定DropDownList时如果出现多次绑定,会出错以下错误: “不能在DropDownList 中选择多个项” 经了解,只需要在选中值是清空选择即可:xxDropDownList.ClearSe ...

  6. Linux备份ifcfg-eth0文件导致的网络故障问题

    今天在给一台操作系统为Oracle Linux Server release 5.7的服务器配置网络时,遇到了备份ifcfg-eth0配置文件,导致网卡无法绑定IP地址的情况.觉得是个有意思的案例,特 ...

  7. CSS white-space 属性

    实例 规定段落中的文本不进行换行: p { white-space: nowrap } nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止.

  8. LCA 倍增||树链剖分

    方法1:倍增 1498ms #include <iostream> #include <cstdio> #include <algorithm> #include ...

  9. ThreadLocal

    package cn.happy.util; import org.hibernate.Session;import org.hibernate.SessionFactory;import org.h ...

  10. 分页ajax+springmvc的简单实现

    页面部分源码: <li class="paginItem"><a href="javascript:getNewsList(2);">2 ...