大型AngularJS应用程序设计

Question

我需要建议设计一个具有多个复杂模块的AngularJS应用程序,并根据模块在认证和授权后加载的用户角色.有些用户可以访问一个简单的模块,有些用户可以访问仪表板,有些用户可以访问2个以上的模块.

我们已经确定了很多可以在不同模块中重用的指令.在设计阶段,我们确定了应该存在的以下事项,我们对以下某些项目有答案,但我们仍需要专家的建议:

• 一个模块可以有
  • 谐音
  • 控制器
  • 指示
  • 服务
• 异常处理(HTTP状态代码或业务错误)
• 记录(带行号,从哪个功能)
• 可能还需要在服务器中保存记录的信息
• 应该能够打开和关闭日志记录
• 通过工厂类定制小部件(在其他模块中重用)
• 共享指令(独立范围)
• 共享模块
• 共享实用程序(排序,过滤等)
• 根据主数据的枚举器
• 常数通过单身人士
• 身份验证(CSRF)
• 离线存储
• REST服务
• 从一个模块调度并在其他模块中处理它的事件处理

该应用程序的UI看起来像是一个固定的菜单栏位于页面顶部,左上角有一个下拉导航,具有多个链接,具体取决于用户的角色.当用户单击链接时,相应的模块应该加载到页面中.必须有一个空项目,它是手动引导的,并在运行时加载其他模块.

我们的方法是具有以下文件夹结构:

• 应用
  • 资产
    • CSS
    • lib js
    • 图片
  • 常见的组件
    • 指令
    • 公用事业
    • 认证
    • 用于保存$ resource调用的服务代理
    • 枚举
    • 常量
  • 模型
    • 实体json(示例客户,产品等)
  • 业务模块A.
    • 谐音
    • 指令
    • 服务
    • 控制器
  • 业务模块B.
  • 业务模块C.
  • 的index.html
  • Requirejs配置文件

所以我的问题是:

• 模块内的服务如何与其他模块通信？
• 模块应该独立开发和运行？
• 如何通过传输数据来处理模块之间的通信？
• 如何集成以上所有元素,特别是异常处理,日志记录？
• 开发人员应该了解我们定义的约定？
• 调用日志,在模块之间发送信息的方法是什么？

Answer 1

我建议,包括自耕农为您的工作流程,并使用一台发电机为您的项目,这使得轻松很多,你组织你的应用程序,特别是如果你在一个团队中工作的方式.

今年早些时候,来自angular的人发布了一份文档,其中包含了针对您的应用程序结构的最佳实践,我建议您阅读它,据说有一个基于那些名为cg-angular的最佳实践的生成器,我完全推荐.

我将引用cg-angular网站:

所有子生成器都会提示用户指定保存新文件的位置.因此,您可以创建所需的任何目录结构,包括嵌套.生成器将在项目的根目录中创建一些文件,包括index.html,app.js和app.less.您可以确定如何构建项目的其余部分.

关于你的问题:

• 模块内的服务如何与其他模块通信？

您可以为指令/和服务/创建一个文件夹,您将在不同的模块中重用它.

• 模块应该独立开发和运行？

你可以在app中有几个模块(你可以根据需要加载它们,也许使用require js但这是offtopic)

• 如何通过传输数据来处理模块之间的通信？

使用服务在不同模块中的控制器之间传递信息

• 如何集成以上所有元素,特别是异常处理,日志记录？

您可以为所有模块执行通用错误处理程序和通用http拦截器

• 开发人员应该了解我们定义的约定？

使用他们被认可的发电机,他们给出了团队所需的订单和惯例.

Answer 2

有很多好问题要问; 它们似乎分为两大类 - 第一类是代码结构问题,第二类是指标(日志等).

模块内的服务如何与其他模块通信？

理想情况下,您应该使用模块的指令.这样,您就可以利用通过require属性链接控制器的功能. 这是一个关于指令和控制器之间共享数据的页面.

