阅读 1194

白话Angular词汇

预 (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)

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