Angular2的模块架构浅谈

引言
angular2相比1引入了更完善的模块系统,回忆ng1的应用中通常在页面的html标签或body标签中添加ng-app节点,值为应用的模块名,整个应用都将围绕这个模块来展开,到了ng2,模块概念完善了很多,并且再不是由一个模块来统治整个应用(当然非要这么做也可以),本文就将叙述一番ng2中的模块体系,以及如何统筹ng2模块最终组合成一个完整的应用。

 


一、根模块、子模块与惰性加载


先说根模块。一个ng2应用至少要有一个根模块,包含ng2自带的BrowserModule,并声明为引导模块,在应用启动时将从此模块展开。
随着应用的扩大,所有的事情都在一个模块中完成难免会变乱(某种程度上看ng1应用就是这么做的,并且细分了控制器来拆分应用,这其实浪费了最顶层模块的意义),所以自然而然能想到,可以将系统分为多个模块,每个模块都只做各自的事情而互不干扰,所以进一步的思路就是,用来根模块来引导程序并管理所有子模块(通过路由定向以及为它们提供全局配置与服务实例),所有的具体业务就交给各个子模块来完成。
然后会有一个问题,那就是既然系统已经被这么多个子模块瓜分了,并且这些子模块也不可能同时全部都会被使用,也就是只有其被激活时才有用,那仍然在应用引导时从根模块加载所有子模块必然会导致性能的浪费以及拖慢执行速度。此时惰性加载模块就派上用场了,将一个子模块定义为惰性加载后,只有在通过路由激活此模块时才会开始加载此模块(并且ng2甚至支持异步预加载,即后台预加载懒加载的模块,这样当懒加载模块需要被加载时其实其已经加载完成了,又加快了响应速度)。

 


二、除了模块之外


