[解決済み] [Solved] Angular.jsで異なる環境を設定するには？

質問

異なる環境の設定変数/定数をどのように管理するのですか？

これは一例と言えるでしょう。

私のレストAPIは localhost:7080/myapi/ しかし、Git バージョン管理下で同じコードに取り組んでいる私の友人は、API を彼の Tomcat 上で localhost:8099/hisapi/ .

仮にこのようなものがあったとして :

angular
    .module('app', ['ngResource'])

    .constant('API_END_POINT','<local_end_point>')

    .factory('User', function($resource, API_END_POINT) {
        return $resource(API_END_POINT + 'user');
    });

環境に応じて、APIエンドポイントの正しい値を動的に注入するにはどうすればよいですか？

PHPでは、通常このようなことは config.username.xml 基本設定ファイル (config.xml) とユーザー名で認識されるローカル環境設定ファイルをマージしています。しかし、JavaScriptでこのようなことを管理する方法がわからないのですが？

どのように解決するのですか？

ちょっとスレッドが遅れてしまいましたが、もしあなたが グラント で大成功を収めました。 grunt-ng-constant .

のコンフィグセクションは ngconstant 私の Gruntfile.js は次のようになります。

ngconstant: {
  options: {
    name: 'config',
    wrap: '"use strict";\n\n{%= __ngModule %}',
    space: '  '
  },
  development: {
    options: {
      dest: '<%= yeoman.app %>/scripts/config.js'
    },
    constants: {
      ENV: 'development'
    }
  },
  production: {
    options: {
      dest: '<%= yeoman.dist %>/scripts/config.js'
    },
    constants: {
      ENV: 'production'
    }
  }
}

を使用するタスクは ngconstant のように見えます。

grunt.registerTask('server', function (target) {
  if (target === 'dist') {
    return grunt.task.run([
      'build',
      'open',
      'connect:dist:keepalive'
    ]);
  }

  grunt.task.run([
    'clean:server',
    'ngconstant:development',
    'concurrent:server',
    'connect:livereload',
    'open',
    'watch'
  ]);
});

grunt.registerTask('build', [
  'clean:dist',
  'ngconstant:production',
  'useminPrepare',
  'concurrent:dist',
  'concat',
  'copy',
  'cdnify',
  'ngmin',
  'cssmin',
  'uglify',
  'rev',
  'usemin'
]);

ということで、実行中 grunt server を生成します。 config.js のファイルを app/scripts/ のようになります。

"use strict";
angular.module("config", []).constant("ENV", "development");

最後に、必要なモジュールに依存することを宣言します。

// the 'config' dependency is generated via grunt
var app = angular.module('myApp', [ 'config' ]);

これで、私の定数は必要なところに依存性注入ができるようになりました。例えば

app.controller('MyController', ['ENV', function( ENV ) {
  if( ENV === 'production' ) {
    ...
  }
}]);