两个核心概念

三个架构

MVC

一切应用程序都是数据的增删改查 那么总要有东西装数据吧

Model就是干这个事(数据表现和操作)

View(展现数据)

Controller(逻辑)

那么M- V- C三个模块是如何交互的呢?

第一个阶段

红色是第一次请求的时候,蓝色是第二次以后的走向。

第一次请求,比如键入www .baidu.com 这个http请求 来到C (分析需要啥数据)

来到M(准备相应数据)

V(展示数据)

第二次请求,比如你在页面点击了个按钮,那么V直接和C交互然后M,最后来到V。

M- V- P

User略了(和上面一样) ,不是没有。

和刚才不同的是 我们的Model准备好数据后直接发给Presenter,而不是给View,由P发给V

M-V-V-M

User略了 ,

V(很多变量)

ViewModel(为V里面的变量建模),他和V一一对应。数据绑定!举个例子 View 页面有个input 标签 里面有个属性field

field的值一变,ViewModel里面的对应的变量的值也跟着改变。反之亦然,这叫做双向数据绑定。这些都是架构帮我们做的。

其实就是,Ember.js或者angular.js(版本1)这些架构,一直checkoutView,一旦属性field改变,那么ViewModel的变量值改变,同样

一直watch  ViewModel的变量,一旦改变,field跟着改变,反应在页面上。

到了angular2.0以后,又取消这个强制的双向绑定。后边就演变成,反正都是View和Model交互,所以就有了

Model-View-*(Whatever)

那么回到我们最初的问题:以前我们有html.CSS.JS就能做这些事了,为啥还要弄个Angular架构出来?

因为,我们发现所有的,都需要View和Model那么,我们Angular就替你做好了,你只需要准备页面和数据就可以了。

那么第二个核心概念叫双向数据绑定

请忽略Angular1.x的语法,因为View里面的属性ng-model=“name”,Model里面有个变量name=“haha”,所以input栏的值变成了haha

同样View里面的变量{{name}}也变成了haha

下面,在框内键入asdasdadasdasds,因为View的input标签的属性ng-modle=“name”的值变成了asdasdadasdasds,所以Model的name变成了asdasdadasdasds

因为name变了,所以View里面的变量{{name}}=asdasdadasdasds

到了Angular后,就变的很灵活,不强制双向绑定,可以单向绑定,比如,我们input标签的属性的值改变了,Model的name值改变,但是我们name的值再变,input的属性值不变。这就是event binding 和 property binding

AngularJS理论知识的更多相关文章

  1. js中函数的一些理论知识

      函数的一些理论知识 1. 函数:                执行一个明确的动作并提供一个返回值的独立代码块.同时函数也是javascript中的一级公民(就是函数和其它变量一样). 2.函数的 ...

  2. 用VC进行COM编程所必须掌握的理论知识

    一.为什么要用COM 软件工程发展到今天,从一开始的结构化编程,到面向对象编程,再到现在的COM编程,目标只有一个,就是希望软件能象积方块一样是累起来的,是组装起来的,而不是一点点编出来的.结构化编程 ...

  3. 图形学理论知识 BRDF 双向反射分布函数(Bidirectional Reflectance Distribution Function)

    图形学理论知识 BRDF 双向反射分布函数 Bidirectional Reflectance Distribution Function BRDF理论 BRDF表示的是双向反射分布函数(Bidire ...

  4. TestNG学习-001-基础理论知识

    此 文主要讲述用 TestNG 的基础理论知识,TestNG 的特定,编写测试过程三步骤,与 JUnit4+ 的差异,以此使亲对 TestNG 测试框架能够有一个简单的认知. 希望能对初学 TestN ...

  5. [转] DDD领域驱动设计(三) 之 理论知识收集汇总

    最近一直在学习领域驱动设计(DDD)的理论知识,从网上搜集了一些个人认为比较有价值的东西,贴出来和大家分享一下: 我一直觉得不要盲目相信权威,比如不能一谈起领域驱动设计,就一定认为国外的那个Eric ...

  6. Winsock网络编程笔记(4)----基本的理论知识

    前面的笔记记录了Winsock的入门编程,领略了Winsock编程的乐趣..但这并不能算是掌握了Winsock,加深理论知识的理解才会让后续学习更加得心应手..因此,这篇笔记将记录一些有关Winsoc ...

  7. Android初级教程对大量数据的做分页处理理论知识

    有时候要加载的数据上千条时,页面加载数据就会很慢(数据加载也属于耗时操作).因此就要考虑分页甚至分批显示.先介绍一些分页的理论知识.对于具体用在哪里,会在后续博客中更新. 分页信息 1,一共多少条数据 ...

  8. Android初级教程理论知识(第四章内容提供器)

    之前第三章理论知识写到过数据库.数据库是在程序内部自己访问自己.而内容提供器是访问别的程序数据的,即跨程序共享数据.对访问的数据也无非就是CRUD. 内容提供者 应用的数据库是不允许其他应用访问的 内 ...

  9. AngularJS进阶(十二)AngularJS常用知识汇总(不断更新中....)

    AngularJS常用知识汇总(不断更新中....) 注:请点击此处进行充电! app.controller('editCtrl',['$http','$location','$rootScope', ...

随机推荐

  1. layui之select的option叠加问题解决

    小编我在使用layui,在select的地方遇到了坑,select里的值居然无法清空,select里的option还有叠加问题,为了解决这个问题,也达到我的功能,我研究了下,让有同样需求的小伙伴不踩坑 ...

  2. Chapter1:Qt概念

    信号和槽1.信号与槽机制的连接方式(1):一个信号可以与另一个信号相连,代码如下: connect(Object1,SIGNAL(signal1),Object2,SIGNAL(signal1)); ...

  3. hbase启动后子节点的regionserver不能启动

    启动hbase后,主节点的进程正常,但是子节点的regionserver进程会自动挂掉 然后我们看看子节点的情况 可以看到挂掉了 我们这样解决问题,先把hadoop目录下的这个两个文件放到hbase的 ...

  4. 匿名内部类中不能修改int变量时、final int i 不能改变i的值时、或 i++线程不安全。使用AtomicInteger;

    在匿名内部类或某某情况下中引入的变量必须是Final最终型的:这时还想要去修改这个变量就需要使用到AtomicInteger这个类了: AtomicInteger CarSize = new Atom ...

  5. CF533A Berland Miners

    线段树维护贪心 /* */ #include<cstdio> #include<algorithm> #include<cstring> #include<i ...

  6. python学习之----BeautifulSoup的find()和findAll()及四大对象

    BeautifulSoup 里的find() 和findAll() 可能是你最常用的两个函数.借助它们,你可以通 过标签的不同属性轻松地过滤HTML 页面,查找需要的标签组或单个标签. 这两个函数非常 ...

  7. Javascript函数心得

    Javascript函数 Javascript函数是由事件驱动的或者当他被调用时执行的可重复使用的代码块.所以说我们光创建了函数不调用是没有啥用的,我们必须得调用它才能执行. 1.什么是函数 (1)函 ...

  8. Jquery,全选,反选,

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 使用docker生成centos7系统

    因为缺乏系统,所以使用docker镜像模拟生成多个系统,用于练习集群的安装. 查看已有镜像 docker images 下载镜像: docker pull centos: docker pull  镜 ...

  10. File Input Features

    文件输入功能 1.该插件将将一个简单的 HTML 文件输入转换为高级文件选取器控件.将有助于对不支持 JQuery 或 Javascript 的浏览器的正常 HTML 文件输入进行回退. 2.文件输入 ...