AngularJSで環境による設定を切り替える

Yeomanで作ったAngularJSプロジェクトで環境ごとの設定を管理する方法です。Gruntで動的にconstantとvalueのモジュールを生成するgrunt-ng-constantを利用します。

grunt-ng-constantをインストールする

npmでgrunt-ng-constantをインストールします

$ npm install grunt-ng-constant --save-dev

環境ごとの設定ファイルを作成する

config ディレクトリを作成し、配下に development.json test.json production.json を用意します

config/development.json

{
  "env": "development"
}

ビルドの設定を行う

Gruntfile.js を編集して grunt-ng-constant の設定を行います

Gruntfile.js

  grunt.initConfig({
    // grunt-ng-constant
    ngconstant: {
      options: {
        name: 'config',
        dest: '<%= yeoman.app %>/scripts/config/config.js',
      },
      development: {
        constants: {
          config: grunt.file.readJSON('config/development.json'),
        }
      },
      test: {
        constants: {
          config: grunt.file.readJSON('config/test.json'),
        }
      },
      production: {
        constants: {
          config: grunt.file.readJSON('config/production.json'),
        }
      }
    }
  });

  grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
    if (target === 'dist') {
      return grunt.task.run(['build', 'connect:dist:keepalive']);
    }

    var env = target || 'development';
    grunt.log.writeln('Set enviroment ' + env);
    grunt.task.run([
      'clean:server',
      'ngconstant:' + env,
      'wiredep',
      'concurrent:server',
      'autoprefixer:server',
      'connect:livereload',
      'watch'
    ]);
  });

  grunt.registerTask('test', [
    'clean:server',
    'ngconstant:test',
    'wiredep',
    'concurrent:test',
    'autoprefixer',
    'connect:test',
    'karma'
  ]);

  grunt.registerTask('build', function(target) {
    var env = target || 'production';
    grunt.log.writeln('Set enviroment ' + env);
    grunt.task.run([
      'clean:dist',
      'ngconstant:' + env,
      'wiredep',
      'useminPrepare',
      'concurrent:dist',
      'autoprefixer',
      'concat',
      'ngAnnotate',
      'copy:dist',
      'cdnify',
      'cssmin',
      'uglify',
      'filerev',
      'usemin',
      'htmlmin'
    ]);
  });

AngularJSでgrunt-ng-constantが生成するファイルを読み込む

grunt-ng-constantが生成する config.js を読み込むように index.html に追加します

app/index.html

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/config/config.js"></script>
        <!-- endbuild -->

config.js に出力される config モジュールを読み込むよう app.js に追加します

app/scripts/app.js

angular
  .module('myApp', [
    'config'
  ]);

環境を指定してビルドする

serve / build で環境を指定してコマンドを実行します

$ grunt serve:production