如何使用angularJS在多个项目之间共享代码

Question

我想知道在多个angularJS项目之间共享公共库和自己的模块的最佳实践是什么.

我们假设我正在开展两个不同的项目.两者都依赖于angularJS,bootstrap等库.

我有一个如下文件结构:

• 项目1
  • 的index.html
  • CSS
  • JS
    • 模块A.
    • 模块B.
  • LIB
    • 角
    • 引导
• 项目2
  • 的index.html
  • CSS
  • JS
    • 模块B.
    • 模块X.
  • LIB
    • 角
    • 引导

所以我在考虑用所有共享组件创建另一个目录,这样我就可以了.喜欢:

• 共享
  • 角
  • 引导
  • 模块B.
• 项目1
  • 的index.html
  • CSS
  • JS
    • 模块A.
• 项目2
  • 的index.html
  • CSS
  • JS
    • 模块X.

我有模块B写成:

angular.module("moduleB", [])
    .service("SB", [function () {/*functionality here*/}]);
    .factory("FB", [function () {/*functionality here*/}]);

然后将它包含在我的Project 1/2中作为依赖项,如:

angular.module("project1", ["moduleB"]);

实现这种方法.

那会是最好的方式吗？什么可以替代？

Answer 1

您可以这样做,但如果您希望Project 1和Project 2使用两个不同版本的Shared组件,则可能会让您头疼.想象一下,您需要使用最新的共享组件发布Project 1,但Project 2仍然依赖于以前版本的共享组件.真是一团糟.其他一些选择:

1. 使共享组件Bower组件可以作为依赖项包含在任一项目中(请参阅http://briantford.com/blog/angular-bower)
2. 将所有共享资产编译为可互访的URL(请参阅https://medium.com/@KamilLelonek/sharing-templates-between-angular-applications-b56469ec5d85)
3. 基本上在项目之间复制/粘贴组件,手动或使用gulp之类的东西(参见https://groups.google.com/forum/#!msg/angular/TxE5yoQkG-U/6-vWAZsqn1YJ)

第二个选项有很多移动部件,需要更改应用程序,更不用说无法在每个项目中部署不同版本的共享代码.第一个好处是易于切入3个存储库:项目1,项目2和共享.如果Shared是项目1和项目2中的Bower依赖项,那么简单bower update将在任一项目中获得最新版本.或者,您可以将项目锁定到特定版本的Shared.

选项3似乎为您提供了最大的控制权,但您很快就会忘记您的项目使用的共享版本.选项1解决了这个问题.

Answer 2

另一个可能的选择是将您的共享代码发布为npm模块.如果代码是私有的,那么你可以使用npm Private Modules,尽管使用私有模块需要付出代价.

使用d.jamison的答案中描述的这种方法或Bower方法,尝试根据其特定目的将模块分解为更小的模块,而不是使用大型单片"AllOurSharedCode"模块.

这样做的好处是,如果您发现错误或进行改进,您可以更轻松地查看您的哪些项目可能会受到影响.该require或ES2015 import语法有很大的帮助与太,你会说例如import { calculateLineTotal } from OrderLogic.js,所以它是那么微不足道找到所有代码的地方,一个改变了的calculateLineTotal会产生影响.