javascript - 如何为多个 AngularJS 项目使用相同的代码库

Question

这个问题是关于代码angularJS 中的可重用性。

背景信息:我当前的应用程序 (application1) 在客户端使用 angularjs + kendo UI，它现在正在生产中。

我们将使用相同的技术再开发 4 个应用程序。即将推出的 4 个应用程序的功能与应用程序 1 几乎70-80%相似。

在这一点上，我的管理层不想创建一个应用程序(它包含一个屋檐下所有 5 个应用程序的功能)。

当前的方法/目标是:

1.创建5个独立的应用，服务端也有5个不同的应用

2.尽可能复用客户端代码

我目前的计划:

1. 分离公共(public)代码并将此代码保留为核心模块 (app.js) 的一部分。

2. 代码重构 - 按照 this link 中的建议移动到“基于功能的目录”结构.

3. 为每个功能创建一个 Angular 模块(大约 10 个模块)。

我的疑问是 - 因为我要对所有 5 个应用程序使用相同的“通用”代码(截至目前复制粘贴)，

如何让这个通用代码针对不同的应用程序表现不同？

例如，

1. 如果应用程序 1，服务调用 /app1/gettasks 或者如果应用程序 2，服务调用 /app2/gettasks，在这种情况下，我如何通过app1/app2/app3...在运行时？这是可配置的吗？

2. 简单来说，我如何将 applicationName 告诉 Angular 代码？之后，我可以像下面这样检查 applicationName...(伪代码)

   if(applicationName == app1){
      //do app1 specific things
   }else if (applicationName==app2) {
      //do app2 specific things
   }
   

PS:在服务器端我使用的是 Spring Boot。

请发表你的想法...

更新:

在我的公共(public)代码中，有服务、指令和过滤器。对于指令和过滤器——没有特定于应用程序的代码

1. 但是，在服务中，我如何制作特定于应用程序的 REST URL？

2. 在用户登录期间/之后，“通用代码”如何知道当前应用程序名称？是application1还是2还是3？

Answer 1

一个可能的解决方案是——

• 为每个客户端应用维护一个“配置”属性文件
• 根据这些配置值，使用Grunt 或Gulp 等构建工具预处理 您的html/js/css 文件。它基本上是一个文本搜索替换和条件包含。

例如https://github.com/jsoverson/grunt-preprocess