控制器:

  就像 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 学习笔记(二)的更多相关文章

  1. angular学习笔记(二十八-附2)-$http,$resource中的promise对象

    下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...

  2. angular学习笔记(二十九)-$q服务

    angular中的$q是用来处理异步的(主要当然是http交互啦~). $q采用的是promise式的异步编程.什么是promise异步编程呢? 异步编程最重要的核心就是回调,因为有回调函数,所以才构 ...

  3. angular学习笔记(二十七)-$http(5)-使用$http构建RESTful架构

    在angular中有一个特别为RESTful架构而定制的服务,是在$http的基础上进行了封装. 但是为了学习,我们先看看用直接$http是如何构建RESTful架构的: 假设有一个银行卡的列表.需要 ...

  4. angular学习笔记(二)-创建angular模块

    如果在页面的html标签(或任意标签)中添加ng-app,表示对整个页面应用angular来管理. 他是一个模块. 模块有助于把东西从全局命名空间中隔离. 今天学习如何自定义创建模块: <!DO ...

  5. angular学习笔记(二十八-附1)-$resource中的资源的方法

    通过$resource获取到的资源,或者是通过$resource实例化的资源,资源本身就拥有了一些方法,$save,$delete,$remove,可以直接调用来保存该资源: 比如有一个$resour ...

  6. angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构

    ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入 ...

  7. angular学习笔记(二十六)-$http(4)-设置请求超时

    本篇主要讲解$http(config)的config中的timeout项: $http({ timeout: number }) 数值,从发出请求开始计算,等待的毫秒数,超过这个数还没有响应,则返回错 ...

  8. angular学习笔记(二十五)-$http(3)-转换请求和响应格式

    本篇主要讲解$http(config)的config中的tranformRequest项和transformResponse项 1. transformRequest: $http({ transfo ...

  9. angular学习笔记(二十四)-$http(2)-设置http请求头

    1. angular默认的请求头: 其中,Accept 和 X-Requested-With是$http自带的默认配置 Accept:application/json,text/plain       ...

  10. angular学习笔记(二十三)-$http(1)-api

    之前说到的$http.get和$http.post,都是基于$http的快捷方式.下面来说说完整的$http: $http(config) $http接受一个json格式的参数config: conf ...

随机推荐

  1. LayUi 树形组件tree 实现懒加载模式,展开父节点时异步加载子节点数据

    LayUi框架中树形组件tree官方还在持续完善中,目前最新版本为v2.5.5 官方树形组件目前还不支持懒加载方式,之前我修改一版是通过reload重载实例方法填充子节点数据方式,因为递归页面元素时存 ...

  2. js分号问题

    总结一句话: 一行开头是括号(比如IIFE)或者方括号的时候加上分号就可以

  3. 那些你不知道的Mac截屏功能

    今天介绍Mac的截图功能,如果你以为Shift + Command + 3 / 4就是Mac全部的截屏功能的话,那你小看Mac了.它远比你想得强大. 1.Shift + Cmd + 3 ——截取全屏 ...

  4. SSH agent 的使用 - 资料摘录

    下面是一些ssh agent的资料简要摘录,网路上的相关的文章已经很多了: ssh 推荐的登录方式是使用私钥登录.但是如果生成私钥的时候,设置了口令(passphrase),每次登录时需要输入口令也很 ...

  5. go语言设计模式之bridge

    著名的桥接模式罗.. bridge.go package bridge import ( "errors" "fmt" "io" ) typ ...

  6. ccf再卖菜

    https://blog.csdn.net/imotolove/article/details/82777819 记忆化搜索,还不太理解..

  7. 【C#】C#获取本地的内网(局域网)和外网(公网)IP地址的方法

    1.获取本机的IP地址集合: /// <summary> /// 获取本机所有ip地址 /// </summary> /// <param name="netT ...

  8. 1+x 证书 Web 前端开发初级理论考试(试卷8 )

    Web前端开发初级模拟测试卷(三) 共55道题 总分:200分 形考总分:0分 一.单选题共30题,60分 1.实现向右的红色三角形,样式实现正确的是( ) A <div class=" ...

  9. 百度开源的分布式唯一ID生成器UidGenerator,解决了时钟回拨问题

    UidGenerator是百度开源的Java语言实现,基于Snowflake算法的唯一ID生成器.而且,它非常适合虚拟环境,比如:Docker.另外,它通过消费未来时间克服了雪花算法的并发限制.Uid ...

  10. [03]使用 VS2019 创建 ASP.NET Core Web 程序

    使用 VS2019 创建 ASP.NET Core Web 程序 本文作者:梁桐铭- 微软最有价值专家(Microsoft MVP) 文章会随着版本进行更新,关注我获取最新版本 本文出自<从零开 ...