angular基础（一）

架构概述

Angular是用于在HTML和TypeScript中构建客户端应用程序的平台和框架。Angular是用TypeScript编写的。它将核心和可选功能实现为您导入应用程序的一组TypeScript库。

Angular应用程序的基本构建块是NgModules，它为组件提供编译上下文。NgModules将相关代码收集到功能集中; Angular应用程序由一组NgModules定义。应用程序始终至少具有启用引导的根模块，并且通常具有更多功能模块。

组件定义视图，这些视图是Angular可以选择的屏幕元素集，并根据您的程序逻辑和数据进行修改。

组件使用服务，这些服务提供与视图不直接相关的特定功能。服务提供者可以作为依赖项注入组件，使您的代码模块化，可重用和高效。

组件和服务都只是类，其中装饰器标记其类型并提供告知Angular如何使用它们的元数据。

组件类的元数据将其与定义视图的模板相关联。模板将普通HTML与Angular 指令和绑定标记相结合，允许Angular在呈现HTML之前修改HTML。

服务类的元数据提供了Angular需要的信息，以通过依赖注入（DI）使其可用于组件。

应用程序的组件通常定义许多视图，按层次排列。Angular提供的Router服务可帮助您定义视图之间的导航路径。路由器提供复杂的浏览器内导航功能。

模块

Angular NgModules与JavaScript（ES2015）模块不同并且互为补充。NgModule声明了一组专用于应用程序域，工作流或密切相关的功能组件的编译上下文。NgModule可以将其组件与相关代码（例如服务）相关联，以形成功能单元。

每个Angular应用程序都有一个常规命名的根模块，AppModule它提供启动应用程序的引导机制。应用程序通常包含许多功能模块。

与JavaScript模块一样，NgModules可以从其他NgModule导入功能，并允许其他NgModules导出和使用它们自己的功能。例如，要在应用程序中使用路由器服务，请导入RouterNgModule。

将代码组织到不同的功能模块中有助于管理复杂应用程序的开发以及可重用性的设计。此外，这种技术允许您利用延迟加载 - 即按需加载模块 - 以最大限度地减少启动时需要加载的代码量。

有关更详细的讨论，请参阅模块简介。

组件

每个Angular应用程序至少有一个组件，即将组件层次结构与页面文档对象模型（DOM）连接起来的根组件。每个组件定义一个包含应用程序数据和逻辑的类，并与定义要在目标环境中显示的视图的HTML 模板相关联。

所述装饰标识类正下方它作为一个组件，并且提供了模板和相关的特定于组件的元数据。@Component()

装饰器是修改JavaScript类的函数。Angular定义了许多将特定类型的元数据附加到类的装饰器，以便系统知道这些类的含义以及它们应该如何工作。

详细了解网络上的装饰器。

模板，指令和数据绑定

模板将HTML与Angular标记相结合，可以在显示HTML元素之前对其进行修改。模板指令提供程序逻辑，绑定标记连接应用程序数据和DOM。有两种类型的数据绑定：

通过事件绑定，您的应用可以通过更新应用程序数据来响应目标环境中的用户输入。

通过属性绑定，您可以将根据应用程序数据计算的值插入到HTML中。

在显示视图之前，Angular会根据您的程序数据和逻辑评估指令并解析模板中的绑定语法，以修改HTML元素和DOM。Angular支持双向数据绑定，这意味着DOM中的更改（例如用户选择）也会反映在程序数据中。

您的模板可以使用管道通过转换显示值来改善用户体验。例如，使用管道显示适合用户区域设置的日期和货币值。Angular为常见转换提供预定义管道，您还可以定义自己的管道。

有关这些概念的更详细讨论，请参阅组件简介。

服务和依赖注入

对于与特定视图无关的数据或逻辑，以及要跨组件共享的数据或逻辑，您可以创建服务类。服务类定义紧跟在装饰器之后。装饰器提供元数据，允许您将服务作为依赖项注入客户端组件。@Injectable()

依赖注入（DI）使您可以保持组件类的精简和高效。它们不从服务器获取数据，验证用户输入或直接登录到控制台; 他们将这些任务委托给服务。

有关更详细的讨论，请参阅服务和DI简介。

路由

Angular RouterNgModule提供的服务允许您在不同的应用程序状态之间定义导航路径并查看应用程序中的层次结构。它以熟悉的浏览器导航约定为蓝本：

在地址栏中输入URL，浏览器导航到相应的页面。

单击页面上的链接，浏览器将导航到新页面。

单击浏览器的后退和前进按钮，浏览器会在您看到的页面的历史记录中前后导航。

