Comment partager du code entre plusieurs projets avec angularJS

Je me demandais quelle serait la meilleure pratique pour partager les bibliothèques communes et propres modules entre plusieurs angularJS projets.

Supposons que je travaille sur deux projets différents. À la fois s'appuyer sur des bibliothèques comme angularJS, bootstrap, etc.

J'ai une structure de fichier comme ci-dessous:

  • Projet 1
    • index.html
    • css
    • js
      • module Un
      • module B
    • lib
      • angulaire
      • bootstrap
  • Projet 2
    • index.html
    • css
    • js
      • module B
      • module X
    • lib
      • angulaire
      • bootstrap

Je réfléchissais donc à juste créer un autre répertoire avec tous les composants partagés de sorte que-je obtenir qqch. comme:

  • Partagé
    • angulaire
    • bootstrap
    • module B
  • Projet 1
    • index.html
    • css
    • js
      • module Un
  • Projet 2
    • index.html
    • css
    • js
      • module X

J'ai le module B écrit comme:

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

et ensuite l'inclure dans mon Projet, 1/2, puisque la dépendance comme:

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

pour parvenir à cette approche.

Que ce serait la meilleure façon de faire? Ce qui pourrait être une alternative?

source d'informationauteur Fidel90

  1. 14

    Vous pouvez le faire de cette façon, mais il peut vous donner des maux de tête si jamais vous voulez le Projet 1 et Projet de 2 à utiliser deux versions différentes des composants Partagés. Imaginez que vous avez besoin pour Projet de version 1 avec les derniers composants partagés, mais le Projet 2 repose toujours sur une version précédente de composants partagés. Quel gâchis. Quelques autres options:

    1. Rendre les composants partagés de Verdure éléments pouvant être inclus dans le projet en tant que dépendances (voir http://briantford.com/blog/angular-bower)
    2. La compilation de tous les actifs partagés dans un commun accessible à l'URL (voir https://medium.com/@KamilLelonek/sharing-templates-between-angular-applications-b56469ec5d85)
    3. Essentiellement de copier/coller des composants entre les projets, que ce soit manuellement ou à l'aide de quelque chose comme gulp (voir https://groups.google.com/forum/#!msg/angulaire/TxE5yoQkG-U/6-vWAZsqn1YJ)

    La deuxième option a beaucoup de pièces mobiles et nécessite des changements à vos applications, sans parler de l'incapacité à déployer les différentes versions du code partagé dans chaque projet. La première a l'avantage d'être facile à couper en tranches de 3 référentiels: Projet 1, Projet 2, et Partagé. Si elle est Partagée, est une Charmille de dépendance dans le Projet 1 et le Projet 2, un simple bower updatevous obtiendrez la version la plus récente dans l'un ou l'autre projet. Ou vous pouvez verrouiller un projet pour les versions Partagées.

    Option 3 vous semble qu'il vous donne le plus de contrôle, mais vous allez rapidement perdre la trace de la version de Partagé votre projet. Option 1 résout.

  2. 5

    Une autre option est de publier votre code partagé en tant que mnp modules. Si le code est privé, alors vous pouvez utiliser npm Modules Privés pour que, bien qu'il y a un coût pour l'utilisation de modules privés.

    Auprès du ou de la Charmille de l'approche décrite dans d.jamison répondre à essayer de battre vos modules en petits modules en fonction de leurs besoins spécifiques, plutôt que d'avoir de gros monolithique "Partagé" des modules.

    L'avantage de cela est que si vous trouvez un bug, ou apporter une amélioration, vous pouvez voir plus facilement exactement lequel de vos projets risquent d'être affectées. Le require ou ES2015 import syntaxe beaucoup aider avec cela aussi que vous serez en disant par exemple import { calculateLineTotal } from OrderLogic.jsde sorte qu'il est alors trivial de trouver toutes les endroits dans le code de changer la calculateLineTotal aurait un impact.

  3. 1

    Une autre option serait pour utiliser Bits.

    Il vous permet de partager des composants de votre projet NG dans une collection partagée, et de les utiliser dans d'autres projets, sans mettre en place de nouvelles bibliothèques /packages.

    Meilleur de la chance.

  4. 0

    Ou tout simplement faire...

    "dependencies" : {
  "shared-code" : "git://github.com/user/shared-code.git",
}