1. ahead-of-time , just-in-time
- 预编译: ahead-of-time compilation AOT compilation
- 即时编译: just-in-time compilation, JIT
Angular 的预编译器在浏览器下载和运行Angular的HTML 代码和Typescript 代码之前,就先将其转换成了高效的JavaScript 代码。对于生产环境,这是最好的编译模式。与即时编译相比,它能节省加载时间,提高性能。
使用命令行工具ngc 编译应用之后,你能直接启动一个模块工厂,即你不必再在Javacript 打包文件中包含Angular 编译器。
2. app-shell
App shell is a way to render a portion of your application via a route at build time.
This gives users a meaningful first paint of your application that appears quickly because the browser can render static HTML and CSS without the need to initialize JavaScript.
- app-shell 一种通过路由渲染部分应用的方式。
- 原因: 浏览器在初始化脚本(javascript)之前先渲染出静态的HTML 和CSS。
- 原理: app-shell 可以在浏览器下载完整版应用之前,先快速启动一个静态渲染页面(所有页面的公共骨架)来增强用户体验,等代码加载完毕后再自动切换到完整版。
3. 数据绑定 (data binding)
数据绑定可以让应用程序将数据展示给用户,并 对用户的操作(点击、触屏、按键)做出回应。
A process that allows apps to display data values to a user and respond to user actions(such as clicks, touches, and keystrokes)
在数据绑定机制下,你只要声明一下 HTML 部件和数据源之间的关系,把细节交给框架去处理。
而以前的手动操作过程是:将数据推送到 HTML 页面中、添加事件监听器、从屏幕获取变化后的数据,并更新应用中的值。
In data binding, you declare the relationship between an HTML widget and a data source and let the framework handle the details. Data binding is an alternative to manually pushing application data values into HTML , attaching event listeners, pulling changed values from the screen, and updating application data values.
4. 依赖注入 / dependency injection
A design pattern and mechanism for creating and delivering some parts of an application(dependencies) to other parts of an application that require them.
In Angular, dependencies are typically services, but they also can be values, such as strings or functions.
An injector for an app (created automatically during bootstrap instantiates dependencies when needed), using a configured provider of the service or value.
依赖注入既是设计模式,又是一种机制: 当应用程序的一些部件(即一些依赖)需要另一些部件时,利用依赖注入来创建被请求的部件,并将它们注入到需要它们的部件中。
在 Angular 中,依赖通常是服务,但是也可以是值,比如字符串或函数。应用的注入器injector(它是在启动期间自动创建的)会使用该服务或值的配置好的提供商provider来按需实例化这些依赖。各个不同的提供商可以为同一个服务提供不同的实现。
5. DI Token 令牌
A lookup token associated with a dependency provider, for use with the dependency injection system.
一种查询令牌,与依赖供应商有关,用于有依赖注入系统中。
6. Directive 指令
A class that can modify the structure of the DOM or modify attributes in the DOM and component data model.
A directive class definition is immediately preceded by a @Directive() decorator that supplies metadata.
一个class 类, 能修改DOM 结构,修改DOM 属性,数据模型组件属性。
指令类定义紧跟在@Directive() 装饰器之后,以提供元数据。
7. Observable / Observer
1. Observable
A producer of multiple values, which it pushes to subscribers.
Used for asynchronous event handling throughout Angular. You execute an observable by subscribing to it with its subscribe() method, passing callbacks for notifications of new values, errors, or completion.
1. 可观察对象
- 一个多值生成器,会把这些值推送给订阅者。
- Angular 中用于异步事件处理。
- 你要通过调用可观察对象的subscribe() 方法来订阅它,从而让这个可观察对象得以执行,你还需要给该方法传入一些回调函数来接收 新值、错误、完成等通知。
- 可观察对象可以把任意类型的一个或多个值传给订阅者,无论是同步(就像函数把值返回给它的调用者一样)还是异步。 订阅者会在生成了新值时收到包含这个新值的通知,以及正常结束或错误结束时的通知。
2. Observer
An object passed to the subscribe() method for an observable. The object defines the callbacks for the subscriber.
2. 观察者
传给observable 的subscribe() 方法的一个对象,并为订阅者定义了回调函数。
8. provider
An object that implements one of the Provider interfaces. A provider object defines how to obtain an injectable dependency associated with a DI token. An injector uses the provider to create a new instance of a dependency for a class that requires it.
Angular registers its own providers with every injector, for services that Angular defines.
You can register your own providers for services that your app needs.
9. reactive forms and template-driven forms
- reactive forms
A framework for building Angular forms through code in a component.
When using reactive forms:
- The 'source of truth' , the form model, is defined in the component class.
- Validation is set up through validation functions rather than validation directives
- Each control is explicitly created in the component class by creating a FormControl instance manually or with FormBuilder.
- The template input elements do not use ngModel.
- The associated Angular directives are prefixed with form, such as formControl, formGroup, and formControlName.
- template-driven forms
A format for building Angular forms using HTML forms and input elements in the view.
When using template-driven forms:
- The "source of truth" is the template. The validation is defined using attributes on the individual input elements.
- Two-way binding with ngModul keeps the component model synchronized with the user's entry into the input elements.
- Behind the scenes, Angular creates a new control for each input element, provided you have set up a name attribute and two-way binding for each input.
- The associated Angular directives are prefixed with ng such as ngForm, ngModel, and ngModelGroup
10. ActivatedRoute
The ActivatedRoute is specific to each routed component loaded by the Angular Router. It contains information about the route, its parameters, and additional data associated with the route.
网友评论