Angular 2 架构.pdfVIP

Angular 2 架构 在本章中，我们将讨论Angular 2框架的架构风格，以实现⽤户应⽤程序。 以下 daigram显⽰了Angular 2的架构: Angular 2的架构包含以下 块: Module Component Template Metadata Data Binding Service Directive Dependency Injection 模块 块组件的特征在于可以⽤于执⾏单个任务的代码块。 您可以从代码(如类) 中导出值 的值。 Angular应⽤程序被称为 块，并使⽤许多 块构建您的应⽤程序。 Angular 2 的基本构建块是可以从 块导出的组件类。 某些应⽤程序的组件类名称为 App Comp onent ，您可以在名为 app .comp onent.ts 的⽂件 中找到它。 使⽤ exp ort 语句从 块中导出组件类，如下所⽰: export class AppComponent { } exp ort 语句指定它是⼀个 块，它的 App Comp onent 类定义为public ，并且可以被应⽤ 程序的其他 块访问。 组件 组件是具有 板的控制器类，主要处理页⾯上的应⽤程序和逻辑的视图。 它是⼀个可 以在整个应⽤程序中使⽤的代码。 组件知道如何呈现⾃⼰和配置依赖注⼊。 您可以 使⽤组件内联样式，样式⽹址和 板内联样式将CSS样式与组件相关联。 要注册组件，我们使⽤ @Comp onent 注释，可以将应⽤程序拆分为更⼩的部分。 每个 DOM元素只有⼀个组件。 模板 组件的视图可以通过使⽤ 板来定义，该 板告诉Angular如何显⽰组件。 例如，下 ⾯的简单 板显⽰如何显⽰名称: div Your name is : {{name}} /div 要显⽰该值，可以在插值⼤括号中放置 板表达式。 元数据 元数据是处理类的⼀种⽅式。 考虑我们有⼀个称为 MyComp onent 的组件，它将是⼀ 个类，直到我们告诉Angular它是⼀个组件。 您可以使⽤元数据来告诉Angular MyComp onent 是⼀个组件。 元数据可以使⽤装饰器附加到TypeScript 。 例如: @Component({ selector : mylist, template : 2Name is Harry/ 2 directives : [MyComponentDetails] }) export class ListComponent{...} @Comp onent 是⼀个装饰器，它使⽤配置对象来创建组件及其视图。 selector 创建组 件的实例，其中它找到 mylist ⽗HTM 中的标记。 板告诉Angular如何显⽰组 件。 指令装饰器⽤于表⽰组件或指令的数组。 数据绑定 数据绑定是通过声明源和⽬标HTM 元素之间的绑定来协调应⽤程序数据值的过程。 它将 板部分与组件部分和 板HTM 组合，使⽤标记绑定以连接两侧。 有四种类型 的数据绑定: 插值:它显⽰div标签中的组件值。 属性绑定:将属性从⽗级属性传递给⼦级的属性。 事件绑定:当您单击组件⽅法名称时触发。 双向绑定:此表单通过使⽤ ngModel 指令在单个符号中绑定属性和事件。 服务 服务是仅负责执⾏特定任务的JavaScript函数。 ⾓度服务使⽤依赖注⼊机制注⼊。 服 务包括应⽤程序所需的值，功能或功能。 ⼀般来说，服务是⼀个类，它可以执⾏某些 特定的事情，如⽇志服务，数据服务，消息服务，应⽤程序的配置等。在Angular 中没 有什么关于服务，并且没有ServiceBase类，但仍然服务可以被视为 基本的⾓度应⽤。 指⽰ 该伪指令是表⽰元数据的类。 有三种类型的指令: 组件指令:它使⽤视图和控制器创建⾃定义控制器，并⽤作⾃定义HTM 元素。 装饰指令:它使⽤额外的⾏为装饰元素。 模板指令:它将HTM 转换为可重⽤的 板。 依赖注⼊ 依赖注⼊是⼀种将对象作为应⽤程序中不同组件中的依赖关系传递的设计 式。 它创 建⼀个新的类的实例及其所需的依赖项。 使⽤依赖注⼊时，必须记住以下⼏点: