专栏首页Jerry的SAP技术分享Angular component的一个例子

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的原创文章,请关注公众号"汪子熙"

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SAP CRM Product simple search的启用步骤

    (1) Switch on business function CRM_SEARCH_1, which controls the business switch...

    Jerry Wang
  • 在SAPGUI的SE16事务码里直接查看类型为RAWSTRING的数据库表字段内容

    Sometimes you would like to view the content of field with RAWSTRING type for a ...

    Jerry Wang
  • Spartacussampledataaddon AddOn学习笔记

    link:https://sap.github.io/spartacus-docs/spartacussampledataaddon/#removing-unu...

    Jerry Wang
  • 使用Docker和热加载运行Go API

    This is a quick discussion of how to set up a local development environment for ...

    李海彬
  • 上传到App Store 含第三方支付被3.1.1被拒解决方案

    最近在做项目时,涉及用户付费。于是就找来了支付宝和微信支付的集成教程,按照要求分别开通各自开发平台的开发者账号和商户号。在后台加入了支付的支持,一步步的集成和测...

    jiang chen
  • 【Hive】Hive 的内置函数

    这篇文章主要介绍 Hive 的一些内置函数,其目的在于了解和知道大概有哪些内置函数,以及我们能够做哪些操作。

    阿泽 Crz
  • 【CodeForces 596A】E - 特别水的题5-Wilbur and Swimming Pool

    After making bad dives into swimming pools, Wilbur wants to build a swimming poo...

    饶文津
  • 2018-11-21

    This section comprises a glossary of all the keywords — grouped by category and ...

    Albert陈凯
  • 目标感知预测:学习建模的关键点(CS)

    在学习动态模型时结合规划和策略展示出能使人工智能在有限的监督下学习执行许多不同的任务的前景。然而,使用学习型正向动态模型的一个基本挑战是学习模型(未来状态重建)...

    N乳酸菌
  • SAP CRM Product simple search的启用步骤

    (1) Switch on business function CRM_SEARCH_1, which controls the business switch...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券