【问题标题】:How to use same Code base for multiple AngularJS projects如何为多个 AngularJS 项目使用相同的代码库
【发布时间】:2016-04-03 15:47:31
【问题描述】:

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

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

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

此时,我的管理层不想创建单个应用程序(它包含一个屋檐下的所有 5 个应用程序的功能)。

目前的方法/目标是:

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

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

我目前的计划:

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

  2. 代码重构 - 移至 this link 中建议的“基于功能的目录”结构。

  3. 为每个特征创建一个角度模块(大约 10 个模块)。

我的疑问是 - 因为我将为所有 5 个应用程序使用相同的“common”代码(现在复制粘贴),

我怎样才能使这个通用代码在不同的应用程序中表现不同?

例如,

  1. 如果 application1,服务调用/app1/gettasks,或者如果 application2,服务调用/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

请发表您的想法...

更新:

在我的通用代码中,有服务、指令和过滤器。 对于指令和过滤器 - 没有特定于应用程序的代码

  1. 但是,在服务中,我怎样才能制作应用程序特定的 REST URL

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

【问题讨论】:

  • 5 个客户端应用程序是否都在与同一台服务器通信?或者服务器端也有不同的应用程序?
  • 服务器端也有 5 个不同的应用程序
  • 用更多信息更新了我的问题

标签: javascript angularjs code-reuse


【解决方案1】:

感谢@FrailWords 的回答。

我完成了对多个 Angular 应用程序使用相同 UI 代码库的建议。我在这里分享我的想法。

有些方法和我在这个问题中提到的一样。

本提案中要遵循的策略列表:

1.  Switch to feature based directory structure. 
2.  Create an angular module for each feature.
3.  Separate common code from instance specific code.
4.  Merge duplicate code.
5.  Remove unused code and outdated libraries.
6.  Re-organize codebase.
7.  Make common code as configurable.
8.  Use same configurable common code for all 5 instances.
9.  Use inheritance or similar mechanisms for extended functionality.
10. Identify & Move functions (methods) from instance specific code to common code.
11. Follow naming conventions.
12. Manage future requirements.
13. Use build tools like gulp or grunt and testing frameworks like jasmine.
14. Application specific look & feel.

如何实施这些策略:

我们将在下面看到每种策略的解决方案/方法。

1.切换到基于特征的目录结构。

当前目录结构:

它基于角度层/类型。也就是说,我们将所有控制器放在一个文件夹中,将所有服务放在另一个文件夹中等等。这是很好的小型应用程序。

例子:

建议的目录结构:

/resources
--/ui_core                                                      ui-core or common code
-----/app
-------------------core_module.js                   inject all modules from /ui_core/modules into this 
-------------------config_module.js                declare constants and inject into core_module 
-----/shared_services                                   part of core_module 
-----/shared_directives                                part of core_module – place directive’s js+html here
-----/shared_filters                                       part of core_module 
-----/shared_views                    
-----/shared_interceptors                 
-----/shared_content
------------/images
------------/icons
------------/signatures
-----/modules
 ------------/common_feature1
-------------------common_feature1_module.js
-------------------common_feature1Controller.js
-------------------common_feature1Service.js
-------------------common_feature1Directive.js
-------------------common_feature1Filter.js                                  if any
-------------------common_feature1_view.html
-------------------common_feature1_test.js
-------------------common_feature1.css                                         if any
------------/common_feature2
-------------------common_feature2_module.js
-------------------common_feature2Controller.js
-------------------common_feature2Service.js
-------------------common_feature2Directive.js
-------------------common_feature2Filter.js
-------------------common_feature2_view.html
-------------------common_feature2_test.js
-------------------common_feature2.css
-----/vendor                                                                      downloaded vendor libraries
------------/js
-------------------/angular
-------------------/kendo
-------------------/jquery
------------/css
-------------------/kendo
-------------------/bootstrap
------------/images
-------------------/kendo
-------------------/bootstrap
--/ui_equity                                    application specific code – for example: equity
-----/app                 
-------------------equity_module.js  inject ui_core module/any module as required.
-----/shared_services                     part of equity_module 
-----/shared_directives                  part of equity_module  – place directive’s js+html here
-----/shared_filters                         part of equity_module 
-----/shared_views
-----/interceptors
-----/content
------------/images
------------/icons
------------/signatures
-----/modules
 ------------/feature1
