Angular 学习笔记

摘要

Angular 的学习笔记摘要。Angular 是以模块化、组件化的形式来组织应用的，因此，学习过程中需要不断思考 Angular 是如何组织不同的模块。这里需要区分清楚三个概念，模块是负责打包组件/服务的，组件是用来关联页面的，服务是用来封装重用逻辑的。

关键词：Angular 模板 组件 服务

一、什么是 Angular

Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。

Angular 支持数据双向绑定、模块化开发、依赖注入这些特性。

二、理解 Angular 的架构

首先 Angular 是以模块化、组件化的形式来组织应用的，因此，学习过程中需要不断思考 Angular 是如何组织不同的模块。

Angular 组件概念表

小结：这里需要区分清楚三个概念，模块是负责打包组件/服务的，组件是用来关联页面的，服务是用来封装重用逻辑的，后面将会分别介绍模块、组件和服务。

他们之间的关系图如下：

三、理解模块(NgModule)

Angular 应用是模块化的，它拥有自己的模块化系统，称作 NgModule。 一个 NgModule 就是一个容器，用于存放一些内聚的代码块，这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。

模块定义例子：

// 引用Angular自带的模块
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// 引入第三方模块/组件
import { AppComponent } from './app.component';
import { AppService }   from './app.service';
import  { AppRoutingModule } from './app-routing.module';

// 使用@NgModulw装饰的类为NgModule
@NgModule(...)
export class AppModule {}

1. @NgModule 元数据

@NgModulw 装饰的类为 NgModule，其重要属性如下：

2. NgModule 和组件的关系

NgModule 可以包含任意数量的其它组件，NgModule 为这些组件提供了一个编译上下文环境，这些组件共享同一个编译上下文环境。

四. 理解组件

1. @Component 元数据

@Component 装饰的类为组件，组件告诉 Angular 如何创建和展示这个组件及其视图。具体来说就是，组件把一个模板和该组件关联起来，该组件和模板共同描述一个视图。

视图 = 组件 + 模板

组件的配置选项：

2. 关于模板

你需要通过模板来定义视图，视图实际上就是一种 HTML，它告诉 Angular 如何去渲染组件，模板通常以 UI 分区或页面为单位进行修改、显示或隐藏。

五. 理解服务与依赖注入

1. 依赖注入

依赖注入的概念可以参考：Spring：Ioc 和 DI

Angular 将组件和服务（非强制）区分开来，以提高模块性和复用性。

区分原则：

1. 服务应该是和视图无关的功能，组件应该是用来绑定数据、作为视图和应用逻辑（服务）的中介者；
2. 服务不应该定义任何服务端获取的数据、表单、日志等工作，服务应该是要保证可重用的。

由组件和服务的关系可以看出，组件是服务的消费者，Angular 需要将一个服务注入到组件中以供组件调用。

使用 @Injectable 装饰器来表明一个组件或其它类拥有一个依赖。

2. 如何提供服务

要使用任何服务，必须至少注册一个提供商。

1. 默认情况下，CLI 会在 @Injectable 装饰器中注册服务到根注入器，全局可用；
2. 如果你使用特定的模块来注册提供商时，则该服务同一个实例可以被该模块下的所有组件使用；
3. 如果你使用特定的组件来注册提供商时，则每个新组件实例会使用新的服务实例；

参考资料

1. Angular 中文文档