白话Angular词汇

[deepthan]

预 (ahead-of-time, AoT) 编译

在打包项目的时候提前编译好应用，打包好之后可以直接启动，而不是把编译器打包在应用中用的时候再编译。生产环境使用。

即时 (just-in-time, JiT) 编译

浏览器中启动并编译所有的组件和模块，动态运行应用程序。开发过程中使用。

指令 (directive)

告诉Angular怎么创建或改变HTML 元素。
分为三类：

• 属性型指令
• 结构性指令
• 组件

属性型指令

监听或修改其它 HTML 元素、特性 (attribute)、属性 (property)、组件的行为的命令，通常用作修改 HTML 属性（样式等）。
如ngClass、ngStyle。

结构性指令

监听或者修改元素的结构，删除或者增加dom。如ngIf这个“条件化元素”指令，ngFor这个“重复器”指令。

组件 (component)

一个网页中一切皆可以视为组件。
一个按钮或者一个表格都可以是一个组件，其实组件就相当于汽车零件，一个零件由各种材料（html、css、js等构成），它只维护自身的逻辑。

封装桶

就是把一个组件的部分文件放在一个index.ts一起抛出去供别的地方引用。

├─login
│ ├─login.component.ts
│ ├─login.service.ts
│ ├─login.directive.ts
│ ├─ index.ts
...
index.ts里面引入 login.component.ts等文件

export * from './login.component.ts'; 
export * from './login.service.ts'; 

别的地方引用

import { loginComponent, LoginService } from '../login';

直接写组件的文件夹会默认寻找下面的index.ts

Angular 模块同样可以把组件、服务指令等放在一起抛出去。

注解 ？

实际上，是装饰 (decoration) 的同义词。

绑定（binding） ？

几乎都是指的数据绑定 (data binding) 和将 HTML 对象属性绑定到数据对象属性的行为。

有时也会指在“令牌”（也称为键）和依赖提供商 (provider) 之间的依赖注入 (dependency injection) 绑定。 这种用法很少，而且一般都会在上下文中写清楚。

数据绑定（data binding）

把后台数据展示出来，把用户操作转换为数据获取到。

启动/引导 (bootstrap) ？

You launch an Angular application by "bootstrapping" it using the application root NgModule (AppModule).

通过应用程序根 Angular 模块来启动 Angular 应用程序。 启动过程标识应用的顶级“根”组件 (component)，也就是应用加载的第一个组件。 更多信息，见设置。

你可以在同一个index.html中引导多个应用，每个应用都有它自己的顶级根组件。

驼峰式命名法 (camelCase)

首字母小写，其他字母或缩写首字母大写。又叫小写驼峰式命名法 (lower camel case) 。
函数、属性和方法命名一般用在这个写法。

Pascal 命名法 (PascalCase)

每个单词或缩写都以大写开头，也称大写驼峰式命名法。
类名一般用这个写法。

中线命名法 (dash-case)

使用中线 (-) 分隔每个单词，也称为烤串命名法 kebab-case。
指令的选择器（例如my-app）和文件名（例如hero-list.component.ts）通常是用中线命名法来命名。

蛇形命名法

在多个词之间用下划线(_)分隔。也叫下划线命名法。

装饰器（decorator | decoration）

用一个不恰当的词语：人模狗样。
其实就是把一个未知的东西打扮一下让Angular知道它是什么。
@component告诉Angular它是组件，@input告诉Angular它是输入数据，@Injectable告诉Angular它是服务。

依赖注入（dependency injection）

需要的东西（依赖）直接从提供者（providers）那里拿过来用，不需要就不带提供者玩。

注入器 (injector) ？

Angular 依赖注入系统 (Dependency Injection System)中的一个对象， 它可以在自己的缓存中找到一个命名的“依赖”或者利用已注册的提供商 (provider) 创建这样一个依赖。

提供商 (provider) ?

依赖注入系统依靠提供商来创建依赖的实例。 它把一个查找令牌和代码（有时也叫“配方”）关联到一起，以便创建依赖值。

ECMAScript 语言

JavaScript统称，有多个JavaScript版本。最新批准的 JavaScript 版本是ECMAScript 2016（也称“ES2016”或“ES7”）。

ECMAScript 2015

简写： ES6 语言
缩写： ES2015 语言

ES5 语言

“ECMAScript 5”的简写，大部分现代浏览器使用的 JavaScript 版本。

输入属性(input)

别的组件传过来的数据，数据值会从模板表达式等号右侧的数据源流入这个属性 。它和输出属性一般用作父子组件传递信息。
别人（父组件）眼里的我：

// 等号右侧往左侧流入
<me [receiver]='别的传来的'></me>

其实我(子组件)是这样的

@Component({
  selector: 'me'
  ...
})
..
@input()  receiver : string;

ngOnChanges(){
    console.log("传过来的数据",this.receiver); // 打印出来‘别的传来的’
}

输出属性

通过触发父组件的事件进行传递数据。
事件流从这个属性流出到模板表达式等号的右边的接收者。
子组件ts

@Output() sendHero: EventEmitter<any> = new EventEmitter();

ngOnInit() {
    this.sendHero.emit('timo');
}

父组件：

html:
<me (sendHero)="getHero($event)"></me>
ts:
getHero(hero ：string){
   console.log("传递过来的是哪个召唤师",hero); //传递过来的是提莫
}

插值表达式 (interpolation)

把变量插入html中。
ts：

public me = '万年青桐五';

html:

