1、index.html(需要在webpack中配置)
引用了my-app指令
2、main.js(需要在webpack中配置)
启动主组件(AppModule)
platformBrowserDynamic().bootstrapModule(AppModule);
3、routing.ts
定义了页面路由
const routes: Routes =[····]
@NgModule({
imports: [ RouterModule.forRoot(routes,{useHash:true}) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
4、AppModule:
其实是将所有组件和指令都聚集到一起,合并使用
@NgModule({
imports: [ AppRoutingModule ],
declarations: components,
bootstrap: [ AppComponent ],
providers:[HttpClientService]
})
···imports: [ AppRoutingModule],
导入其他module,其它module暴露的出的 Components、Directives、Pipes
等可以在本module的组件中被使用。比如导入CommonModule后就可以使用
NgIf、NgFor等指令
···bootstrap:[ AppComponent ],
通常是app启动的根组件,一般只有一个component。bootstrap中的组件会
自动被放入到entryComponents中
5、AppComponent :
@Component({
selector: 'my-app', //my-app指令名称
template: require('./app.html'),
styles:[require('!raw-loader!less-loader!./style.less')]
})
export class AppComponent { //AppComponent 组件名称
constructor(){}
ngOnInit(){}
}