模块

Posted 2021-06-25 聆耳吟风

模块

在 Angular 中 module 是非常核心的一个概念。
一个 module 像一个盒子, 帮助开发者整理项目结构, 例如 一个 module 用来放玩具, 一个 module 用来放日用品。
它清晰的将复杂的业务模块、功能划分为独立的模块, 模块与模块之间职责分明。
模块里面的组件、服务、指令、管道都仅在当前模块内有效，实现模块化。

module 使用 @NgModule 装饰器来定义, 例如:

@NgModule({
    imports: [ButtonModule]
    providers: [],
    declarations: [PopupComponent],
    exports: [PopupComponent]
})
export class PopuoModule {}

imports 的作用是, 你编写的这个模块需要用到其他模块提供的内容, 需要添加到 imports中。例如上面引入了一个 ButtonModule。并且非常重要的是, imports 中我这里只建议引入模块

providers 的作用是注入服务, 服务的特性将会在下面讲到, 这里不再多写。

declarations 的作用是声明, 例如 module 中的组件、指令、管道都必须在这里声明。

exports 的作用是导出成员, 例如在封装模块时, 你想暴露给外部使用的模块什么内容, 就在这里导出什么内容。

bootstrap 的作用是声明主视图, 即 根组件, 在 AppModule 中使用。

组件

在 Angular 中, 组件分为 Web Component 和 Angular Component。
Web Component 指的是一个页面组件, 每一个路由都会指向一个页面组件，通过路由访问来渲染页面组件中的内容。
Angular Component 指的是在开发中，你需要封装一些公共的组件提供给页面使用，例如 弹窗 表格 按钮 等等。
在 Angular 中, 组件必须在 module 中注册, 并且只能在一个 module 中注册。

component 使用装饰器 @Component 来定义, 例如:

@Component({
    selector: \'app-popup\',
    templateUrl: \'./popup.component.html\',
    styleUrls: [\'./popup.component.css\'],
})
export class PopupComponent {}

selector 用来定义组件的选择器名称, 当这个组件被其他模块使用时, 通过 <app-popup></app-popup> 调用。

templateUrl 指定该组件对应的 html 文件, 即 视图内容; 或者通过 template 可以不指定文件, 直接编写 HTML 代码。

styleUrls 指定该组件对应的 style 文件, 可以指定多个样式文件; 或者通过 styles 可以不指定文件, 直接编写 css 代码。

这里只讲解了基础的组件, 更多关于组件的内容会单独拿出来说。

路由

路由 是 Angular 用来串联整个 SPA 应用的核心, 通过路由可以访问到各个页面组件, 例如:

const routes = [
    {
        path: \'demo\',
        component: ViewComponent,
    },
    {
        path: \'lazy\',
        loadChildren: () => import(\'./views/lazy-view.module.ts\').then(m => m.LazyViewModule),
    },
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule {}

路由 也是一个 模块, 并且 AppRoutingModule 为 根路由模块, 它导出了 RouterModule 并注册在了 AppModule 中。

RouterModule.forRoot 即注册路由, 示例路由通过 http://localhost:4200/demo 访问, 但是 demo 路由并不是路由懒加载, ViewComponent 需要在 AppModule 中声明才行,
一般的项目开发中, 都会通过路由懒加载来分配业务模块。

loadChildren 就是路由懒加载, 他指向了一个模块, 并且只有在访问 lazy 这个路由时, 才会加载模块中的内容, 而 demo 则在程序启动时就被加载了。

关于 路由 的更多内容也会单独说, 这里只做简单介绍, 主要是了解一个基本概念。

服务

服务 是 @Injectable 装饰器来定义, 例如:

@Injectable()
export class RequestService {}
@Injectable({
    provideIn: \'root\',
})
export class RequestService {}

服务 需要注册在 module 的 providers 或者 component 的 providers 中, 不同的注册地方作用域不同, 服务 在当前注入的作用域中是 单例 的。

provideIn 是注入的一个快捷方式, root 表示注册在 根模块 中, 即 全局单例对象, 这里使用了 provideIn 就可以省略在 module 的 providers 中注册了。