位置：情诗网 >情话句子 > 表白情话 >白话Angular词汇

白话Angular词汇

2020-11-27 15:30 | 发布:情诗网 | 分类:表白情话

预 (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分钟才可以打大龙。

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)

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

本站以现代、古代情诗为主，情诗网创办于2013年，以原创爱情诗歌、经典情诗、现代情诗、古代情诗、英文情诗、情诗绝句为主并收集古诗、古诗词、诗歌大全、诗词名句的文学门户。方便您下次继续阅读；可以放在浏览器的收藏夹中（快捷键Ctrl+D）;或者看到喜欢或者有趣的诗词可以通过分享按钮给你的好友分享；情诗网是目前最全情诗大全网站之一。并欢迎广大诗歌爱好者阅览投稿！喜欢本站的话请大家把本站告诉给你朋友哦！地址是 www.qingshiwang.com ！

本文标题:白话Angular词汇
本文地址:http://www.qingshiwang.com/qinghua/8936.html

原创情诗