-------------------feature1_module.js
-------------------feature1Controller.js
-------------------feature1Service.js
-------------------feature1Directive.js
-------------------feature1Filter.js
-------------------feature1_view.html
-------------------feature1_test.js
-------------------feature1.css
------------/feature2
-------------------feature2_module.js
-------------------feature2Controller.js
-------------------feature2Service.js
-------------------feature2Directive.js
-------------------feature2Filter.js
-------------------feature2_view.html
-------------------feature2_test.js
-------------------feature2.css
--/minified
-----/ui_core
-----/ui_equity 
/webapp
-----/WEB-INF
------------/jsp
-------------------index.jsp
-------------------jsincludes.jsp
-------------------cssincludes.jsp
-------------------imageviewer.jsp
-------------------unauthorized.jsp

2。为每个特征创建一个角度模块。

要使我们的应用程序模块化,请为我们应用程序的每个主要特性/功能创建一个角度模块。我们可以在任何需要的地方注入这些模块。

好处:

  1. 易于重用模块化应用程序。

  2. 提高可读性:无需将单个组件注入其他组件,注入模块就足够了。

3.将通用代码与实例特定代码分开。

可作为 ui_core 一部分的项目列表(通用代码)

a.  Most of the directives
b.  Filters
c.  Utilities , such as arrayUtilities.js, dateUtilities.js, stringUtilities.js
d.  Services
e.  KendoGridServices & relevant controllers.
To make   kendoGrid as part of common code, below changes are required.

For example,
-   Create model outside datasource - Currently schema “model” is hardcoded inside abccontroller.js , instead of this create “kendo model” outside abccontroller.js and pass/inject to abccontroller.js

-   Currently “columns” are hardcoded inside kendoabcgridservice.js. Instead of this, create “columns array” outside and inject it into kendoabcgridservice.js .

-   Similarly, move out any other instance specific code from kendo grid.

以下策略是不言自明的,因此我们可以转到下一个...

    4.  Merge duplicate code.
    5.  Remove unused code and outdated libraries.
    6.  Re-organize codebase.

7.使通用代码可配置。

一个。在公共代码中创建配置模块

( /resources/ui_core/app/ config_module.js).

b.例如,在该模块内声明常量 APP_NAME = ‘equity’ 和任何需要的东西。

c。修改通用代码(ui_core),使用 APP_NAME 常量, 所以相同的代码块对于不同的应用程序会有不同的行为。

例如,

$resource(‘/APP_NAME/tasks’)代替$resource(‘/equity/tasks’)

注意:以上仅为示例目的(截至目前),服务调用 URL 的更改将在服务器/Java 端重构后最终确定。

示例 2:

If (APP_NAME == ‘equity’){
             //do ‘equity’ specific things
} else if (APP_NAME == ‘commodities’){  
           //do ‘commodities’ specific things
} else {
……………..
}

8.对所有 5 个实例使用相同的可配置通用代码。

    As explained earlier

9.为扩展功能使用继承或类似机制。

如果我们需要除可用功能之外的其他功能,而不是复制和粘贴现有文件并向该文件添加代码,我们可以使用下面的 Angular 继承机制。

使用

angular.extend 
Or 
angular.copy

或类似的方法。

10.识别并将函数(方法)从实例特定代码移动到通用代码。

As explained earlier

11.遵循命名约定

为了更好的可维护性和一致性,请定义并遵循某些文件命名约定。

例如,

如果功能名称是“用户”,那么命名可以如下所示。

/modules
-----/user
----------user_controller.js
----------user_service.js
----------user_directive.js
----------user_view.html
----------user_test.js

跟随 user_controller.js 或 user_ctrl .js ,但是,永远不要同时做。

12.管理未来的需求

当我们生活在现实世界中时,变化和增强是生活的一部分。 一旦我们实施了上述提议,修改/增强功能将非常容易,而不会影响应用程序的其他部分。

无论如何,在向现有代码库添加任何功能之前问自己这个非常重要的问题(此应用程序的开发人员)。

在哪里我要在公共代码或应用程序特定代码中添加此功能?

Enjoy and Have Fun :-)

【讨论】:

    【解决方案2】:

    一种可能的解决方案是 -

    • 为每个客户端应用维护一个“配置”属性文件
    • 根据这些配置值使用构建工具,如GruntGulppre-process html/js/css 文件。它基本上是一个文本搜索替换和条件包含。

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

    【讨论】:

    【解决方案3】:

    您可以将控制器创建为对象,然后扩展每个项目的默认控制器以添加特定行为,并使用服务。

    喜欢这里: https://github.com/nuxeo/nuxeo-drive/blob/master/nuxeo-drive-client/nxdrive/data/ui5/js/ndrive-settings.js

    【讨论】:

      猜你喜欢
      • 2015-04-24
      • 1970-01-01
      • 1970-01-01
      • 2015-05-14
      • 2021-06-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-12-05
      相关资源
      最近更新 更多