angular.js 中的作用域 数据模型 控制器
1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.
它抽象出了数据模型,控制器及视图.
成功解耦了应用逻辑,数据模型,视图.
2.它的视图也不是后台统一替换后渲染页面,而是视图被动态实时替换.
视图上可以通过指定的 angular.js 指令来绑定模型数据.模型数据的变化又会直接影响视图的变化.
3.控制器就像一座桥梁,负责连接模型和视图, 模型里包括数据和与数据进行交互的方法.
视图只负责把模型数据的映射显示给用户.
4.angular.js 会记录数据模型中的数据在任意时间点的值,如果在某个时间点,angular.js 发现当前保存的值和上次记录的值发生了变化,那么该值就被认为是"脏"的,angular.js 就会做出相应的响应变化.
它会实时循环调用 $digest()这个方法来做脏检查,保证数据的一致性
5.一个controller 对应一个数据模型对象 $scoe
通过 ng-model 来将内部数据模型对象 $scope 中的属性绑定到视图的某个字段上.
6.$scope模型对象是一个简单的javascript对象,他的属性可以被视图访问,也可以和控制器交互.
$scope因为上面的特性,所以实现双向绑定就是指:angular.js通过 $digest()方法来脏检查,如果视图发生改变导致模型对象某个属性有变化,自动做出相应的变化.
如果模型某个属性发生变化,视图也会依照变化重新渲染显示.
7.当事件循环,通常执行在顶层$scope 对象上(也就是 $rootScope) 每个作用域都执行自己的脏值检查,每个监控函数都会检查变化,如果检查到任意变化,$scope对象就会触发指定的毁掉函数.
8.模块可以让我们避免全局变量污染,
不同应用之间复用代码
9.模块定义:模块名称,依赖列表
angular.module('myApp', []);
10.$scope 作用域和数据模型息息相关,同时也是表达式执行的上下文,
作用:定义应用业务逻辑和控制器方法以及视图属性.
是素有视图的唯一源头,可以理解成视图模型.
11.作用域提供了监视数据模型变化的能力(作用域会提供观察者监视模型的变化).
12.允许开发者使用其中的 apply 机制,将数据模型的变化在整个应用范围内进行通知(甚至可以通知到系统外的组件)
可以嵌套,隔离业务功能和数据.
13.给表达式提供运算时所需的执行环境.
14.最好的架构:将应用业务逻辑都放在控制器上,将相关数据都放在控制器作用域中.
15. $rootScope 是所有 $scope 对象的最上层.
$rootScope 是 Angular.js中类似于全局作用域的对象,
$scope 类似于的 全局变量里面的 子作用域,业务逻辑写到这里面不会污染全局作用域对象.
16.angular.js的这种模式非常像 javascript中的原型继承,根据变量首先查找当前作用域是否存在.
如果找不到就去父作用域中查找,如果找不到,逐渐向上查找其父作用域,知道根作用域 $rootScope
17.ng-controller 可以直接在dom上创建一个控制器.
这个新的 $scope对象,其实就是一个子作用域.它嵌套在父作用域 $rootScope 之内.
18.当angular.js 关心的事件发生时,angular.js 就会监控应用程序内的多有对象,脏值检测循环等.
那么什么事件是 angular.js 关心的呢? 比如 绑定了 ng-model 的输入框文本变化时,绑定了 ng-click的按钮被点击时 等
angular.js 中的作用域 数据模型 控制器的更多相关文章
- 聊一下JS中的作用域scope和闭包closure
聊一下JS中的作用域scope和闭包closure scope和closure是javascript中两个非常关键的概念,前者JS用多了还比较好理解,closure就不一样了.我就被这个概念困扰了很久 ...
- 秒味课堂Angular js笔记------Angular js中的工具方法
Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...
- JS中的作用域以及全局变量的问题
一. JS中的作用域 1.全局变量:函数外声明的变量,称为全部变量 局部变量:函数内部使用var声明的变量,称为局部变量在JS中,只有函数作用域,没有块级作用域!!!也就是说,if/for等有{}的结 ...
- (网页)Angular.js 中 copy 赋值与 = 赋值 区别
转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...
- angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制
Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...
- Angular.js中处理页面闪烁的方法详解
Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...
- 在Angular.js中的H5页面调用Web api时跨域问题处理
/// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...
- 【详解】JS中的作用域、闭包和回收机制
在讲解主要内容之前,我们先来看看JS的解析顺序,我们惯性地觉得JS是从上往下执行的,所以我们要用一个变量来首先声明它,来看下面这段代码: alert(a); var a = 1; 大家觉得这段代码有什 ...
- Angular JS 中的服务注册方法
在Angular JS中创建服务的几种方法 factory() service() constant() value() provider() factory(name,fn(){}) 该服务为单例的 ...
随机推荐
- nGrinder3.4 性能测试框架安装
转载:https://blog.csdn.net/mbugatti/article/details/53782070 nGrinder3.4 (2016.05.24) 支持JDK1.8 github地 ...
- 把系统时间改到以前后,MyEclipse9.1的工程里的JS文件修改完保存但MyEclipse不会将其不会更新。
一个任务中,由于本周数据还没有产生,只好把系统时间修改到上周,利用下上周的数据. 修改内容主要是增加查询子句的一个字段,因此,包含SQL的DAO,前台显示的Table和前台操作的JS都需要相应修改,它 ...
- SqlServer日常积累(三)
1.TRUNCATE 和 DELETE TRUNCATE操作没有记录删除操作日志 主要的原因是因为 TRUNCATE 操作不会激活触发器,因为TRUNCATE操作不会记录各行删除操作的日志,所以当你需 ...
- es6-块级作用域let 和 var的区别
块级绑定 js的处理机制和我们大家想象的完全不同,并不完全是所谓函数调用以及上下执行那样简单,它是存有”域”的本质区别的. var具有全局污染特性,所以es6才会出现let .const. 下面通过一 ...
- Apache+Tomcat负载均衡集群搭建
1.所需软件 apache_2.2.4-win32-x86-no_ssl.apacheserver mod_jk-apache-2.2.4连接器,连接apache和tomcat apache-tomc ...
- Table '' is marked as crashed and should be repaired 解决方法
解决方法: 找到mysql的安装目录的bin/myisamchk工具,在命令行中输入: myisamchk -c -r ../data/mysql/user.MYI 然后myisamchk 工具会帮助 ...
- 新浪微博api出现认证失败问题 (获取code字段值的问题)
出现该提示的原因:`` - 说: (2015-10-30 18:06:14)回调地址不一致,`` - 说: (2015-10-30 18:07:38)请在编辑开发者信息中将网站地址和应用信息--高级信 ...
- mariadb多实例搭建
测试环境基于centos7.2,腾讯云实验室,学习搭建! https://www.qcloud.com/developer 多实例mysql,能更加理解mysql安装的基本过程!及简单使用... ma ...
- MONyog_5.6.9.0 key激活|监控MYSQL
SQLyog与MONyog是一家公司对mysql推出的商业化软件,可能大家对SQLyog很熟悉,MONyog是对mysql-server服务的监控. 脚本执行时长.安全性.等的监控! key:a668 ...
- 微信小程序-简易计算器
代码地址如下:http://www.demodashi.com/demo/14210.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...