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 {}
复制代码

providers -- 组件依赖的服务

DI

Angular发现某个组件依赖于服务时，它将首先检查注入程序是否具备该服务的任何现有实例。若是请求的服务实例尚不存在，则注入器使用注册的提供者建立一个实例，并将其添加到注入器中，而后再将服务返回到Angular。

注入依赖共三种方式，范围从大到小

根级别注入

@Injectable({
	providedIn: 'root',
})
复制代码

NgModule级别注入

@NgModule({
  providers: [
  BackendService,
  Logger
 ],
 ...
})
复制代码

Component级别注入

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

providers注入有如下方式：

• 默认方式 ,等效于useClass

@NgModule({
  providers: [
  BackendService,
  Logger
 ],
复制代码

• useClass

// provide 为令牌名，useClass：对应的是服务名，angular根据令牌名，进行服务注入

//provide 与useClass同名
@NgModule({
  providers: [
  BackendService,
  [{ provide: Logger, useClass: Logger }]
 ],
 
 //provide与useClass不一样名，== 给服务起别名
 @NgModule({
  providers: [
  BackendService,
  { provide: JsLogger, useClass: Logger }
 ],
复制代码

• useValue

@NgModule({
  providers: [
  BackendService,
  { provide: API_URL, useValue: isProduction?'http://xxxxa.com':'http://zzzza.com' }
 ],
复制代码

• useFactory

@NgModule({
  providers: [
  BackendService,
  { provide: JSLoggerService, useFactory:() => {
      if(isFileLogged){
          return new FileLoggerService();
      }
      return new ConsoleLoggerService();
  } }
 ],
复制代码

• useExsiting

@NgModule({
  providers: [
  BackendService,
  { provide: API_URL, useValue: isProduction?'http://xxxxa.com':'http://zzzza.com' },
  { provide: JSBackendService, useExisting:BackendService  }, //起别名+复用以前的服务
 ],
复制代码

使用依赖有如下两种方式：

显示声明依赖

构造方法中@Inject显示声明依赖

@Component({
  selector: 'app-hero-list',
  template: `
    <div *ngFor="let hero of heroes">
      {{hero.id}} - {{hero.name}}
    </div>
  `
})
export class HeroListComponent {
  heroes: Hero[];

  constructor(@Inject(HeroService) heroService: HeroService) {
    this.heroes = heroService.getHeroes();
  }
}
复制代码

Angular推断依赖

构造方法中声明依赖

@Component({
  selector: 'app-hero-list',
  template: `
    <div *ngFor="let hero of heroes">
      {{hero.id}} - {{hero.name}}
    </div>
  `
})
export class HeroListComponent {
  heroes: Hero[];

  constructor(heroService: HeroService) {
    this.heroes = heroService.getHeroes();
  }
}
复制代码

可选依赖

@Component({
  selector: 'app-hero-list',
  template: `
    <div *ngFor="let hero of heroes">
      {{hero.id}} - {{hero.name}}
    </div>
  `
})
export class HeroListComponent {
  heroes: Hero[];
  logger:Logger;

  constructor(heroService: HeroService,@Optional() private logger: Logger) {
    this.heroes = heroService.getHeroes();
    if (this.logger) {
     this.logger.log(some_message);
    }
  }
}
复制代码

编译

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

单元测试

开发插件和devTool

参考文献

Angular

• 本文做者：前端首席体验师(CheongHu)
• 联系邮箱：simple2012hcz@126.com