0%

angular2 架构解读

Posted on Edited on In Views: Valine:
Symbols count in article: 2.3k Reading time ≈ 2 mins.

angular应用：

用angular扩展语法编写html模板，用组件类管理这些模板，用服务添加应用逻辑，用模块打包发布组件和服务。

通过引导模块来启动应用，angular在浏览器中接管、展现应用的内容，并根据提供的指令响应用户的交互。

模块

angular是模块化的。

每个angular应用至少有一个模块（根模块），习惯上命名为AppModule。一些小型应用里面可能只会有一个根模块，大多数应用里会有多个特性模块，每个特性模块都是一个内聚的代码块，专注于某个应用领域、工作流或紧密相关的功能。

angular模块，无论是根模块还是特性模块，都是一个带有@NgModule装饰器的类。

装饰器是用来修饰JavaScript类的函数，angular有很多装饰器，负责把元数据附加到类上，以了解那些类的设计意图以及他们如何工作。

@NgModule是一个装饰器函数，用来描述模块属性的元数据对象，重要的属性有：

  • declarations 声明本模块中拥有的视图类，angular有三种视图类：组件、指令、管道。
  • exports declarations的子集，可用于其他模块的组件模板。等于把自己导出以方便在其他模块中使用
  • imports 本模块声明的组件模板需要的类所在的模块。
  • provides 服务的创建者，并加入到全局服务列表中，可用于应用的任何部分。
  • bootstrap 指定应用的主视图（根组件），是所有其他视图的宿主，只有根模块才能设置bootstrap属性

一个根模块：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

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

组件

组件是视图和应用逻辑的桥梁。组件通过一些由属性和方法组成的api与视图交互。在类中定义组件的应用逻辑，为视图提供支持

创建一个HeroList组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hero-list',
  templateUrl: './hero-list.component.html',
  styleUrls: ['./hero-list.component.less']
})
export class HeroListComponent implements OnInit {
  Hero: String;

  constructor() {}

  ngOnInit() {
    this.Hero = 'tony';
  }

  selectHero (Hero: String) {
    return Hero;
  }
}

angular会创建、更新、销毁组件，应用可以根据生命周期钩子在组件的生命周期各个点上加入自己的操作。比如上面的ngOnInit就是在组件创建的时候执行操作。

模板

模板以html的形式存在，告诉angular如何渲染组件。除过标准的html语法，angular还提供了模板语法，比如：ngIf， ngFor等。也可以加入自定义组件和指令。自定义组件和原生html可以很好的融合。

元数据

看上面的HeroList组件，里面其实主要的内容：export class HeroListComponent{}只是导出了HeroListComponent这个类，和angular无关，

我们需要告诉angular这是个组件。

而我们如何告诉angular这是个组件呢？我们需要把元数据附加给这个类。

我们使用装饰器（decorator）来附加元数据，上面我们用@Component这个装饰器把紧随其后的类标记为组件类。

@Component装饰器接受一个配置对象，angular依据这些信息创建和展示这个组件及其视图。@Component组件的配置项有：

  • selector css选择器，告诉angular在父级html中查找组件标签，然后插入该组件。
  • templateUrl 组件html模板的相对地址。
  • providers 组件所需服务的依赖注入提供商数组。也就是需要注入的服务数组。

这种架构处理的方式是：你向代码中提供元数据，告诉angular该怎么做。

参考资料：https://www.angular.cn/

码字辛苦，打赏个咖啡☕️可好？💘