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. GCD定时器

    // // ViewController.m // GCD 定时器 // // #import "ViewController.h" NSInteger count = ; @in ...

  2. RedHat Linux RHEL6配置本地YUM源

    YUM是Yellow dog Updater Modified的简称,起初是由yellow dog这一发行版的开发者Terra Soft研发,用python写成,那时还叫做yup(yellow dog ...

  3. Windows 64位下装Oracle 11g，PLSQL Developer的配置问题,数据库处显示为空白的解决方案

    安装pl sql 后,若下图的数据库处为空.则需要安装32位的客户端,说明pl sql不支持64位客户端连接. 解决办法:  1.下载32位Oracle客户端,并安装 2.设置PLSQL Develo ...

  4. java实现串口通讯

    一. 准备工作 1. 点击此下载java串口通讯相关工具 2. 将RXTXcomm.jar放到  %JAVA_HOME%\jre\lib\ext\  目录下,工程中引入该jar包 3. 将rxtxSe ...

  5. Mysql主从复制，读写分离(mysql-proxy)，双主结构完整构建过程

    下面介绍MySQL主从复制,读写分离,双主结构完整构建过程,不涉及过多理论,只有实验和配置的过程. Mysql主从复制(转载请注明出处,博文地址:) 原理是master将改变记录到二进制日志(bina ...

  6. [嵌入式开发]Linux性能分析——上下文切换

    一.从一个问题说起 相信很多人在玩手机还是PC时,都曾碰到过这样一种情况,安装的软件多了系统性能就变慢了,但是去查看CPU利用率一直都低于10%,内存也很充足.我在近期的开发工作中就碰到了类似的情况, ...

  7. 关于 Java 中 finally 语句块的深度辨析

    应该有很多人对java的finally 理解的不是很透彻吧,这里有篇文章讲的非常深入.猛击下面链接.面试时经常问到这问题 http://www.ibm.com/developerworks/cn/ja ...

  8. (转)CNBLOG离线Blog发布方法

    原文章路径:http://www.cnblogs.com/liuxianan/archive/2013/04/13/3018732.html (新添了插件路径) 去年就知道有这个功能,不过没去深究总结 ...

  9. Merge k Sorted Lists

    1. Merge Two Sorted Lists 我们先来看这个 问题: Merge two sorted linked lists and return it as a new list. The ...

  10. 【2016-10-26】【坚持学习】【Day13】【WCF】【EF + Data Services】

    今天做了一个demo, EF+Data Services 先建立一个网站项目 添加一个ADO.NET 数据模型 相当于一个EF容器,用来连接MSSQL数据库 添加一个WCF Data Services ...