在角度中使用多个模块有什么好处?

Vin*_*uis 12 javascript module angularjs angular-ui-router

我是Angular Js的熟悉人,最近我看到在一些项目中,在主模块中创建并组装了多个角度模块.

代码看起来像.

angular.module("main",['main.sub1','main.sub2','main.sub2'])

angular.module("main.sub1",[])

angular.module("main.sub2",[])

angular.module("main.sub3",[])
Run Code Online (Sandbox Code Playgroud)

我的问题是

  1. 什么时候接近分裂模块的方式?
  2. 它有用吗?
  3. 这是否会影响路由[routeProvider/stateProvider](因为模块的定义不同,我可以单独为每个模块放置路由提供者或状态提供者)
  4. 如果我在子模块中注入依赖项,它们默认注入主模块中吗?

我读了几篇博客,但我无法得到明确的看法.

你能指导我一下吗?

Moh*_*and 14

1.什么时候接近分裂模块的方式?

最好是,总是.但是你真的不需要这样做,除非你有多个使用完全相同的代码的应用程序,也许你在几个应用程序中处理身份验证的方式是相同的,将公共代码放入服务并拥有它是有意义的该服务作为自己的模块.这提供了代码重用,我们都知道代码重用是好的.

2.它有用吗?

同样,可重用性是这里的关键词.你不想四处寻找重复的代码.代码重复是完全错误的,导致更昂贵的维护和更容易出错的代码.另一个优点是,模块化应用程序显式概述了应用程序的依赖关系,并分离了应用程序不同部分的职责.代码重用和关注点分离是编写可维护代码的基本实践.

将应用程序分成模块的另一个原因是性能.现在我正在开发一个应用程序(网上商店),它由2个主要部分组成:一个部分(app)适用于普通用户/买家/卖家,另一个应用程序适用于管理员.现在,用户应用程序需要管理员应用程序不需要的一些脚本/库,反之亦然.例如,管理员应用程序使用一个剑道网格,需要一个kendo.all.min.js脚本,当缩小时为1.7MB!现在迫使网站的所有访问者下载重1.7 MB的脚本是否有意义?

3.这会影响路由[routeProvider/stateProvider](因为模块的定义不同,我可以单独为每个模块提供路由提供者或状态提供者)

是.理想情况下,您的应用程序将具有不同的路由/状态配置,因此每个应用程序都有自己的app.config(),这意味着您可以使用共享模块为每个应用程序定义单独的路由.根据我的经验,您想要迁移到自己的模块中的主要内容是服务和指令,而不是应用程序路由.

4.如果我在子模块中注入依赖项,它们默认注入主模块中吗?

是.如果将依赖项X注入模块A,并且模块A将由另一个模块使用,B那么B也将继承该依赖项X.


Nar*_*yan 5

模块是Angular应用程序的功能核心.模块包含我们为特定应用程序编写的所有代码,因此,往往会以单片方式增长.虽然这种趋势并不坏(模块是减少全局范围噪声的好方法),但我们可以划分模块.

关于何时创建模块以及何时在全局模块中嵌套功能,有几种不同的意见.以下两种方法都是通过模块分解我们的功能的有效方法:

1.什么时候接近分裂模块的方式?

当你想通过功能或路由分离你的应用程序逻辑时,需要因为你的代码在模块上分离,它易于理解,测试等等.模块模式的角度模块系统实现.

模块是任何强大的应用程序体系结构中不可或缺的一部分,通常有助于保持项目代码单元的清晰分离和组织.

2.它有用吗?

对于初学者来说,对于来自面向对象背景的开发人员来说,比真正封装的想法更加清晰,至少从JavaScript的角度来看.

  • 您的重要其他人是团队中的新开发人员,他们被要求修复应用中众多屏幕之一的错误.

    • 开发人员筛选目录结构,看到所有控制器,模型和服务整齐有序.不幸的是,它告诉他/她没有关于哪些对象相互关联或彼此依赖.

    • 如果在某些时候开发人员想要重用一些代码,他们需要从一堆不同的文件夹中收集文件,并且总是会忘记其他文件夹中的代码.

3.这会影响路由[routeProvider/stateProvider](因为模块的定义不同,我可以单独为每个模块提供路由提供者或状态提供者)

我们可以用来分解我们的应用程序的另一种方法是按路径划分我们的模块.这种分解使我们能够编写专注于每条路径功能的独立测试.根据项目的不同,通过路线模块化可以更有意义; 当我们处理大量独立路线时,它允许我们有效地划分我们的功能.例如:

angular.module('myApp.home', []);
angular.module('myApp.login', []);
angular.module('myApp.account', []);
angular.module('myApp', [
'myApp.home',
'myApp.login',
'myApp.account'
]);
Run Code Online (Sandbox Code Playgroud)

当我们处理大量路线和/或我们在路线之间没有太多交叉时,这种模块化特别有意义

4.如果我在子模块中注入依赖项,它们默认注入主模块中吗?

不久:是的.:)