Angular2 小贴士 NgModule 模块

简介: angular2 具有了模块的概念,响应了后台程序的号召,高内聚 低耦合。模块就是用来进行封装,进行高内聚  低耦合的功能。 其实各人认为ng2 的模块和.net的工程类似,如果要使用模块中定义的功能,第一步就是必须要引用它,ng2 中叫import 导入。

angular2 具有了模块的概念,响应了后台程序的号召,高内聚 低耦合。模块就是用来进行封装,进行高内聚  低耦合的功能。

其实各人认为ng2 的模块和.net的工程类似,如果要使用模块中定义的功能,第一步就是必须要引用它,ng2 中叫import 导入。

那么我们看模块是否有层级概念呢,至少目前来看,模块都是平级的,没有主子之分。

如何定义模块呢?

 1 import { NgModule } from '@angular/core';
 2 import { BrowserModule } from '@angular/platform-browser';
 3 
 4 /* App Root */
 5 import { AppComponent } from './app.component';
 6 
 7 /* Feature Modules */
 8 import { ContactModule } from './contact/contact.module';
 9 import { CoreModule } from './core/core.module';
10 import { routing } from './app.routing';
11 import { Title } from '@angular/platform-browser';
12 @NgModule({
13   imports: [
14     BrowserModule,
15     ContactModule,
16     /*
17         CoreModule,
18     */
19     CoreModule.forRoot({ userName: 'Miss Marple' }),
20     routing
21   ],
22   declarations: [AppComponent],//声明当前模块需要的指定 组件信息
23   exports:[],
24   providers: [Title],
25   bootstrap: [AppComponent]
26 })
27 export class AppModule { }

 

简单说明一下模块元数据中各个参数的用途。

imports:导入其他模块,就是要使用其他模块的功能,必须要导入。

declarations:声明,声明本模块包含的内容。可能有些同学会遇到,定义了一个指令,在component中使用却总是没有生效的问题,首先我们要检查的就是是否进行了声明。

exports:外部可见的内容。相当于.net中声明为public的那些类。

providers:服务提供者,主要用来定义服务。估计ng2框架会自动将注册的服务体检到依赖注入实例中,目前测试也是如此。

bootstrap:启动模块。只在根模块使用。在除了根模块以外的其他模块不能使用。

 

2.问题2

目前官方叫法:启动模块为根模块,自定义的其他模块叫特性模块。

我们是否可以在特性模块中import根模块呢?

实验是检验真理的最好方法。

 1 import { NgModule }           from '@angular/core';
 2 import { SharedModule }       from '../shared/shared.module';
 3 
 4 import { ContactComponent }   from './contact.component';
 5 import { ContactService }     from './contact.service';
 6 import { routing }            from './contact.routing';
 7 import{GuozhiqiModule}from '../directives/guozhiqi.module';
 8 import{AppModule}from '../app.module';
 9 @NgModule({
10   imports:      [ SharedModule, routing,GuozhiqiModule,AppModule ],// 导入模块
11   declarations: [ ContactComponent ],//声明 指令  
12   providers:    [ ContactService ]//服务提供者 在当前模块提供者中注册当前模块需要的服务
13 })
14 export class ContactModule { }

 

appModule是根模块,我们定义的contactModule是特性模块,现在我们通过imports 导入根模块。

 

执行出现错误,contactModule导入了一个undefined的module?

为什么会出现这个问题呢?

各人估计是因为1.导致了循环引用的问题。appModule会加载ContactModule,而在ContactModule中又要import 根模块,导致循环引用,从而出现错误。

2.另一种解释就是根模块不允许导入。ng2框架不允许这样

问题3:如何避免出现循环引用呢?

官方给出了答案:https://angular.cn/docs/ts/latest/guide/ngmodule.html#!#prevent-reimport

1 constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
2     if (parentModule) {
3       throw new Error(
4         'CoreModule is already loaded. Import it in the AppModule only');
5     }
6   }

 

但是我本地验证并不会有效的验证如何避免重复import一个模块。

问题4. 模块与路由的关系。

基本上每个特性模块都有单独的路由定义,关于模块和路由的关系定义,下次说到ng2路由时再细说,因为ng2的路由太强大,以至于需要很长时间的理解才能明白。

 

ng2模块的目录和目录结构的最佳实践:

1.每个模块一个单独的文件夹

2.模块是高内聚 低耦合

3.模块内功能相关或相近

4.每个模块都有单独的路由定义 -不是必须

5.不要重复导入一些模块,必要的时候加入限制。 因为重复导入可能会影响依赖注入实例

 

我又回来了,回到了技术最前线,
相关文章
|
5月前
|
前端开发 容器
前端框架与库 - Angular模块与依赖注入
【7月更文挑战第17天】探索Angular的模块化和依赖注入:模块用于组织组件、服务等,通过`@NgModule`声明。依赖注入简化类间依赖管理,但面临模块重复导入、服务作用域不当和依赖循环等问题。解决策略包括规划模块结构、正确设置服务作用域和使用工厂函数打破循环依赖。遵循最佳实践,构建高效、可维护的Angular应用。
68 17
|
7月前
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
|
缓存
Angular CLI找不到模块"angular-devkit/build-angular"
Angular CLI 是 Angular 客户端命令行工具,提供非常多的命令来简化 Angular 的开发。今天执行“ng serve”命令时,竟然报找不到模块"@angular-devkit/build-angular"的错误。
2405 0
|
Java
将Angular6自己定义的模块发布成npm包
创建自己的模块组件 1. ng new 一个工程 2. ng g m 创建模块 例如我这里的modules文件下创建header模块 3. ng g c modules/head 创建一个hear组件,内容随意 4.
2472 0
|
JavaScript 数据安全/隐私保护 API
第218天:Angular---模块和控制器
1、使用NG实现双边数据绑定 所有需要ng管理的代码必须被包裹在一个有ng-app指令的元素中ng-app是ng的入口,表示当前元素的所有指令都会被angular管理(对每一个指令进行分析和操作) 1 2 3 使用NG实现双边数据绑定 4 7 hello {{user.
1100 0
AngularJs angular.Module模块接口配置
angular.Module Angular模块配置接口。 方法: provider(name,providerType); name:服务名称。 providerType:创建一个服务的实例的构造函数。
|
4月前
|
API 开发者 UED
PrimeFaces:JSF的魔法衣橱,解锁UI设计的无限可能!
【8月更文挑战第31天】本文介绍如何结合 JSF(JavaServer Faces)和 PrimeFaces 构建美观且功能强大的现代用户界面。PrimeFaces 提供丰富的 UI 组件库,包括按钮、输入框、数据网格等,支持现代 Web 标准,简化界面开发。文章通过具体示例展示如何使用 `<p:inputText>` 和 `<p:calendar>` 等组件创建用户表单,并用 `<p:dataTable>` 展示数据集合,提升 JSF 应用的易用性和开发效率。
64 0