转自:https://www.jianshu.com/p/c40b3b64b467
模板表达式“{{}}”不能引用任何全局命名空间中的成员(如:window、document等等)的原因:
我想原因可能是:
为了防止名称冲突,angular在解析模板表达式后,会把表达式中的每个变量var替换成模板所属类的实例instance的属性调用instance.var;
所以如果引用全局命名空间中的成员的话,如:document,解析后就会变成:instance.document,而instance.document是不存在的,所以就引发了错误;
数据绑定
组件类和模板之间的数据交互称为数据绑定;它是一种让模板的各部分与组件的各部分相互合作的机制;
数据绑定的语法有四种形式。每种形式都有一个方向:绑定到DOM、绑定自DOM 或者及双向绑定。
{{expression}}
插值;[属性]
属性绑定;(事件)
事件绑定;[(属性)]
双向绑定;本质上是结合属性绑定和事件绑定的语法糖;
属性绑定、事件绑定、插值也属于数据绑定的东范畴;属性绑定和事件绑定即可用于父子组件的传递,也可用于组件的数据模型和模板视图之间的数据传递;所以在父子组件通信的过程中,模板充当类似于桥梁的角色,连接二者的功能逻辑,如下图:
angular数据流动.png
Angular的数据流动机制是靠Angular的变化监测机制驱动着的;
这句话值得再强调一次: 模板绑定是通过 property 和事件来工作的,而不是 attribute。
没有 ATTRIBUTE 的世界
在 Angular 的世界中,attribute 唯一的作用是用来初始化元素和指令的状态。 当进行数据绑定时,只是在与元素和指令的 property 和事件打交道,而 attribute 就完全靠边站了
插值
- 插值语法是由一对双大括号
{{}}
组成,插件是一半向的数据流动——从数据模型到模板视图;插值中的变量上下文是组件类本身; - 插值表达式可以把计算后的字符串插入到 HTML 元素标签内的文本或对标签的属性进行赋值。
- 一般来说,括号间的素材是一个模板表达式,Angular 先对它求值,再把它转换成字符串。
- 插值表达式是一个特殊的语法,Angular 会把它转换成属性绑定。
变化监测
Angular并不是用ES5提供的getter、setter语言接口来实现变化监测的,而是以适当的时机去检验对呀的值是否被改动,这个适当的时机并不是以固定的某个频率去执行检验,而通常是在用户操作事件(如:单击事件)、setTimeout或XHR回调等这些异步事件触发之后;Angular捕获这些异步事件的工作是通过Zones库实现的;
如下图所示:第个组件背后都维护着一个独立的变化监测器,这个变化监测器记录着所属组件的数据变更状态。由于应用是以组件树的形式组织,因此第个应用也有着对应的一棵变化监测树。当Zones的捕获到某异步事件后,它都会通知Angular执行变化监测操作,每次变化监测操作都始于根组件,并以深度优先的原则向叶组件遍历执行。
Angular变化监测.png
给Angular的属性的各个赋值的方式的区别:
假设:组件A的子组件B的属性有attrB;
则在组件A的模板中给子组件B的attrB属性赋值的方式如下:
- 通过输入绑定语法”[ ]":
<B [attrB]="value" ></B>;
这种方法会有以下特点:
- 只把attrB当作输入属性对待,所以只能用于当元素B有输入属性attrB时;若元素B没有输入属性attrB,则会报错;
- 会把value当作表达式进行计算,然后把表达式value的值绑定到attrB上,即使value不被引号包裹,也会把value当作表达式;
- 当把[attrB]=“value"的赋值操作去掉,只写[attrB]时,不会执行对attrB的赋值操作;
- 通过标签属性赋值语法:
<B attrB="value" ></B>
;这种方法会有以下特点:
- 分别把attrB当作各种匹配的特性对待;例如:当attrB可以作为标签的属性,又是一个指令,同时又是一个输入属性时,刚会分别对标签属性attrB和输入属性attrB进行赋值,并且使指令attrB生效;
- 会把等号“=”右边的”value”当作字符串赋值到attrB上,即使value不被引号包裹,也会把value当作纯字符串;
- 当把attrB=“value”的赋值操作去掉,只写attrB时,会对attrB的进行赋值,值为空字符串“”,即相当于:attrB="";
给Angular的输出属性赋值的实际意义:
假设:组件A的子组件B的输出属性是attrB;
则在组件A的模板中给子组件B的attrB输出属性赋值的方式为:(attrB)=“expression”,其中包裹attrB的圆括号是必须的,无论expression有没有被引号包裹,expression都会被当作是表达式,并且这个表达式是被放在Angular自动创建的回调函数的上下文中执行的,即expression被作为Angular自动创建的回调函数的代码执行的,并且这个回调函数拥有局部变量$event
($event
极有可能是该回调函数的参数),$event
是调用EventEmitter的实例方法emit时传入的参数,所以expression中可以引用$event
;
@ViewChild()装饰器:
- 当向@ViewChild()装饰器中传入一个类型Type时,被装饰的量引用的是类型Type的第一个子组件;
- 当向@ViewChild()装饰器中传入一个字符串时,被装饰的量引用的是字符串所对应的模版局部变量;
组件内容嵌入:
对于符合嵌入的内容则会被嵌入,不符合的内容会被从Dom树中移除;
Angular中三种指令的侧重点:
指令的作用是增强模板特性,间接地扩散模板语法;
各种指令的侧重点:
-
属性指令:扩展元素的属性,通常被用来改变元素的外观和行为;
-
结构指令:扩展元素的属性,用来改变DOM树的结构;
-
组件:扩展元素的标签,用来自定义标签;
最常用的属性型指令:
备注:
虽然指令常用来扩展属性,组件常用来扩展标签,但是它们的选择器的定义是任意的,所以,组件的选择器也可以定义成属性选择器,从而以属性的形式使用组件,指令的选择器也可以定义成标签选择器,从而以标签的形式使用指令;
性能优化方法:
-
缩小变化监测范围;
通过变化监测类ChangeDetectorRef的实例的markForCheck(): void方法标记变化监测的路径为根组件到该组件;
-
缩小变化监测时间;
通过变化监测类ChangeDetectorRef的实例的detach(): void 分离变化监测器,然后在适当的时机通过 detectChanges(): void 手动监测变化 或者 通过reattach(): void 再重新安装上变化监测器;
-
变化监测策略能用OnPush的不用Default;
-
模板中的表达式的计算量能少则少;因为Angular的变化监测机制,使得模板中的表达式执行频率很高;
-
尽量使用NgForTrackBy指令来替代NgFor指令;
服务
- providers配置选项是依赖注入操作的关键,它会为该组件创建一个注入器对象,并新建相应服务的实例存储到这个注入器里,当需要引入相应服务的实例时,通过TypeScript的类型匹配即可从注入器取出相应的服务实例对象;
- 服务的每一 次注入(也就是一使用providers声明),该服务都会被建出新的实例,组件的所有子组件均默认继承父组件的注入器对象,复用该注入器里存储的服务实例。这种机制可以保证服务以单例模式运行,除非某个子组件再次注入(即通过providers选项声明);
- 因为所有模块(这里指Angular应用级别的模块,并非ES6语言中的模块)都共享着同一个应用级别的根注入器,所以,当把服务注入到模块里时,该服务在整个应用里均能使用;
路由
路由的作用是建立URL路径和组件之间的对应关系,根据不同的URL路径匹配出相应的组件渲染;
Angular应用的引导启动
Angular通过引导运行根模块来启动应用,引导的方式有2种:
- 动态引导;
- 静态引导;
Angular应用运行之前,都需要经过编译器对模块、组件等进行编译,编译完成后才开始启动应用并渲染界面;
动态引导和静态引导的区别就在于编译的时机不同,动态引导是将所有代码加载到浏览器后,在浏览器进行编译;而静态引导是将编译过程前置到开发时的工程打包阶段;
由于静态引导应用时,整个应用已经被预先编译,所以编译器并不并不会被打包到项目代码,这使得代码包体积更小,加载更快,而且也省去了浏览器编译这个步骤,因此应用的启动速度也会更快;
动态引导开发流程简明了,适合在 小型项目 或者 大型应用的开发阶段 中使用,而静态引导需要在开发阶段加入预编译流程,稍显复杂但性能提升明显,推荐使用;
模板
- 模板中的script标签会被忽略;
- html、body、base等标签在模板中是无用的;
模板表达式
模板表达式是指在模板中使用的表达式;比如插值中的表达式、属性绑定中等号右边的表达式等等。
模板表达式产生一个值。 Angular 执行这个表达式,并把它赋值给绑定目标的属性,这个绑定目标可能是 HTML 元素、组件或指令。
很多 JavaScript 表达式也是合法的模板表达式,但不是全部。
JavaScript 中那些具有或可能引发副作用的表达式是被禁止的,包括:
- 赋值 (=, +=, -=, …)
- new运算符
- 使用;或,的链式表达式
- 自增或自减操作符 (++和–)
和 JavaScript语 法的其它显著不同包括:
- 不支持位运算|和&
- 具有新的模板表达式运算符,比如|、?.和!。
表达式上下文
典型的表达式上下文就是这个组件实例,它是各种绑定值的来源;
表达式中的上下文变量是由模板变量、指令的上下文变量(如果有)和组件的成员叠加而成的。 如果我们要引用的变量名存在于一个以上的命名空间中,那么,模板变量是最优先的,其次是指令的上下文变量,最后是组件的成员。
模板表达式不能引用全局命名空间中的任何东西,比如window或document。它们也不能调用console.log或Math.max。 它们只能引用表达式上下文中的成员。
表达式应该遵循下列指南:
- 没有可见的副作用
- 执行迅速
- 非常简单
- 幂等性 :在 Angular 的术语中,幂等的表达式应该总是返回完全相同的东西,直到某个依赖值发生改变。
模板语句
模板语句用来响应由绑定目标(如 HTML 元素、组件或指令)触发的事件。 模板语句将在事件绑定一节看到,它出现在=号右侧的引号中,就像这样:(event)="statement"
。
模板语句有副作用。 这是事件处理的关键。因为我们要根据用户的输入更新应用状态。
和模板表达式一样,模板语句使用的语言也像 JavaScript。 模板语句解析器和模板表达式解析器有所不同,特别之处在于它支持基本赋值 (=) 和表达式链 (;和,)。
然而,某些 JavaScript 语法仍然是不允许的:
语句上下文
和模板表达式中的上下文一样;
动画
Angular动画是基于标准的Web动画API(Web Animations API)构建的,它们在支持此API的浏览器中会用原生方式工作。
至于其它浏览器,就需要一个填充库(polyfill)了。你可以从这里获取web-animations.min.js,并把它加入你的页面中。
模块
Angular 应用是模块化的,并且 Angular 有自己的模块系统,它被称为 Angular 模块或 NgModules。
Angular 模块(无论是根模块还是特性模块)都是一个带有@NgModule装饰器的类;
NgModule是一个装饰器函数,它接收一个用来描述模块属性的元数据对象。其中最重要的属性是:
declarations
- 声明本模块中拥有的视图类。Angular 有三种视图类:组件、指令和管道。
exports
- declarations 的子集,可用于其它模块的组件模板。
imports
- 本模块声明的组件模板需要的类所在的其它模块。
providers
- 服务的创建者,并加入到全局服务列表中,可用于应用任何部分。
bootstrap
- 指定应用的主视图(称为根组件),它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。
每个 Angular 应用至少有一个模块(根模块);
根模块不需要导出任何东西,因为其它组件不需要导入根模块。
NgModules 和 JavaScript 模块的比较:
- NgModules是应用级别的模块,是以功能特性为划分依据;
- JavaScript中的模块是语言级别的模块,是以物理文件或者文件夹为划分依据;
组件
组件是一个带模板的指令;@Component装饰器实际上就是一个@Directive装饰器,只是扩展了一些面向模板的特性。
依赖注入
“依赖注入”是提供类的新实例的一种方式,还负责处理好类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。
Angular 通过查看构造函数的参数类型得知组件需要哪些服务。
当 Angular 创建组件时,会首先为组件所需的服务请求一个注入器 (injector)。
注入器是一个维护服务实例的容器,存放着以前创建的服务实例。 如果所请求的服务实例不在容器中,注入器就会新创建一个服务实例,并且添加到容器中,然后把这个服务返回给 Angular。 当所有请求的服务都被解析完并返回时,Angular 会把这些服务作为参数去调用组件的构造函数。 这就是依赖注入 。
如果注入器还没有HeroService,它怎么知道该如何创建一个呢?
简单点说,我们必须先用注入器(injector)为服务注册一个提供商(provider)。 提供商用来创建或返回服务实例,通常就是这个服务类本身的实例(相当于new 服务())。
需要记住的关于依赖注入的要点是:
- 依赖注入渗透在整个 Angular 框架中,被到处使用。
- 注入器 (injector) 是本机制的核心。
- 注入器负责维护一个容器,用于存放它创建过的服务实例。
- 注入器能使用提供商创建一个新的服务实例。
- 提供商是一个用于创建服务的配方。
- 把提供商注册到注入器。
编程思想
组件类应保持精简。组件本身不从服务器获得数据、不进行验证输入,也不直接往控制台写日志。 它们把这些任务委托给服务。
组件的任务就是提供用户体验,仅此而已。它介于视图(由模板渲染)和应用逻辑(通常包括模型的某些概念)之间。 设计良好的组件为数据绑定提供属性和方法,把其它琐事都委托给服务。