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 许可协议。转载请注明出处！
随时随地看视频