路由器将类似URL的路径映射到视图而不是页面。当用户执行操作（例如单击链接）以在浏览器中加载新页面时，路由器会拦截浏览器的行为，并显示或隐藏视图层次结构。

如果路由器确定当前应用程序状态需要特定功能，并且尚未加载定义它的模块，则路由器可以根据需要延迟加载模块。

路由器根据您应用的视图导航规则和数据状态解释链接URL。当用户单击按钮或从下拉框中选择或响应来自任何来源的其他刺激时，您可以导航到新视图。路由器在浏览器的历史记录中记录活动，因此后退和前进按钮也可以工作。

要定义导航规则，请将导航路径与组件相关联。路径使用类似URL的语法来集成您的程序数据，就像模板语法将您的视图与程序数据集成一样。然后，您可以应用程序逻辑来选择要显示或隐藏的视图，以响应用户输入和您自己的访问规则。

有关更详细的讨论，请参阅路由和导航。

什么是下一个

您已经学习了有关Angular应用程序的主要构建块的基础知识。下图显示了这些基本部分是如何相关的。

组件和模板一起定义Angular视图。

组件类上的装饰器添加元数据，包括指向关联模板的指针。

组件模板中的指令和绑定标记根据程序数据和逻辑修改视图。

依赖注入器为组件提供服务，例如允许您在视图之间定义导航的路由器服务。

以下几页将更详细地介绍这些主题中的每一个。

模块简介链接

Angular应用程序是模块化的，Angular有自己的模块化系统，称为NgModules。NgModules是专用于应用程序域，工作流或一组密切相关的功能的内聚代码块的容器。它们可以包含组件，服务提供程序和其他代码文件，其范围由包含NgModule定义。他们可以导入从其他NgModule导出的功能，并导出所选功能以供其他NgModule使用。

每个Angular应用程序至少有一个NgModule类，即根模块，它通常被命名AppModule并驻留在一个名为的文件中app.module.ts。您可以通过引导根NgModule来启动应用程序。

虽然一个小应用程序可能只有一个NgModule，但大多数应用程序都有更多的功能模块。应用程序的根 NgModule是如此命名的，因为它可以包含任何深度层次结构中的子NgModule。

NgModule元数据

NgModule由装饰的类定义。的装饰是一个函数，它的单一元数据对象，其属性描述该模块。最重要的属性如下。@NgModule()@NgModule()

declarations：属于此NgModule 的组件，指令和管道。

exports：应该在其他NgModules 的组件模板中可见和可用的声明子集。

imports：此 NgModule中声明的组件模板需要导出类的其他模块。

providers：这个NgModule为全球服务集合做出贡献的服务的创造者; 它们可以在应用程序的所有部分中访问。（您还可以在组件级别指定提供程序，这通常是首选。）

bootstrap：主应用程序视图，称为根组件，托管所有其他应用程序视图。只有根NgModule应该设置bootstrap属性。

这是一个简单的根NgModule定义。

content_copyimport { NgModule }      from '@angular/core';import { BrowserModule } from '@angular/platform-browser';@NgModule({   imports:      [ BrowserModule ],   providers:    [ Logger ],   declarations: [ AppComponent ],   exports:      [ AppComponent ],   bootstrap:    [ AppComponent ]})export class AppModule { }

这里包括 的export财产AppComponent是为了说明; 在这个例子中实际上并不需要。根NgModule没有理由导出任何东西，因为其他模块不需要导入根NgModule。

NgModules和组件

NgModules 为其组件提供编译上下文。根NgModule始终具有在引导期间创建的根组件，但任何NgModule都可以包含任意数量的其他组件，这些组件可以通过路由器加载或通过模板创建。属于NgModule的组件共享编译上下文。

组件及其模板一起定义视图。组件可以包含视图层次结构，允许您定义可以作为一个单元创建，修改和销毁的任意复杂的屏幕区域。视图层次结构可以混合在属于不同NgModule的组件中定义的视图。通常就是这种情况，特别是对于UI库。

创建组件时，它直接与单个视图关联，称为主机视图。主机视图可以是视图层次结构的根，它可以包含嵌入视图，嵌入视图又是其他组件的主机视图。这些组件可以在同一个NgModule中，也可以从其他NgModule导入。树中的视图可以嵌套到任何深度。

注意：视图的层次结构是Angular检测和响应DOM和app数据中的更改的关键因素。

NgModules和JavaScript模块

NgModule系统与用于管理JavaScript对象集合的JavaScript（ES2015）模块系统不同且无关。这些是互补模块系统，您可以一起使用来编写应用程序。

在JavaScript中，每个文件都是一个模块，文件中定义的所有对象都属于该模块。该模块通过用export关键字标记它们来声明某些对象是公共的。其他JavaScript模块使用import语句从其他模块访问公共对象。

