Angular核心概念一览表(持续更新中)

ngModule

中小型项目中ngModule往往只有一个，但在大型应用中，往往多个功能相关的ngModule。定义在同一个ngModule中的视图组件，可以同范围内直接使用标签。

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

declarations

声明模块中拥有的视图类。主要包括：组件，指令和管道。

exports

declarations 的子集。导出，供其他模块引用。

imports

声明需要的其他模块

providers

全局的服务列表，应用的任何部分都可以访问到。

bootstrap

指定根视图，仅根视图可配置此项。或者配置此项的组件，即为根视图。渲染dom时候，会替换index.html 中app-root对应的元素。

BrowserModule

针对需要运行在浏览器中module所必须的。

FormsModule

表单处理，双向绑定，所必须的。

HttpModule

http请求所必须的。

Component

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

selector -- html中自定义标签

模板

有两种方式：

@Component({ selector: 'app-hero-list', templateUrl: './hero-list.component.html', providers: [ HeroService ] }) export class HeroListComponent implements OnInit { @Component({ selector: 'lightswitch-comp', template: ` <button (click)="clicked()">Click me!</button> <span>{{message}}</span>` }) export class LightswitchComponent {}

服务 -- 组件依赖的服务

DI

Angular发现某个组件依赖于服务时，它将首先检查注入程序是否具有该服务的任何现有实例。如果请求的服务实例尚不存在，则注入器使用注册的提供者创建一个实例，并将其添加到注入器中，然后再将服务返回到Angular。共三种方式，范围从大到小

根级别

@Injectable({ providedIn: 'root', })

NgModule级别

@NgModule({ providers: [ BackendService, Logger ], ... })

Component级别

@Component({ selector: 'app-hero-list', templateUrl: './hero-list.component.html', providers: [ HeroService ] })

编译

JIT (及时编译) -- 默认采用

import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule);

AOT （预编译）

数据模型 -- js es6对象

数据显示

生命周期

input输入

父子组件通信

组件样式

指令

Dom操作

管道

http请求

Rxjs

Router

单元测试

本文由博客一文多发平台 OpenWrite 发布！