引言
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,这就需要更强的编码能力和技术积累了。

Angular2的模块架构浅谈的更多相关文章

  1. 基于puppet分布式集群管理公有云多租户的架构浅谈

    基于puppet分布式集群管理公有云多租户的架构浅谈 一.架构介绍   在此架构中,每个租户的业务集群部署一台puppet-master作为自己所在业务集群的puppet的主服务器,在每个业务集群所拥 ...

  2. iOS应用架构浅谈

    (整理至http://www.cocoachina.com/ios/20150414/11557.html) 缘由 从事iOS工作一年多了,主要从事QQ钱包SDK开发和财付通app维护,随着对业务的慢 ...

  3. JavaWeb应用开发架构浅谈

    本文就我所经历和使用过的技术和框架, 讨论 Java / Javascript 技术组合构成的Web 应用架构. 一. 概述 Web 应用架构可以划分为两大子系统:前端子系统和后台子系统. 前端子系统 ...

  4. iOS 应用架构浅谈

    当我们讨论客户端应用架构的时候,我们在讨论什么? 其实市面上大部分应用不外乎就是颠过来倒过去地做以下这些事情: 简单来说就是调API,展示页面,然后跳转到别的地方再调API,再展示页面. App确实就 ...

  5. Nopcommerce架构浅谈之架构层次

    前面谈到了系统的文件,从文件结构中我们也可以看出Nop的层次划分还是非常清晰,下面我将介绍下Nop的架构层次,并对每个层做简要的介绍,先看我画的层次图. 这个系统基本上按照了ddd的形式做了划分,我本 ...

  6. C++插件架构浅谈与初步实现

    一.插件架构初步介绍 想到写本博客,也没想到更好的名字,目前就先命这个名吧.说到插件架构,或许大部分IT从业者都听过或者某些牛人也自己实现过稳定高效的插件框架.目前有很多软件以及库都是基于插件架构,例 ...

  7. Nopcommerce架构浅谈之文件结构

    应该是在两年前了,在拜读园子里大神的文章时偶然了解到有个叫NopCommerce的商城系统,苦于没有时间,各种耽误,其中研究过一段时间,也就是一个星期时间,后来又耽搁了,直到最近,随着项目进入间歇期, ...

  8. Linux架构浅谈

    以下图为基础: 最内层是硬件,最外层是用户常用的应用,比如说firefox浏览器,evolution查看邮件,一个计算流体模型等等.硬件是物质基础,而应用提供服务.但在两者之间,还要经过一番周折. 还 ...

  9. Docker 基础底层架构浅谈

    docker学习过程中,免不了需要学习下docker的底层技术,今天我们来记录下docker的底层架构吧! 从上图我们可以看到,docker依赖于linux内核的三个基本技术:namespaces.C ...

随机推荐

  1. Linux下网络流量实时监控工具大全

    在工作中发现,经常因为业务的原因,需要即时了解某台服务器网卡的流量,虽然公司也部署了cacti软件,但cacti是五分钟统计的,没有即时性,并且有时候打开监控页面不方便,个人喜欢随手在某台服务器上输入 ...

  2. iOS开发——UIAlertController

    iOS8之后,UIAlertView和UIActionSheet被干掉了,取而代之的是UIAlertController和UIAlertAction. UIAlertController有两种样式,一 ...

  3. 使用Tomcat搭建图片服务器,使图片能够用链接访问

    在后台和前端交互时,遇到了后台存储的图片,前端根据地址无法访问,使用Tomcat搭建图片服务器 1.找到tomcat下的server.xml文件 2.配置文件下加入service节点 <!--为 ...

  4. RTMP开发记录 测试服务器搭建篇

    nginx-rtmp-module 安装 最近在做直播功能,为了方便调试,在本地搭建一个rtmp server吧~ 我的配置环境是Ubuntu12.04 64 安装编译环境所需库 sudo apt-g ...

  5. UVa 10945 - Mother bear

    题目大意:给一个字符串,判断是否回文(忽略大小写,忽略非字母字符). #include <cstdio> #include <cctype> #include <cstr ...

  6. java系列--抽象类和接口

    问题:什么是接口,作用是什么 问题:什么是抽象类,作用是什么 一.抽象类 1.当父类的一些方法不确定时, 2.当一个子类继承的父类是抽象类的话,需要我们把抽象类中所有的抽象方法全部实现 3.抽象方法本 ...

  7. orientationchange

    <!DOCTYPE html> <html> <head> <title>OrientationChange Event Example</tit ...

  8. osgEarth编译(转载)

    osgEarth编译 osgEarth的编译需要osg和一些第三方插件库,我主要参考了cnblogs上的一篇博文,但是也不够详细,并且我是在已经编译好osg的情况下去编译osgEarth,所以期间也遇 ...

  9. Java语言中IO流的操作规律学习笔记

    1,明确源和目的. 数据源:就是需要读取,可以使用两个体系:InputStream.Reader: 数据汇:就是需要写入,可以使用两个体系:OutputStream.Writer: 总结: 读:就是把 ...

  10. 一个完整的PHP类包含的七种语法说明

    类中的七种语法说明 -属性 -静态属性 -方法 -静态方法 -类常量 -构造函数 -析构函数 <?php class Student { // 类里的属性.方法和函数的访问权限有 (函数和方法是 ...