使用服务常量配置值

Question

在我的最新项目中，我提出了一些API请求。

只要我需要设置不同的端点(本地开发、远程生产)，我就会在定义应用程序时设置所用端点的值。一切都运行得很好。

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

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

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

这在我看来相当可怕，但我不知道如何解决这个问题。非常感谢。

1

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这是不可能的。

感谢大家的帮助。