content_copyimport { NgModule }     from '@angular/core';import { AppComponent } from './app.component';

content_copyexport class AppModule { }

了解有关Web模板系统的更多信息。

角度图书馆

Angular加载为JavaScript模块的集合。您可以将它们视为库模块。每个Angular库名称都以@angular前缀开头。使用npm包管理器安装它们，并使用JavaScript import语句导入它们的一部分。

例如，像这样Component从@angular/core库中导入Angular的装饰器。

content_copyimport { Component } from '@angular/core';

您还可以使用JavaScript import语句从Angular 库导入NgModule 。例如，以下代码BrowserModule从platform-browser库中导入NgModule 。

content_copyimport { BrowserModule } from '@angular/platform-browser';

在上面的简单根模块的示例中，应用程序模块需要来自内部的材料 BrowserModule。要访问该材料，请将其添加到此类元数据中。@NgModuleimports

content_copyimports:      [ BrowserModule ],

通过这种方式，你正在使用的角度和JavaScript模块系统一起。虽然很容易混淆两个系统，它们共享“导入”和“导出”的常用词汇，但您将熟悉使用它们的不同上下文。

从NgModules指南中了解更多信息。

组件简介

甲组件控制屏幕的补丁被称为视图。例如，各个组件定义并控制教程中的以下每个视图：

带有导航链接的app root。

英雄名单。

英雄编辑。

您可以定义组件的应用程序逻辑 - 它在类中支持视图的作用。该类通过属性和方法的API与视图交互。

例如，HeroListComponent有一个heroes包含英雄数组的属性。当用户单击以从该列表中选择英雄时，其selectHero()方法设置selectedHero属性。组件从服务获取英雄，该服务是构造函数上的TypeScript 参数属性。该服务通过依赖注入系统提供给组件。

content_copyexport class HeroListComponent implements OnInit {   heroes: Hero[];   selectedHero: Hero;   constructor(private service: HeroService) { }   ngOnInit() {     this.heroes = this.service.getHeroes();   }   selectHero(hero: Hero) { this.selectedHero = hero; }}

当用户在应用程序中移动时，Angular会创建，更新和销毁组件。您的应用可以通过可选的生命周期挂钩在此生命周期的每个时刻执行操作，例如ngOnInit()。

组件元数据

所述装饰标识类正下方它作为一个组件类，并指定其元数据。在下面的示例代码中，您可以看到它只是一个类，根本没有特殊的Angular表示法或语法。在将它标记为装饰器之前，它不是一个组件。@ComponentHeroListComponent@Component

组件的元数据告诉Angular从哪里获取创建它所需的主要构建块以及呈现组件及其视图。特别是，它将模板与组件相关联，可以直接使用内联代码，也可以通过引用。组件及其模板一起描述视图。

除了包含或指向模板之外，元数据还配置了例如如何在HTML中引用组件以及它需要哪些服务。@Component

这是一个基本元数据的例子HeroListComponent。

content_copy@Component({   selector:    'app-hero-list',   templateUrl: './hero-list.component.html',   providers:  [ HeroService ]})export class HeroListComponent implements OnInit {/* . . . */}

此示例显示了一些最有用的配置选项：@Component

selector：一个CSS选择器，它告诉Angular在模板HTML中找到相应标记的任何位置创建并插入此组件的实例。例如，如果应用程序的HTML包含，则Angular会HeroListComponent在这些标记之间插入视图实例。

templateUrl：此组件的HTML模板的模块相对地址。或者，您可以内联提供HTML模板，作为template属性的值。此模板定义组件的主机视图。

providers：组件所需服务的一组提供程序。在示例中，这告诉Angular如何提供HeroService组件构造函数用于获取要显示的英雄列表的实例。

模板和视图

您可以使用其随附模板定义组件的视图。模板是HTML的一种形式，它告诉Angular如何呈现组件。

视图通常按层次排列，允许您作为一个单元修改或显示和隐藏整个UI部分或页面。与组件直接关联的模板定义该组件的主机视图。该组件还可以定义视图层次结构，其中包含由其他组件托管的嵌入式视图。

视图层次结构可以包含来自同一NgModule中的组件的视图，但它也可以（并且经常）包含来自不同NgModule中定义的组件的视图。

模板语法

模板看起来像常规HTML，除了它还包含Angular 模板语法，它根据应用程序的逻辑以及app和DOM数据的状态改变HTML。您的模板可以使用数据绑定来协调应用程序和DOM数据，在显示数据之前转换数据的管道，以及将应用程序逻辑应用于显示内容的指令。

例如，这是教程的模板HeroListComponent。

content_copy

Hero List

Pick a hero from the list

       {{hero.name}}