Question

在我的最新项目中，我正在制作一些API请求。

就我需要设置不同的端点（本地开发，远程生产）而言，我在定义应用时设置了使用的端点的值。一切正常。

var app = angular.module('app', ['lelylan.dashboards.device', 'ngMockE2E'])
  app.value('client.config', { endpoint: 'http://localhost:8000' });

唯一的问题是我想从定义一些常量[1]的服务设置端点http://localhost:8000。我尝试使用run和config块，但未设置该值。我正在做这样的事情，没有任何结果。

var app = angular.module('app', ['lelylan.dashboards.device', 'ngMockE2E'])
  .config(function(ENV) {
    app.value('lelylan.client.config', { endpoint: ENV.endpoint });
  })

这对我来说非常糟糕，但我不知道如何解决这个问题。非常感谢。

[1] grunt-ng-constant

Answer 1

请参见此处：http://jsbin.com/foqar/1/

 var app = angular.module('app', []);

    var client = {
      endpoint : 'http://localhost:8000'

    }
    app.value('config', client);

    app.controller('firstCtrl', function($scope, config){


      $scope.endpoint = config.endpoint;

    });

或：http://jsbin.com/foqar/2/edit

var app = angular.module('app', []);


app.value('config',{client :{endpoint : 'http://localhost:8000'}});

app.controller('firstCtrl', function($scope, config){


  $scope.endpoint = config.client.endpoint;

});

Answer 2

看起来grunt-ng-constant创建了一个新的模块文件来定义常量。除了将包含这些常量的模块声明为依赖项之外，您不必在应用程序JS文件上烦恼它。

以下内容与documentation of grunt-ng-constant

的示例配置相同

grunt.initConfig({
  ngconstant: {
    options: {
      name: 'config',
      dest: 'config.js',
      constants: {
        title: 'grunt-ng-constant',
        debug: true
      }
    },
    dev: {
      constants: {
        title: 'grunt-ng-constant-beta'
      }
    },
    prod: {
      constants: {
        debug: false
      }
    },
  }
});

在options部分中，指定模块的名称，要写入的模块的文件以及一组常量。它的工作原理如下，

options: {
  name: 'config',
  dest: 'config.js',
  constants: {
    title: 'grunt-ng-constant',
    debug: true
  }
}

以上代码将成为，

/*File: config.js*/
angular.module('config', [])

.constant('title', 'grunt-ng-constant')

.constant('debug', true);

要根据您的方案（开发/生产）更改常量，您将使用不同的任务集。这是dev和prod部分发挥作用的地方

考虑到您正在使用ng-boilerplate，在gruntfile.js中您可以构建和编译任务。构建任务在开发期间使用，编译使您的应用程序准备好进入生产阶段。

在build task中添加ngconstant:dev，在compile task添加ngconstant:prod。

grunt.registerTask('build', ['clean', 'html2js', 'otherTasksComeHere', 'ngconstant:dev']);
grunt.registerTask('compile', ['clean', 'html2js', 'otherTasksComeHere', 'ngconstant:prod']);

对于您的方案，代码如下：

/*gruntfile.js*/
grunt.initConfig({
  ngconstant: {
    options: {
      name: 'lelylan.client.config',
      dest: 'config.js',
      values: {
        endpoint : 'http://localhost:8000'
      }
    },
    dev: {
        debug: true
    },
    prod: {
        endpoint: 'http://www.production-server.com/',
        debug: false
    }
  },
});

grunt.registerTask('build', ["ngconstant:dev"]);
grunt.registerTask('compile', ["ngconstant:prod"]);
grunt.registerTask.('default', ["build", "compile"]);



/*app.js*/
var app = angular.module('app', ['lelylan.dashboards.device', 'leylan.client.config', 'ngMockE2E']);

app.controller("appCtrl", ["$scope", "$http", "endpoint", 
    function($scope, $http, endpoint) {
        $scope.submit = function(formData) {
                $http.post(endpoint+'/processform.php', formData);
            }
}]);

现在一切都取决于您是运行grunt build还是grunt compile。 使用grunt命令时会运行默认任务。

Answer 3

解决方案是使用提供商。正如文档所述：

在应用程序引导期间，在Angular关闭之前创建所有服务，它配置和实例化所有提供者。我们称之为应用程序生命周期的配置阶段。在这阶段服务无法访问，因为它们尚未创建爱好。

出于这个原因，我创建了一个提供程序来设置所需的配置。

<script>
angular.module('app', ['lelylan.dashboards.device'])

angular.module('app').config(function(lelylanClientConfigProvider, ENV) {
  lelylanClientConfigProvider.configure({ endpoint: ENV.endpoint });
});
</script>

通过这种方式，所有服务都可以使用新端点。使用.value这是不可能的。

感谢大家的帮助。

使用服务常量配置值

3 个答案: