模块
在
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
中注册了。