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. Play Framework 完整实现一个APP（四）

    上一篇最后出现的错误是因为断言 assertEquals(1, Post.count()); 出错,取到的Post的数量不是1,运行Test之前,表中有数据 可以添加以下方法,运行Test前清空数据 ...

  2. sun.misc.Unsafe的理解

    以下sun.misc.Unsafe源码和demo基于jdk1.7: 最近在看J.U.C里的源码,很多都用到了sun.misc.Unsafe这个类,一知半解,看起来总感觉有点不尽兴,所以打算对Unsaf ...

  3. ORA-01012: not logged on

    关于ORA-01012这个错误,惜分飞的博客ORA-01012: not logged on里面已经做了一些介绍,原因就不多说了,看看他的描述说明: 现象说明: 1)终于发现了ORA-01012错误, ...

  4. 如何让Log4net日志文件按每月归成一个文件夹，StaticLogFileName参数的用法

    想要让Log4net日志(以下称日志)按每月自动归类为一个文件夹,为此,学习和修改了log4net.config文件.查了资料,重点是以下这些参数:      <param name=" ...

  5. 【转】高效Java编程工具集锦

    原文地址:http://geek.csdn.net/news/detail/57469 Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松.目前,市面上涌现出越来越多的高 ...

  6. 常用python机器学习库总结

    开始学习Python,之后渐渐成为我学习工作中的第一辅助脚本语言,虽然开发语言是Java,但平时的很多文本数据处理任务都交给了Python.这些年来,接触和使用了很多Python工具包,特别是在文本处 ...

  7. linux下 mysql数据库的备份和还原

    1.备份 [root@CentOS ~]# mysqldump -u root -p mysql > ~/mysql.sql #把数据库mysql备份到家目录下命名为mysql.sql Ente ...

  8. centos7安装python3

    下载python3.5.2 wget http://mirrors.sohu.com/python/3.5.2/Python-3.5.2.tgz 如果提示错误可能是wget没有安装,用yun -y i ...

  9. BOM与事件

    PPK谈JS学习笔记第二弹 JS的语言核心和DOM之间有一个过渡层,一般称为BOM,浏览器对象模型.是指JS的客户端实现,它不操作DOM,又不是JS的语言核心,它的主要功能是管理浏览器窗口,每个窗口都 ...

  10. linux 文件系统结构及命令

    1.linux 文件系统结构 / 根目录 root |--mnt/ | |--sdcard/  挂载点 | |--usb0 | |--cdrom |--home | |--soft01 <- 用 ...