模块应该独立开发和运行？

我假设你在考虑单元测试.是的,理想情况下,您的模块应尽可能紧凑,以便更轻松地进行测试.

如何通过传输数据来处理模块之间的通信？

这是services通常使用的地方.注意:服务,工厂和提供者在AngularJS中都是一样的,它们只是以稍微不同的方式声明.挑选一个你最舒服的人.

如何集成以上所有元素,特别是异常处理,日志记录？

记录是一个单独的问题.AngularJS的优点在于,您可以非常轻松地扩充框架的现有部分,以便根据需要添加功能或行为.你这样做decorators. 以下是异常日志记录的示例,我认为它将涵盖您可能感兴趣的任何用例

开发人员应该了解我们定义的约定？

答案总是一样的:沟通就是他们所知道的.开发人员需要将惯例社交化,否则您将永远不会被买入.

调用日志,在模块之间发送信息的方法是什么？

以上回答.

Answer 3

大型AngularJS和JavaScript应用程序中的代码组织

许多开发人员在应用程序的代码库大小增加时如何组织应用程序的代码库很困难.我最近在AngularJS和JavaScript应用程序中看到了这一点,但从历史上看,它在所有技术中都存在问题,包括我过去曾经使用的许多Java和Flex应用程序.

总体趋势是对按类型组织事物的迷恋.它与人们组织服装的方式有着惊人的相似之处.

堆在地板上

让我们来看看angular-seed,这是AngularJS应用程序的官方起点."app"目录包含以下结构:

css/img/js/app.js controllers.js directives.js filters.js services.js lib/partials/JavaScript目录为我们编写的每种类型的对象都有一个文件.这就像在地板上将衣服整理成不同的堆一样.你有一堆袜子,内衣,衬衫,裤子等.你知道你的黑色羊毛袜子在角落的那堆里,但它需要一段时间才能挖出来.

这是一团糟.人们不应该这样生活,开发人员不应该像这样编码.一旦你超过了大约六个控制器或服务,这些文件变得笨拙:你正在寻找的对象很难找到,源代码控制中的文件更改集变得不透明等等.

袜子抽屉

组织JavaScript的下一个逻辑过程涉及为某些原型创建目录并将对象拆分为自己的文件.为了继续服装比喻,我们现在投资了一个漂亮的mohaghony梳妆台,并计划将袜子放在一个抽屉里,将内衣放在另一个抽屉里,并整齐地将裤子和衬衫折叠在其他人身上.

让我们假设我们正在建立一个简单的电子商务网站,其中包含登录流程,产品目录和购物车UI.我们还定义了新的原型为模型(业务逻辑和状态)和服务(代理到HTTP/JSON端点),而不是它们混为一谈成角的单曲"服务"的原型.我们的JavaScript目录现在看起来像这样:

controllers/LoginController.js RegistrationController.js ProductDetailController.js SearchResultsController.js directives.js filters.js models/CartModel.js ProductModel.js SearchResultsModel.js UserModel.js services/CartService.js UserService.js ProductService.js Nice!现在可以通过浏览文件树或使用IDE快捷方式轻松定位对象,源控件中的更改集现在可以清楚地指示修改内容等.这是一项重大改进,但仍然存在一些限制.

想象一下,你在办公室,并意识到你需要一些衣服干洗,明天早上出差.你打电话回家,让你的重要人士把你的黑色木炭和蓝色细条纹套装带给清洁工.不要忘记带有黑色佩斯利领带的灰色衬衫和带有纯黄色领带的白色衬衫.想象一下,你的重要人物对你的梳妆台和衣柜完全不熟悉.当他们筛过你的领带抽屉时,他们会看到三条黄色领带.哪一个选？

如果你的服装是由服装组织的,那不是很好吗？虽然存在诸如成本和空间之类的实际约束使得现实世界中的服装变得困难,但是可以通过代码以零成本完成类似的事情.

