前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Angular--Module的使用

Angular--Module的使用

作者头像
半指温柔乐
发布2020-04-21 10:41:56
4.9K0
发布2020-04-21 10:41:56
举报
文章被收录于专栏:前端知识分享前端知识分享

Angular 是一个用html 和typescript 构建客户端应用的平台与框架。 它将核心功能和可选功能作为一组TypeScript 库进行实现,你可以把它们导入到你的应用中。

1. 模块Module

  1. Angular 应用的基本构造块是NgModule, 它为组件提供了编译的上下文环境。
  2. Angular 应用就是由一组NgModule定义的。 NgModule 可以将其组件和一组相关代码(如服务)关联起来,形成功能单元。
  3. 一个Angular应用至少有一个用于启动的根模块(root module), 根模块通常命名为AppModule,并位于一个名叫 app.module.ts 的文件中。还会有很多特性模块(feature module)

  1. NgModule 是由@NgModule() 装饰器定义的类。
  2. NgModules 用于配置注入器和编译器(the injector and the compiler),并帮你把那些相关的东西组织在一起。
  3. @NgModule() 装饰器是一个函数,参数是一个元数据对象,元数据对象的属性用于描述这个模块。其中最重要的属性如下:
  • declarations(可声明对象表) ——属于本 NgModule 的组件指令管道
  • exports(导出表) —— 用于其它模块的组件模板中使用的声明对象的子集(the subset of declarations)。
  • imports(导入表) —— 其他模块,本NgModule声明的组件需要使用它们的导出类。
  • providers —— 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。(你也可以在组件级别指定服务提供商,这通常是首选方式。)
  • bootstrap —— 应用的主视图,称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。
  1. @NgModule 的参数是一个元数据对象,用于描述如何编译组件的模板,以及如何在运行时创建注入器。 它会标出该模块自己的组件、指令和管道(declarations),通过 exports 属性公开其中的一部分,以便外部组件使用它们。NgModule 还能把一些服务提供商添加到应用的依赖注入器中(provider)。

2.常用模块NgModules

NgModule

Import it from

Why you use it

BrowserModule

@angular/platform-browser

当你想要在浏览器中运行app 时

CommonModule

@angular/common

当你想要使用NgIf 和NgFor时

FormsModule

@angular/forms

当要构建模板驱动表单时

ReactiveFormsModule

@angular/forms

当要构建响应式表单时

RouterModule

@angular/router

当要使用路由功能,并且你要用到RouterLink, forRoot() 和.forChild()时

HttpClientModule

@angular/common/http

当要和服务器对话时

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-04-17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 模块Module
  • 2.常用模块NgModules
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档