情诗网 >表白情话 > 正文

导航

原创

古典

现代

英文

名句

绝句

诗歌

诗库

诗集

唐诗

宋词

对联

情书

简史

名联

百话

新闻

更多

白话Angular词汇

来源：情诗网    2020-11-27    分类：表白情话

预 (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 模块同样可以把组件、服务指令等放在一起抛出去。

数据绑定（data binding）

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

驼峰式命名法 (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分钟才可以打大龙。

模块 (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 表单的一种技术。 另一种技术是模板驱动表单。
构建响应式表单时：

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

路由器 (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/animations这个包。
题外话：和本主题无关的其他几个包的作用：

服务 (service)

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

模板 (template)

其实就是个html

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

模板表达式 (template expression)

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

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

转译（transpile)

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

视图 (view)

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

热门文章