Angular component的一个例子

官网：https://angular.io/guide/architecture-components

Before a view is displayed, Angular evaluates the directives and resolves the binding syntax in the template to modify the HTML elements and the DOM, according to your program data and logic. Angular supports two-way data binding, meaning that changes in the DOM, such as user choices, are also reflected in your program data.

view显示之前，Angular评估页面模板里的Angular指令，解析绑定信息，修改HTML元素和DOM. Angular支持双向绑定，这意味着发生在DOM上的修改，比如用户选择，也会自动反映到应用程序的数据中。

服务注入

A service class definition is immediately preceded by the @Injectable() decorator. The decorator provides the metadata that allows other providers to be injected as dependencies into your class.

Angular Service的定义通过装饰器@Injectable()来完成，提供了元数据，以便让其他provider通过依赖的方式注入。

Module

通过装饰器@NgModule()定义。一个例子：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

包含下列的部分：

• declarations: The components, directives, and pipes that belong to this NgModule.
• imports: Other modules whose exported classes are needed by component templates declared in this NgModule.
• exports: The subset of declarations that should be visible and usable in the component templates of other NgModules.

A root NgModule has no reason to export anything because other modules don’t need to import the root NgModule.

The components that belong to an NgModule share a compilation context.

NgModule和Component的关系是1：N关系，一对多。

In JavaScript each file is a module and all objects defined in the file belong to that module. The module declares some objects to be public by marking them with the export key word. Other JavaScript modules use import statements to access public objects from other modules.

每个JavaScript文件是一个module，所有定义在该文件里的对象都属于该module. Module使用export关键字将对象中的一部分声明为公有。JavaScript module使用import来导入其他module的公有对象。

Angular libraries

通过@angular前缀声明Angular libraries.

例子：For example, import Angular’s Component decorator from the @angular/core library like this.

import { Component } from ‘@angular/core’;

Component

看个例子：

• selector: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an app’s HTML contains , then Angular inserts an instance of the HeroListComponent view between those tags.

有点像SAP UI5的index.html里定义的place holder

• templateUrl: The module-relative address of this component’s HTML template. Alternatively, you can provide the HTML template inline, as the value of the template property. This template defines the component’s host view.

Angular模板里的数据绑定语法

记住这张图：

看个例子：

• {{hero.name}}: 将Component的hero.name property(属性值)显示到li标签里。
• [hero]: The [hero] property binding passes the value of selectedHero from the parent HeroListComponent to the hero property of the child HeroDetailComponent.

将selectedHero的值从HeroListComponent传递到HeroDetailComponent的hero属性去。

• (click): The (click) event binding calls the component’s selectHero method when the user clicks a hero’s name. 当用户点击hero的name时，调用component的selectHero方法。

双向绑定的语法：<input [(ngModel)]=“hero.name”>

Two-way data binding (used mainly in template-driven forms) combines property and event binding in a single notation.

In two-way binding, a data property value flows to the input box from the component as with property binding. The user’s changes also flow back to the component, resetting the property to the latest value, as with event binding.

Angular Directive

Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by directives. A directive is a class with a @Directive() decorator.

Angular template是动态的，当模板被渲染时，根据模板里包含的指令来转换DOM. 一个Angular directive就是一个被@Directive()修饰的class.

Structual directive

Structural directives alter layout by adding, removing, and replacing elements in the DOM.

Structure directive通过对DOM里的元素进行增加，删除和替换的操作来影响界面布局。

attribute directive

Attribute directives alter the appearance or behavior of an existing element. In templates they look like regular HTML attributes, hence the name.

影响一个已有element的外观或者行为，在Angular模板里看起来和普通的HTML属性类似，故得名。

Attribute directive的一个例子：The ngModel directive, which implements two-way data binding, is an example of an attribute directive. ngModel modifies the behavior of an existing element (typically ) by setting its display value property and responding to change events.

<input [(ngModel)]=“hero.name”>

要获取更多Jerry的原创文章，请关注公众号"汪子熙"