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. OC load与initialize

    OC load与initialize load 当类被引用进程序的时候会执行这个函数 一个类的load方法不用写明[super load],父类就会收到调用,并且在子类之前. Category的loa ...

  2. Android—判断当前时间段

    思路:获取当前时间相对于当天的分钟数,然后按照时间顺序依次与时间段后面的时间(转化为分钟数)比较(如8:00-9:00,跟9:00比较). 部分代码: 当前时间 Calendar calendar = ...

  3. Linux 克隆虚拟机引起的“Device eth0 does not seem to be present, delaying initialization”

    虚拟机Vmware上克隆了一个Red Hat Enterprise Linx启动时发现找不到网卡,如下所示,如果你在命令窗口启动网络服务就会遇到"Device eth0 does not s ...

  4. 利用 filter 机制 给 静态资源 url 加上时间戳，来防止js和css文件的缓存，利于开发调试

    直接上代码: public class WeiXinFilter implements Filter{ private static Logger logger = LoggerFactory.get ...

  5. mysql 安装问题

    针对免安装版的mysql: 1.启动CMD,在mysql安装目录下  ~\bin\目录下,输入: mysqld -install   安装msyql服务: 2.启动MySQL服务,输入: net st ...

  6. C#按位操作，直接操作INT数据类型的某一位

    /// <summary> /// 根据Int类型的值,返回用1或0(对应True或Flase)填充的数组 /// <remarks>从右侧开始向左索引(0~31)</r ...

  7. spring项目部署到resin4中的无法注入问题

    碰到个奇葩事啊,一个spring的项目拿到客户现场部署到resin4中,启动后各种报无法注入bean,找不到bean的问题.出现大量下图的错误: nested exception is org.spr ...

  8. 不懂前端的程序员不是好美工——UI框架metronic使用教程——程序员视角

    本着不懂前端的程序员不是好美工的观点,所以作为一个仅懂一点前端的程序员,为了成为一个好美工,所以只能用些取巧的方法伪装一下. metronic一个基于bootstrap的响应式的后台管理平台的UI框架 ...

  9. ZBrush中该如何调节多个SubTool

    我们学习了人体的基本雕刻,了解了人体结构.比例.骨骼.肌肉对于人物模型雕刻的重要性.本节课对ZBrush中的"Transpose Master"功能进行讲解,这个插件是ZBrush ...

  10. CSS的一些零碎总结

    1.CSS 伪元素用于向某些选择器设置特殊效果(用来当作一个东西的,跟一个元素差不多,但不是元素). ① :frist-line伪元素:用于向文本首行设置特殊样式,但是只能用于块级元素. 以下属性可应 ...