每个模块都有自己的事情要做,通常包括:

  1. 引入其他模块                                 这个在第三部分细说
  2. 声明模块包含的组件、指令与管道        所有的组件、指令或管道都必须依附于某个模块,并只在此模块中可用。
  3. 定义模块提供的服务              服务也有自己所属的模块,但由于服务是全局单例的,所以只要在一个模块中提供之后,全局都通用。注:若多个模块同时提供了服务(通常发生在模块间混乱的import时),一般情况下ng2能识别并只保留一个实例,但在惰性加载的模块中则会发生不可预计的错误,所以一定要避免。
  4. 定义模块将导出的组件、指令与管道(还可以是此模块引入的模块)        与(1配合使用,同样在第三部分细说。

 

三、模块的关联


模块之间一定要有共享或继承资源的方式,不然的话每个子模块都必须实现可能用到的全部功能。

比如一个消息弹窗组件,不可能每个子模块都自己声明一个消息组件然后使用,这样的维护压力很大且代码严重浪费。

此时就用到了模块的引入和导出——
模块A可以引入另一个模块B,然后A就可以使用B中导出的组件、管道和指令。

 

当我们要使用系统指令(如ngIf、ngFor等)时,也必须引入系统模块,有一个巧妙的办法就是实现上图这样的共享模块,在引入系统模块并导出的同时再导出自定义的其他指令、组件或管道。然后所有引入了此共享模块的子模块就能使用这些系统指令和共享指令了。


有一个基础的问题是服务需不需要导出,答案是否定的。服务不需要导出,因为服务是全局单例的,一旦被初始化,就已经全局通用了,相反如果重复的导入提供了同一服务的模块就可能发生问题:
B提供服务B_S,A导入了B,C也导入了B。这种情况下ng2会找到两处B_S的提供,但ng2尚能够将其保持在一个实例B_S。但若模块C为惰性加载的模块,在C被创建时,其实会重新初始化一个实例B_S,从C跳转回到A时,又会创建一个B_S,来回每次跳转都是如此,结局就会变得混乱不堪。
对于服务更好的做法是写一个核心模块,专门提供全局服务,保证此模块只会被根模块引用一次,然后所有的子模块就都已经可以使用这些全局服务了。

 

 

四、ng2模块体系


最后给出一套ng2项目构建的体系,这也是总结归纳了ng2官网的推荐得出的ng2项目的模块体系。

 


总体思路就是:


> 1.根模块负责全局的路由。


> 2.核心模块负责全局服务,也可以定义一些只在根模块中使用的组件等,并只能由根模块引入一次,不再导出。


> 3.共享模块不做服务的提供,而是定义全局共享的组件等,以及帮助子模块导入系统模块,让子模块只需要导入此共享模块就够了。


> 4.子模块内部可以细分自己的子路由到具体的子组件,以及提供自己的服务等。


> 5.除了页面入口模块(即除了根模块外的具体业务模块)之外的其他子模块均考虑写成惰性加载的模块,以提升页面引导的速度减少性能浪费。


> 6.当需要一个比较通用的全局服务时,可以将其加入CoreModule,也可以再创建一个仅被根模块引入的特性模块。进一步的,甚至可以将此模块发布到npm,这就需要更强的编码能力和技术积累了。

 

转载于:https://www.cnblogs.com/yitim/p/angular2-study-module-framework.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Angular 是一种前端框架,用于构建客户端应用程序。它使用 TypeScript 语言(一种 JavaScript 的超集),并提供了许多功能来帮助开发人员更快地构建高质量的应用程序。 Angular 的核心思想是提供一组可以使用的工具,使开发人员能够快速地构建可扩展的应用程序。它提供了一个模块化的结构,使开发人员能够将应用程序分解为可管理的部分,并提供了许多有用的功能,如模板引擎、依赖注入机制和表单验证等。 ### 回答2: Angular是一种流行的前端框架,用于构建Web应用程序。它是由Google开发和维护的,具有强大的功能和广泛的生态系统。Angular采用了一种组件化的架构模式,其中将应用程序划分为多个独立的组件,每个组件都具有自己的逻辑和界面。这种架构模式使得应用程序更易于管理和扩展。 Angular提供了许多内置的特性和工具,用于支持快速开发和高效的前端开发。其中包括模块化,依赖注入,双向数据绑定,路由,表单验证等。这些特性能够极大地提高开发效率,减少重复代码的编写,并且易于维护。 与其他前端框架相比,Angular具有许多优势。首先,它具有强大的类型检查和编译时错误检测功能,可以减少潜在的Bug,并提供更好的开发体验。其次,Angular的生态系统非常丰富,拥有大量的第三方库和插件,为开发者提供了更多的选择和灵活性。此外,Angular还支持移动开发和渐进式Web应用程序,可以在多个平台上运行。 总体而言,Angular是一种功能强大且易于使用的前端框架,为开发者提供了丰富的特性和工具,支持快速开发和高效的前端架构。它在企业级应用开发中得到了广泛应用,并获得了大量的用户和社区支持。无论是小型项目还是大型应用程序,使用Angular都可以提高开发效率和代码质量,是构建现代Web应用的理想选择。 ### 回答3: Angular前端架构是一种基于TypeScript的开源JavaScript框架,用于构建动态、可扩展的Web应用程序。它由Google维护并由一个强大的社区支持。Angular采用了组件化的架构模式,将一个应用程序划分为许多小的可重用的组件,从而提高开发效率和代码可维护性。 Angular架构的核心是一个根组件,它是整个应用的入口点,并且包含其他各种组件。每个组件都有一个模板,用于定义组件的外观和结构以及与用户交互的方式。组件之间可以通过输入输出属性进行通信。 Angular架构还包括服务,它们用于封装数据访问、业务逻辑和其他共享功能。服务可以在组件之间共享数据,并提供一致的接口,使得各个组件都可以方便地使用。 另外,Angular还提供了模块化的功能,用于管理应用程序的不同部分。通过模块,可以将应用程序划分为功能性的子模块,并且可以动态地加载或卸载这些模块Angular还提供了丰富的开发工具和开发者支持,例如Angular CLI、TypeScript、Jasmine等。它还支持单元测试、端到端测试和自动化构建,以提高应用程序的质量和稳定性。 总之,Angular前端架构是一种强大和灵活的架构,可以帮助开发人员构建现代化的Web应用程序。它通过组件化、模块化和服务化的方式提供了高效、可维护和可扩展的开发模式,同时也提供了丰富的工具和支持。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值