两个核心概念

三个架构

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. restful 涵义

    REST,即Representational State Transfer的缩写: "表现层状态转化" REST的名称"表现层状态转化"中,省略了主语.&quo ...

  2. protocol buf安装

    1:下载安装包 $wget https://github.com/google/protobuf/archive/v2.6.1.zip $unzip protobuf-2.6.1.zip $cd pr ...

  3. Java - 15 Java 正则表达式

    Java 正则表达式 正则表达式定义了字符串的模式. 正则表达式可以用来搜索.编辑或处理文本. 正则表达式并不仅限于某一种语言,但是在每种语言中有细微的差别. Java正则表达式和Perl的是最为相似 ...

  4. Python网络爬虫之requests模块

    今日内容 session处理cookie proxies参数设置请求代理ip 基于线程池的数据爬取 知识点回顾 xpath的解析流程 bs4的解析流程 常用xpath表达式 常用bs4解析方法 引入 ...

  5. python3.5安装Numpy、mayploylib、opencv等额外库

    安装Python很简单,但是安装额外的扩展库就好麻烦,没有了第三方库的Python就是一个鸡肋~~  我们现在安装NumPy库 1. 首先这里假设你已经安装了Python了,不会的去看我的另一篇博文( ...

  6. OpenGL Hello World

    ▶ OpenGL 的环境配置与第一个程序 ● CUDA 中自带 OpenGL 需要的头文件和库,直接拉进项目里边去就行 ● VS项目属性右键,属性,C/C++ 目录,包含目录,添加 CUDA 的头文件 ...

  7. hive 函数

    collect_set(x)   列转行函数---没有重复, 组装多列的数据的结构体collect_list(x) 列转行函数---可以有重复,组装多列的数据的结构体concat_ws 拼接函数, 用 ...

  8. Android Studio 3.0 新特性

    最新Android Studio版本是Android Studio 3.0,本文提供了所有新功能和更改的摘要. 所有这些功能都可以在最新的金丝雀版本中发布,但beta测试版本可能尚未提供. 核心IDE ...

  9. python 求3到8位数的水仙花数Pycharm实现

    #-*- coding: utf-8-*-import timeimport math#获取3位数的水仙花数start1 = time.time()start = time.time() number ...

  10. php实现单点登录,顶级域名与子域名间共享Cookie实现单点登录原理

    这是一个简单版的php单点登录概述,如果需要实现复杂的需自己,编写复杂的ticket加解密算法. 先看张图. sso系统,http://sso.yxh.com 1 2 3 4 5 <?php   ...