Angular2结构图
八大模块@H_403_3@
模块 (module)
组件 (component)
模板 (template)
元数据 (Metadata)
数据绑定 (data binding)
指令 (directive)
服务 (service)
依赖注入 (dependency injection)
模块@H_403_3@
Angular 应用是模块化的,并且 Angular 有自己的模块系统,它被称为 Angular 模块或 NgModules。
每个 Angular 应用至少有一个模块(根模块),习惯上命名为AppModule。
根模块在一些小型应用中可能是唯一的模块,大多数应用会有很多特性模块,每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。
Angular 模块(无论是根模块还是特性模块)都是一个带有@NgModule装饰器的类。.l-sub-section
装饰器是用来修饰 JavaScript 类的函数。 Angular 有很多装饰器,它们负责把元数据附加到类上,以了解那些类的设计意图以及它们应如何工作。 NgModule是一个装饰器函数,它接收一个用来描述模块属性的元数据对象。其中最重要的属性是
// 导入Angular的系统模块库 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; // 导入自定义组件 import { AppComponent } from './app.component'; @NgModule({ // 声明本模块中拥有的视图类。 Angular 有三种视图类:组件、指令和管道 declarations: [ AppComponent ],// declarations 的子集,可用于其它模块的组件模板。 exports: [],// 本模块声明的组件模板需要的类所在的其它模块 imports: [ BrowserModule,FormsModule,HttpModule ],// 服务的创建者,并加入到全局服务列表中,可用于应用任何部分 providers: [],// 指定应用的主视图(称为根组件),它是所有其它视图的宿主。只有根模块才能设置bootstrap属性 bootstrap: [AppComponent] }) export class AppModule { }
组件@H_403_3@
组件负责控制屏幕上的一小块区域,我们称之为视图。
利用angular-cli创建一个HeroListComponent组件
ng g component HeroListComponent
import { Component } from '@angular/core'; //Component装饰器 @Component({ // 选择器,页面中的标签 selector: 'app-root',// 指定模板 templateUrl: './app.component.html',// 指定样式 styleUrls: ['./app.component.css'] }) export class AppComponent { // 标题属性 title = 'app works!'; }
模板@H_403_3@
我们通过组件的自带的模板来定义组件视图。模板以 HTML 形式存在,告诉 Angular 如何渲染组件。
多数情况下,模板看起来很像标准 HTML,当然也有一点不同的地方。
<h1> {{title}} </h1>
元数据(装饰器)@H_403_3@
元数据告诉 Angular 如何处理一个类.在TypeScript 中,我们用装饰器 (decorator) 来附加元数据. @Component装饰器能接受一个配置对象, Angular 会基于这些信息创建和展示组件及其视图。
@Component的配置项包括: moduleId: 为与模块相关的 URL(例如templateUrl)提供基地址。
selector: CSS 选择器,它告诉 Angular 在父级 HTML 中查找
templateUrl:组件 HTML 模板的模块相对地址,如前所示。
providers: 组件所需服务的依赖注入提供商数组。
@Component里面的元数据会告诉 Angular 从哪里获取你为组件指定的主要的构建块。
模板、元数据和组件共同描绘出这个视图。
其它元数据装饰器用类似的方式来指导 Angular 的行为。 例如@Injectable、@Input和@Output等是一些最常用的装饰器。
数据绑定@H_403_3@
数据绑定的语法有四种形式。每种形式都有一个方向 —— 绑定到 DOM 、绑定自 DOM 以及双向绑定。
指令@H_403_3@
Angular 模板是动态的。当 Angular 渲染它们时,它会根据指令提供的操作对 DOM 进行转换。
组件是一个带模板的指令;@Component装饰器实际上就是一个@Directive装饰器,只是扩展了一些面向模板的特性。 还有两种其它类型的指令:结构型指令和属性 (attribute) 型指令。
它们往往像属性 (attribute) 一样出现在元素标签中, 偶尔会以名字的形式出现,但多数时候还是作为赋值目标或绑定目标出现。
结构型指令通过在 DOM 中添加、移除和替换元素来修改布局。
服务@H_403_3@
几乎任何东西都可以是一个服务。 典型的服务是一个类,具有专注的、明确的用途。它应该做一件特定的事情,并把它做好。
例如: 日志服务 数据服务 消息总线 税款计算器 应用程序配置 服务没有什么特别属于 Angular 的特性。 Angular 对于服务也没有什么定义。 它甚至都没有定义服务的基类,也没有地方注册一个服务。
即便如此,服务仍然是任何 Angular 应用的基础。组件就是最大的服务消费者。
依赖注入(DI,IOC)@H_403_3@
这个要是学过java的,基本都很熟悉这个概念 “依赖注入”是提供类的新实例的一种方式,还负责处理好类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。 当 Angular 创建组件时,会首先为组件所需的服务请求一个注入器 (injector)。
注入器维护了一个服务实例的容器,存放着以前创建的实例。 如果所请求的服务实例不在容器中,注入器就会创建一个服务实例,并且添加到容器中,然后把这个服务返回给 Angular。 当所有请求的服务都被解析完并返回时,Angular 会以这些服务为参数去调用组件的构造函数。 这就是依赖注入 。