<div>我是{{me}},求带飞。</div> // 我是万年青桐五，求带飞。

生命周期钩子 (lifecycle hook)

不同时候可以做什么事情。比如20分钟才可以打大龙。

• ngOnChanges - 在输入属性 (input)/输出属性 (output)的绑定值发生变化时调用。
• ngOnInit - 在第一次ngOnChanges完成后调用。
• ngDoCheck - 开发者自定义变更检测。
• ngAfterContentInit - 在组件内容初始化后调用。
• ngAfterContentChecked - 在组件内容每次检查后调用。
• ngAfterViewInit - 在组件视图初始化后调用。
• ngAfterViewChecked - 在组件视图每次检查后调用。
• ngOnDestroy - 在指令销毁前调用。

模块 (module)

模块是一个内聚的代码块，具有单一用途。就像前端和后端是两个模块，如果想要交流的话通过接口（Angular里面是引用）。

可观察对象 (observable)

在接口请求的时候会用到，将异步数据转化为数据流，自身也可以生成一些自定义的数据流。它是引自的RxJS(Reactive Extensions for JavaScript)，一个第三方包。

管道

一个可以把米做成米饭的函数，管道起到一个转换的作用。
Angular内置一些管道：DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe和PercentPipe。
也可以自定义管道。
如：
假设

ts:
birthday = 1510156800000;
html:
<p> {{ birthday | date:"yy/MM/dd" }} </p>
转换后：
<p> 2017/11/9 </p>

响应式表单 (reactive forms) ?

通过组件中代码构建 Angular 表单的一种技术。 另一种技术是模板驱动表单。
构建响应式表单时：

• 组件是“真理之源”。表单验证在组件代码中定义。
• 在组件类中，使用new FormControl()或者FormBuilder显性地创建每个控件。
• 模板中的input元素不使用ngModel。
• 相关联的 Angular 指令全部以Form开头，例如FormGroup、FormControl和FormControlName。

动态表单非常强大、灵活，它在复杂数据输入的场景下尤其好用，例如动态的生成表单控制器。

路由器 (router)

通过配置不同的路由，加载不同的组件或模块，组合成不同的页面。

路由组件 (routing component)

一个带有路由插座 ( RouterOutlet ) 的 Angular 组件。
那什么是路由插座？其实可以理解为我们平时用的插排，每个孔都是一个路由，插上这个孔的电器是路由对应的组件。这个插座加上插上的电器才是我们想要的组件。

路由插座怎么用？里面的过程是什么样的？看下面。
文件形如：
├─list
│ ├─list.component.ts
│ ├─list.routes.ts
│ ├─lol
│ │ ├─ lol.component.ts // 里面包含了html,css等

list.component.ts

@Component({
  ..
  template: '
    <h1>拥有路由插座的组件</h1>
    <router-outlet></router-outlet>
  '
})

list.routes.ts

import { ListComponent } from './list.component';
import { LolComponent } from './lol/lol.component';

export const listRoutes = [{
     path: 'list',
        component: ListComponent,
        children: [
            {
                path: 'lol', 
                component: LolComponent
            }
}]

首先是匹配到list路由，这时候发现list的html里面有路由插座（router-outlet），就去找子路由，根据子路由把对应的组件插入到路由插座的位置。

范围化包 (scoped package)

是指Angular的框架源码，它根据不同功能分成不同模块的包，每个包都有一定的作用范围。以@angular开头。

• @angular/core：核心模块，包含变化监测、依赖注入、渲染等核心功能的代码；
• @angular/common：通用模块，包含一些常用的内置指令的代码；
• @angular/compiler：编译相关功能；
• @angular/platform-browser 和 @angular/platform-browser-dynamic 是跟平台相关的，这两个模块支持 Angular应用运行在浏览器里，对应的还有 @angular/platform-server，用于服务器端渲染；
• @angular/forms： 引入表单相关；
• @angular/http： 网络请求相关；
• @angular/router ： 路由相关；
• @angular/animations： 动画相关。

分成模块的好处是不用的话就不需要引入这个包，比如我不写动画就不用引入@angular/animations这个包。
题外话：和本主题无关的其他几个包的作用：

• core-js： 它是一个polyfill（填充库：不同的浏览器对Web标准的支持程度也不同，填充库（polyfill）能帮我们把这些不同点进行标准化 ），用于兼容一些高级的语言特性以兼容更多浏览器平台。
• rxjs：用于解决异步和事件组合问题，多用于管理接口请求到的数据。
• zone.js： 用来帮助处理浏览器异步事件的工具库，Angular的变化检测机制基于这个库实现的，这是必须引入的。

服务 (service)

服务用于封装不与任何特定视图相关的数据和逻辑，或者用于在组件之间共享数据和逻辑。一般用于接口请求或传递数据。

模板 (template)

其实就是个html

@Component({
  template: `<div>其实就是个html</div>`
})

模板表达式 (template expression)

html里面的表达式。Angular会 执行这个表达式得到值，并把它赋值给绑定目标的属性，这个绑定目标可能是 HTML 元素、组件或指令。

<div [property]="1+1"></div>

转译（transpile)

把一种形式的 JavaScript（例如 TypeScript）转换成另一种形式的 JavaScript（例如 ES5）的过程。

视图 (view)

视图是屏幕中一小块，用来显示信息并响应用户动作，例如点击、移动鼠标和按键。

[wkylin]

范围化包 (scoped package) 这一块：前面是不是少些内容呢？？^_^