项目中angular js的接口url统一管理

为了防止环境改变时需要修改多处接口的url,项目中用到了一个config.json文件来统一管理url:

  1. 在src下建立config文件夹,创建config.json文件,主要内容如下:
    {
        "hempConfig": {
            "basePath": "**************",
            "kpPath": "***********",
            "messageCenterBasePath":"************",
            "messageCenterHomepageUrl":"*************"
        },
        "currentVersion": "*****",
        "currentBuildNumber": ****,
        "pkgIdentifier": "*******"
    }
  2. 在directives文件夹下创建hngConfigLoader.js文件,主要内容如下:
    var hngConfigLoader = ['$window', '$http', '$log', function ($window, $http, $log) {
        return {
            restrict: "E",
            link: function (scope, element, attrs) {
                for (var attr in attrs) {
                    if (attr.substr(0, 1) !== '$') {
                        scope.attr = attr;
                        $http.get(attrs[scope.attr]).then(function (response) {
                            $window[scope.attr] = response.data;
                            $log.debug(angular.toJson($window[scope.attr], true));
                        });
                    }
                }
            }
        };
    }];
    
    module.exports = hngConfigLoader;
  3. 在index.html中引入该directive
    <hng-config-loader root-config="config/ClientConfig.json"></hng-config-loader>

     这里的root-config就是window["rootConfig"];ts文件在GlobalDefinition中新增

    rootConfig?: {
            "hempConfig": {
                "basePath": string,
                "kpPath": string,
                "messageCenterBasePath":string,
                "messageCenterHomepageUrl":string
            },
            "currentVersion": string,
            "pkgIdentifier": string
        };

    指明类型。

  4. 这样在service文件或者其他地方需要调用接口时只需要用例如:
    →  .ts
     var url = $window["rootConfig"]["hempConfig"]["basePath"] + "****";
    →  .js
    var url = window["rootConfig"]["hempConfig"]["basePath"] + "*****";

    这样的形式就可以了,环境改变时就不需要每次去各个地方修改url,只需要去config.json文件中统一修改即可。

原文地址:https://www.cnblogs.com/li-you/p/6066942.html