为了账号安全,请及时绑定邮箱和手机立即绑定

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

2019.11.01 12:50 3307浏览

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

单元测试

参考文献

本文作者:前端首席体验师(CheongHu)

版权声明: 本文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消