• angular中所有的组件时放在单独的模块当中的,这点与vue不同,vue中所有的模块都是放在一起的
    • angular中的模块用于对组件进行分组,angular项目默认初始有一个appModule

    模块 - 图1

    • Angular启动过程分析:

      • angular.json:angular框架的配置文件
        • "index": "src/index.html"
        • "main": "src/main.ts":入口文件
      • main.ts:中包含bootstrapModule 指定引导启动模块

        1. ============main.ts==========
        2. .......
        3. //bootstrapModule引导启动模块
        4. platformBrowserDynamic().bootstrapModule(AppModule)
        5. .catch(err => console.error(err));
      • app.module.ts:此模块包含启动引导组件bootstrap:[AppComponent]

        1. =============app.module.ts============
        2. @NgModule({
        3. declarations: [
        4. AppComponent
        5. ],
        6. imports: [
        7. BrowserModule
        8. ],
        9. providers: [],
        10. //启动引导组件
        11. bootstrap: [AppComponent]
        12. })
        13. export class AppModule { }
      • app.component.ts:启动引导组件

        1. @Component({
        2. //选择器
        3. selector: 'app-root',
        4. //模板
        5. templateUrl: './app.component.html',
        6. //样式表
        7. styleUrls: ['./app.component.css']
        8. })
        9. //script
        10. export class AppComponent {
        11. title = 'myngapp01';
        12. }