Angular 学习笔记(二)
控制器:
就像 JavaScript 里的构造函数一般,用来增强作用域(scope),当一个控制器通过 ng-controller 指令来添加到 DOM 中时,
ng 会调用该控制器的构造函数来生成一个控制器对象,且会创建一个新的子级作用域
注:在这个构造函数中,作用域会作为 $scope 参数注入其中,并允许用户代码访问它
使用控制器:
1、初始化 $scope 对象
// 设置属性 attrName 的值为 value
$scope.attrName = value;
2、为 $scope 对象添加行为(方法)
// 添加方法 func
$scope.func = function([params]) {...}
任何对象(或原生类型的变量)被添加到 scope 后都将成为 scope 的属性,作为数据模型供模板/视图调用
任何方法被添加到 scope 后,也能在模板/视图中通过 Angular 表达式或是 Angular 的事件处理器调用
注:Angular的模板是一个声明式的视图,它指定信息从模型、控制器变成用户在浏览器上可以看见的视图
千万不要使用控制器的场合:
1、任何形式的 DOM 场合:控制器只应包含业务逻辑
2、格式化输入:使用 Angular 表单控件代替
3、过滤输出:使用 Angular 过滤器代替
4、在控制器间复用有状态或无状态的代码:使用 Angular 服务代替
5、管理其它部件的生命周期
注:可通过将那些不属于控制器的逻辑都封装到服务中,然后在控制器中通过依赖注入(DI)调用相关服务来保持控制器的“纯度”
实现控制器和 scope 对象的关联:
1、ngController 指令:创建一个新的 scope
2、$route 路由服务
作用域(scope):
1、一个存储应用数据模型的对象
2、为表达式提供一个执行上下文
3、作用域的层级对应于 DOM 的树结构
4、作用域可监听表达式的变化并传播事件
补充:
1、作用域提供了($watch)方法监听数据模型的变化
2、作用域提供了($apply)方法把不是由 Angular 触发的数据模型的改变引入 Angular 的控制范围
3、作用域提供了基于原型链继承其父作用域属性的机制
4、作用域提供了表达式的执行环境,必须在一个拥有这个属性的作用域中执行才有意义
注:在自定义指令中,处在模板的链接阶段时,指令会设置一个 $watch 函数来监听着作用域中各个表达式
$watch 允许指令在作用域中的属性变化时收到通知,进而让指令能够根据这个变化对 DOM 重新渲染,更新它改变的属性值
a、控制器 --> 作用域 --> 视图(DOM)
b、指令 --> 作用域 --> 视图(DOM)
控制器和指令是相互分离的,而且它们与视图之间也是分离的(耦合度低),可大大提高对应进行测试的工作效率
注:作用域的结构对应 DOM 结构,最顶层和 DOM 树的根节点一样,每个 Angular 应用有且仅有一个 root scope,子作用域可有多个
作用域对象与指令或控制器等 Angular 元素所在的 DOM 节点相关联 ==》 DOM 节点上可抓取到作用域这个对象
Angular 学习笔记(二)的更多相关文章
- angular学习笔记(二十八-附2)-$http,$resource中的promise对象
下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...
- angular学习笔记(二十九)-$q服务
angular中的$q是用来处理异步的(主要当然是http交互啦~). $q采用的是promise式的异步编程.什么是promise异步编程呢? 异步编程最重要的核心就是回调,因为有回调函数,所以才构 ...
- angular学习笔记(二十七)-$http(5)-使用$http构建RESTful架构
在angular中有一个特别为RESTful架构而定制的服务,是在$http的基础上进行了封装. 但是为了学习,我们先看看用直接$http是如何构建RESTful架构的: 假设有一个银行卡的列表.需要 ...
- angular学习笔记(二)-创建angular模块
如果在页面的html标签(或任意标签)中添加ng-app,表示对整个页面应用angular来管理. 他是一个模块. 模块有助于把东西从全局命名空间中隔离. 今天学习如何自定义创建模块: <!DO ...
- angular学习笔记(二十八-附1)-$resource中的资源的方法
通过$resource获取到的资源,或者是通过$resource实例化的资源,资源本身就拥有了一些方法,$save,$delete,$remove,可以直接调用来保存该资源: 比如有一个$resour ...
- angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构
ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入 ...
- angular学习笔记(二十六)-$http(4)-设置请求超时
本篇主要讲解$http(config)的config中的timeout项: $http({ timeout: number }) 数值,从发出请求开始计算,等待的毫秒数,超过这个数还没有响应,则返回错 ...
- angular学习笔记(二十五)-$http(3)-转换请求和响应格式
本篇主要讲解$http(config)的config中的tranformRequest项和transformResponse项 1. transformRequest: $http({ transfo ...
- angular学习笔记(二十四)-$http(2)-设置http请求头
1. angular默认的请求头: 其中,Accept 和 X-Requested-With是$http自带的默认配置 Accept:application/json,text/plain ...
- angular学习笔记(二十三)-$http(1)-api
之前说到的$http.get和$http.post,都是基于$http的快捷方式.下面来说说完整的$http: $http(config) $http接受一个json格式的参数config: conf ...
随机推荐
- 松软科技带你学开发:SQL--FIRST() 函数
FIRST() 函数(原文链接 松软科技:www.sysoft.net.cn/Article.aspx?ID=3731) FIRST() 函数返回指定的字段中第一个记录的值. 提示:可使用 ORDER ...
- 关于vue-detools chorme创建安装完成,但是控制台不显示问题
搜了一下发现挺多人遇到这个问题的,绝大多数的回答都是在main.js中添加下面代码 Vue.config.devtools = true; 但是发现并不行. 后来看到有人说刷新然后在按F12就好了,居 ...
- 通过 RxSwift 优雅使用 NotificationCenter
原文 纯粹的官方代码使用NotificationCenter真的很难用,但是有了RxSwift,就变得方便了很多. 修改 Podfile,通过pod引入RxSwift pod 'RxSwift' po ...
- 【转】Kotlin的inline内联函数
原文链接:https://blog.csdn.net/Jaden_hool/article/details/78437947 方法调用流程 调用一个方法是一个压栈和出栈的过程,调用方法时将栈针压入方法 ...
- windows下同时安装多个python版本的方法
根据项目的需要,我的电脑上需要安装的python不止一个版本,比如同时需要python2.7和python3.6: 安装多个python版本 这时需要下载多个python安装包,为了区分不同的pyth ...
- Android Studio如何配置CURL指令一键打包apk上传至蒲公英
Android Studio如何配置CURL指令一键打包apk上传至蒲公英 第一步:在所需要打包的模块build.gradle文件中加入如下代码: android{ buildTypes { //配置 ...
- 201871010112-梁丽珍《面向对象程序设计(java)》第一周学习总结
项目 内容 这个作业属于哪个课程 <任课教师博客主页链接> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址> ...
- poj 1182 食物链 并查集 题解《挑战程序设计竞赛》
地址 http://poj.org/problem?id=1182 题解 可以考虑使用并查集解决 但是并不是简单的记录是否同一组的这般使用 每个动物都有三个并查集 自己 天敌 捕食 并查集 那么在获得 ...
- C++ 数据类型判断 typeid
#include <iostream> // typeid testing //////////////////////////////////////////////////////// ...
- Yet Another Broken Keyboard
time limit per test2 secondsmemory limit per test256 megabytesinput: standard inputoutput: standard ...