AngularJS 1.4中提取公共URL前缀至全局变量并在服务中调用问题

我来帮你解决这个AngularJS里全局API路径拼接的问题！

你遇到的核心问题是：普通ES6类没有接入AngularJS的依赖注入（DI）系统，直接import使用会因为DI上下文或模块加载顺序问题，导致在UserService里拿不到变量值。下面是两种靠谱的解决方式：

推荐方案：用Angular常量（constant）存储静态全局路径 #

常量是AngularJS官方推荐的存储静态全局配置的方式，它能在应用的配置阶段和运行阶段被注入，完全适配API前缀这类固定值的场景。

1. 定义全局API前缀常量 #

创建commonVariables.js文件，把公共路径注册为Angular常量：

angular.module('yourAppName')
  .constant('API_BASE_URL', '/users/api');

2. 在UserService中注入并拼接URL #

修改你的UserService，通过DI注入常量后拼接接口路径：

// 确保先加载常量所在的模块
import './commonVariables';

class UserService {
  /*@ngInject*/
  constructor($rootScope, Rest, API_BASE_URL) {
    // 把依赖和常量挂载到实例上
    Object.assign(this, { $rootScope, Rest, API_BASE_URL });
  }

  // 获取用户接口
  getUser() {
    const fullUrl = `${this.API_BASE_URL}/getUser`;
    return this.Rest.get(fullUrl);
  }

  // 添加用户接口
  addUser(userData) {
    const fullUrl = `${this.API_BASE_URL}/addUser`;
    return this.Rest.post(fullUrl, userData);
  }

  // 删除用户接口
  deleteUser(userId) {
    const fullUrl = `${this.API_BASE_URL}/deleteUser/${userId}`;
    return this.Rest.delete(fullUrl);
  }
}

// 把UserService注册到Angular模块
angular.module('yourAppName')
  .service('UserService', UserService);

备选方案：用Angular服务（service）封装带动态逻辑的全局变量 #

如果你的公共路径需要根据环境（开发/生产）动态切换，可以把CommonVariables注册成Angular服务：

1. 注册CommonVariables服务 #

// commonVariables.js
class CommonVariables {
  constructor() {
    // 这里可以根据环境动态设置路径
    this.API_BASE_URL = '/users/api';
  }
}

angular.module('yourAppName')
  .service('CommonVariables', CommonVariables);

2. 在UserService中注入服务 #

class UserService {
  /*@ngInject*/
  constructor($rootScope, Rest, CommonVariables) {
    Object.assign(this, { $rootScope, Rest, CommonVariables });
    this.apiBaseUrl = this.CommonVariables.API_BASE_URL;
  }

  getUser() {
    const fullUrl = `${this.apiBaseUrl}/getUser`;
    return this.Rest.get(fullUrl);
  }

  // 其他接口方法同理...
}

angular.module('yourAppName')
  .service('UserService', UserService);

内容的提问来源于stack exchange，提问作者Dharita Chokshi