模块化

希望这些陈腐的比喻并不是太乏味,但这里是回顾:

您的重要其他人是团队中的新开发人员,他们被要求修复应用中众多屏幕之一的错误.开发人员筛选目录结构,看到所有控制器,模型和服务整齐有序.不幸的是,它告诉他/她没有关于哪些对象相互关联或彼此依赖.如果在某些时候开发人员想要重用一些代码,他们需要从一堆不同的文件夹中收集文件,并且总是会忘记其他文件夹中的代码.信不信由你,您很少需要重新使用您正在构建的新报告应用程序中的电子商务应用程序中的所有控制器.但是,您可能需要重用某些身份验证逻辑.如果这一切都在一个地方,那不是很好吗？让我们根据功能区域重新组织应用程序:

cart/CartModel.js CartService.js common/directives.js filters.js product/search/SearchResultsController.js SearchResultsModel.js ProductDetailController.js ProductModel.js ProductService.js user/LoginController.js RegistrationController.js UserModel.js UserService.js Any随机开发人员现在可以打开顶级文件夹,并立即深入了解应用程序的功能.同一文件夹中的对象具有关系,而某些文件夹则依赖于其他对象.了解登录和注册过程的工作方式与浏览该文件夹中的文件一样简单.通过复制/粘贴原始重用至少可以通过将文件夹复制到另一个项目来完成.

使用AngularJS,我们可以更进一步,并创建此相关代码的模块:

1 2 3 4 5 6 7 8 9 10 11 12 13 var userModule = angular.module('userModule',[]); userModule.factory('userService',['$ http',function($ http){return new UserService($ http);}]);
userModule.factory('userModel',['userService',function(userService){return new UserModel(userService);}]);
userModule.controller('loginController',['$ scope','userModel',LoginController]); userModule.controller('registrationController',['$ scope','userModel',RegistrationController]); 鉴于rawUserModule.js托管与GitHub的❤如果我们再放置UserModule.js到用户文件夹就变成了该模块中使用的对象的"清单".这也是为RequireJS或Browserify添加一些加载程序指令的合理位置.

通用代码提示

每个应用程序都有许多模块使用的公共代码.我们只需要一个适合它的地方,它可以是一个名为"common"或"shared"的文件夹,也可以是你喜欢的任何文件夹.在非常大的应用程序中,功能和交叉问题往往会有很多重叠.这可以通过以下几种技术进行管理:

如果模块的对象需要直接访问多个"常见"对象,请为它们编写一个或多个Facade.这可以帮助减少每个对象的协作者数量,因为太多的协作者通常是代码气味.如果您的"通用"模块变得很大,则将其细分为可解决特定功能区域或关注点的子模块.确保您的应用程序模块仅使用他们需要的"通用"模块.这是SOLID的"接口隔离原理"的变体.在$ rootScope上添加实用程序方法,以便子范围可以使用它们.这有助于防止必须将相同的依赖项(例如"PermissionsModel")连接到应用程序中的每个控制器.请注意,这应该谨慎地进行,以避免混淆全局范围并使依赖性变得不明显.使用事件将两个不需要显式引用的组件分离.AngularJS通过Scope对象上的$ emit,$ broadcast和$ on方法实现了这一点.控制器可以触发事件以执行某些操作,然后接收操作已完成的通知.关于资产和测试的快速说明

我认为在组织HTML,CSS和图像方面有更大的灵活空间.将它们放在模块的"assets"子文件夹中可能会在封装模块的资产依赖性之间实现最佳平衡,而不会使事情变得过于混乱.但是我认为这个内容的单独的顶级文件夹包含一个镜像应用程序包结构的文件夹结构也是合理的.我认为它也适用于测试.

请看下面的链接,

https://blog.safaribooksonline.com/2014/03/27/13-step-guide-angularjs-modularization/