使用服務常量配置值

Question

在我最近的項目中，我提出了一些API請求。

就我需要設置不同的端點（本地開發，遠程生產）而言，我在定義應用程序時設置了使用的端點的值。一切正常。

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

唯一的問題是，我想從定義了一些常數a服務設置端點http://localhost:8000 [1]。我嘗試使用運行和配置塊，但沒有設置值。我正在做這樣的事情，沒有任何結果。

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

它看起來像咕嚕-NG-不斷創建新的模塊文件來定義常數。除了將包含這些常量的模塊聲明爲依賴項之外，您不必在應用程序的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這是不可能的。

感謝大家的幫助。