如何使用angularJS在多个项目之间共享代码 [英] How to share code between multiple projects with angularJS

问题描述

我想知道在多个angularJS项目之间共享公共库和拥有模块的最佳做法是什么。

I was wondering what would be the best practice to share common libraries and own modules between multiple angularJS projects.

让我们假设我正在处理两个不同的项目。两者都依赖于angularJS，bootstrap等库。

Let's assume that I'm working on two different projects. Both rely on libraries like angularJS, bootstrap etc.

我的文件结构如下：

• 项目1
  
  
  
  • index.html
  
  
  • css
  
  
  • js
    
    
    
    • 模块A
    
    
    • 模块B
    
    

• Project 1
  • index.html
  • css
  • js
    • module A
    • module B

• angular


• bootstrap

• index.html


• css


• js
  
  
  
  • 模块B
  
  
  • 模块X
  
  
  • index.html
  • css
  • js
    • module B
    • module X
    
    
    • angular
    
    
    • bootstrap
    
    

    所以我我正在考虑用所有共享组件创建另一个目录，以便我得到某些东西。喜欢：

    So I was thinking about just creating another directory with all the shared components so that I get sth. like:

    
    

    
    
    • 分享
      
      
      
      • angular
      
      
      • bootstrap
      
      
      • 模块B
      
      

    
    
    • index.html
    
    
    • css
    
    
    • js
      
      
      
      • 模块A
      
      
      
      
      • index.html
      
      
      • css
      
      
      • js
        
        
        
        • 模块X
        
        

        我的模块B写得像：

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

        然后将其作为依赖项包含在我的Project 1/2中：

        and would then include it in my Project 1/2 as dependency like:

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

        实现这种方法。

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

        Would that be the best way? What could be an alternative?

        推荐答案

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

        You can do it that way, but it may give you headaches if you ever want Project 1 and Project 2 to use two different versions of the Shared components. Imagine that you need to release Project 1 with the latest shared components, but Project 2 still relies on a previous version of the shared components. What a mess. Some other options:

        
        
        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 ）
        
        
        1. Make the shared components Bower components that could be included into either project as dependencies (see http://briantford.com/blog/angular-bower)
        2. Compile all shared assets into a mutually accessible URL (see https://medium.com/@KamilLelonek/sharing-templates-between-angular-applications-b56469ec5d85)
        3. Basically copy/paste components between projects, either manually or using something like gulp (see https://groups.google.com/forum/#!msg/angular/TxE5yoQkG-U/6-vWAZsqn1YJ)

        第二个选项有很多活动部件，需要更改你的申请，更不用说无能为力了o在每个项目中部署不同版本的共享代码。第一个好处是易于切入3个存储库：项目1，项目2和共享。如果Shared是Project 1和Project 2中的Bower依赖项，那么简单的 bower update 将为您提供任一项目中的最新版本。或者您可以将项目锁定到特定版本的共享。

        The second option has a lot of moving parts and requires changes to your applications, not to mention the inability to deploy different versions of the shared code in each project. The first has the benefit of being easy to slice into 3 repositories: Project 1, Project 2, and Shared. If Shared is a Bower dependency in Project 1 and Project 2, a simple bower update will get you the latest version in either project. Or you can lock a project to particular versions of Shared.

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

        Option 3 seems like it gives you the most control, but you will quickly lose track of which version of Shared your project is using. Option 1 solves that.

        这篇关于如何使用angularJS在多个项目之间共享代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！