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. IT人创业之融资方式 - 创业与投资系列文章

    对于想要创业的IT人,最基本的就是需要资金和团队.笔者在经历了自己制定的职业道路之后(见文:IT从业者的职业道路(从程序员到部门经理) - 项目管理系列文章),进行过投资(见文:IT人经济思维之投资 ...

  2. MS SQL错误：SQL Server failed with error code 0xc0000000 to spawn a thread to process a new login or connection. Check the SQL Server error log and the Windows event logs for information about possible related problems

          早晨宁波那边的IT人员打电话告知数据库无法访问了.其实我在早晨也发现Ignite监控下的宁波的数据库服务器出现了异常,但是当时正在检查查看其它服务器发过来的各类邮件,还没等到我去确认具体情 ...

  3. composer "Illegal offset type in isset or empty"报错解决方案

    最近更新了composer版本,即执行以下任一命令 composer selfupdate | composer self-update 再次执行 composer update -vvv 会出现“I ...

  4. Mvc model验证总结

    Model 验证总结 Model 验证总结 1 一．Model 验证标记 1 1.启用客户端验证: 1 2.在 Model 中加入验证标记 2 3 . Model 类中可以添加的验证标记: 3 3.1 ...

  5. qt5.4.0编译错误

    error1: 进程"C:\Qt\Qt5.4.0\Tools\QtCreator\bin\jom.exe"退出,退出代码 2 solution:去工具->选项->构建和 ...

  6. 自动创建WIN32下多级子目录的C++封装类

            这是 WIN32 自动创建多级子目录的 C++ 封装类,用法简单.         封装没有采用类的静态函数方式,而是在构造函数里面直接完成工作.没什么具体的原因,只是当时做成这样了, ...

  7. javascrip中parentNode和offsetParent之间的区别

    首先是 parentNode 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A. 要明白 off ...

  8. java设计模式之观察者模式

    观察者模式 观察者模式(有时又被称为发布(publish )-订阅(Subscribe)模式.模型-视图(View)模式.源-收听者(Listener)模式或从属者模式)是软件设计模式的一种.在此种模 ...

  9. 利用QMP和QEMU虚拟机交互的几种方式

    QMP是一种基于JSON格式的传输协议,我们能利用它与一个QEMU虚拟机实例进行交互,例如查询,更改虚拟机的状态,获取设备信息等等.下面是几种创建QMP的方法以及对其它的一些基本命令的使用: 1.基于 ...

  10. 使用Ecplise git commit时出现"There are no stages files"

    异常   解决方案 进入Window--Preferences--Team--Git--Committing,反选下图红圈部分:   保存后即可出线我们熟悉的提交代码界面啦: