Angular 5.x 系列教程笔记（二）——架构分析 (转)

最新推荐文章于 2022-07-05 16:56:40 发布

零零零jiawei

最新推荐文章于 2022-07-05 16:56:40 发布

阅读量301

点赞数

分类专栏： Angular

Angular 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Angular5.x架构的关键组成部分，包括模块、组件、模板、元数据、数据绑定、指令、服务和依赖注入等内容，帮助读者理解Angular5.x的设计理念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

Angular 2.x 4.x 5.x 的逐个版本，遵循了模块化的思想，架构以及应用，相对于1.x的版本有了很大的改进，从项目中的使用来看，有很大的提升，今天我们就来看一下Angular 5.x架构的精髓所在。

主要的构造块

Angular整体来讲我们主要会学习到八个主要的构造块，分别为模块，组件，模板，元数据，数据绑定，指令，服务，依赖注入，下面逐个来解释一下：

模块

对于模块而言，整个应用至少存在一个根模块，模块是以@NgModule装饰器的一个类，比如如下代码：

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';

import { AppComponent }         from './app.component';
import { DashboardComponent }   from './dashboard.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroesComponent }      from './heroes.component';
import { HeroService }          from './hero.service';

import { AppRoutingModule }     from './app-routing.module';

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

于此同时，Angular 提供了一组 JavaScript 模块，我们可以把它们看做库模块，并且每个 Angular 库的名字都带有@angular前缀，使用起来也比较方便，更加直观。

组件

组件就是定义的一个通用类，通过一些由属性和方法组成的 API 控制部分可以重用的视图，例如下代码：

export 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中模板以 HTML 形式存在，目的是告诉 Angular 如何渲染组件，如果编写过HTML , CSS，处理这个模块相当容易，除了普通的html属性之外，还有一些特殊的属性，比如使用其它元素。例如，像*ngFor、{{hero.name}}、(click)、[hero]等，都是Angular特有的属性，只有Angular框架可以识别。

<h2>Hero List</h2>

<p><i>Pick a hero from the list</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>

<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>

元数据

所谓的元数据，元数据告诉 Angular 如何处理一个类，常用的有@Component，其里面的元数据会告诉 Angular 从哪里获取你为组件指定的主要的构建块。

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <nav>
      <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['./app.component.css'],
})

数据绑定

用过Angular 1.x的同学，一定清晰的记得，Angular1.x 包括，双向数据绑定，单向数据绑定，还有一次性数据绑定。
那么在Angular 2.x + 中，主要有以下几种形式：

属性绑定和插值表达式组件类-> 模板
事件绑定：模板 -> 组件类
双向绑定：模板 <-> 组件类

<li>{{hero.name}}</li>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
<li (click)="selectHero(hero)"></li>

<input [(ngModel)]="hero.name">

在官方网站学习过程中，我们看到以上几种方式，尤为注意的在双向数据绑定中，使用ngmodel，需要额外引入模块

import { FormsModule }    from '@angular/forms';

指令

指令这个概念在1.x 版本尤为突出，也是1.x版本的一个重大的亮点和优势，在2.x + 的版本中，组件其实就是一个带模板的指令；
@Component装饰器实际上就是一个@Directive装饰器，只是扩展了一些面向模板的特性而已。

服务

服务即为Service, Factory，哈哈这是1.x的概念，其实组件类应保持精简，而且组件本身不从服务器获得数据、不进行验证输入，也不直接往控制台写日志。那么这一切改如何处理呢，它们把这些任务委托给服务。在2.x 中，我们使用ts定义服务，并且注入，使用更为方便，如下就是我们练习缩写的HeroService:

export class HeroService {
  private heroes: Hero[] = [];

  constructor(
    private backend: BackendService,
    private logger: Logger) { }

  getHeroes() {
    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
      this.logger.log(`Fetched ${heroes.length} heroes.`);
      this.heroes.push(...heroes); // fill cache
    });
    return this.heroes;
  }
}

依赖注入

依赖注入不是什么新鲜的概念，如果学过Java 三大框架，一定会有所了解Spring的应用原理，但是JS框架中，这是一个比较新的尝试，其中Angular 使用依赖注入来提供新组件以及组件所需的服务。

import { Injectable } from '@angular/core';

@Injectable()
export class HeroService {

}

Angular 通过查看构造函数的参数类型得知组件需要哪些服务，当 Angular 创建组件时，会首先为组件所需的服务请求一个注入器 (injector)。

constructor(private service: HeroService) { }

以上转自: https://blog.youkuaiyun.com/jiangbo_phd/article/details/78977015