AngularJS
定数

備考

最初の定数を作成する

angular
  .module('MyApp', [])
  .constant('VERSION', 1.0);

定数は宣言され、コントローラ、サービス、ファクトリ、プロバイダ、さらにはコンフィグレーションメソッドでも注入できます：

angular
  .module('MyApp')
  .controller('FooterController', function(VERSION) {
    this.version = VERSION;
  });

<footer ng-controller="FooterController as Footer">{{ Footer.version }}</footer>

ユースケース

ここでは革命はありませんが、角度定数は、アプリケーションやチームが成長し始めたとき、または単に美しいコードを書くことを愛している場合に特に便利です！

• リファクタリングコード。イベントの名前の例。アプリケーションで多くのイベントを使用する場合は、イベントの名前はどこにでもあります。新しい開発者があなたのチームに加わったとき、彼は異なる構文で自分のイベントに名前をつけます...あなたは簡単にイベントの名前を定数でグループ化することでこれを防ぐことができます：

  angular
    .module('MyApp')
    .constant('EVENTS', {
      LOGIN_VALIDATE_FORM: 'login::click-validate',
      LOGIN_FORGOT_PASSWORD: 'login::click-forgot',
      LOGIN_ERROR: 'login::notify-error',
      ...
    });
  

  angular
    .module('MyApp')
    .controller('LoginController', function($scope, EVENT) {
      $scope.$on(EVENT.LOGIN_VALIDATE_FORM, function() {
        ...
      });
    })
  

...そして今、あなたのイベントの名前はオートコンプリートから利益を得ることができます！

• 構成を定義します。すべての構成を同じ場所に配置します。

  angular
    .module('MyApp')
    .constant('CONFIG', {
      BASE_URL: {
        APP: 'http://localhost:3000',
        API: 'http://localhost:3001'
      },
      STORAGE: 'S3',
      ...
    });
  

• 部品を分離する。時には、あなたが非常に誇りに思っていないものがいくつかあります。たとえば、ハードコードされた値です。あなたのメインコードでそれらを使用させる代わりに、角度定数を作成することができます

  angular
    .module('MyApp')
    .constant('HARDCODED', {
      KEY: 'KEY',
      RELATION: 'has_many',
      VAT: 19.6
    });
  

...リファクタリングのようなもの

$scope.settings = {
  username: Profile.username,
  relation: 'has_many',
  vat: 19.6
}

に

$scope.settings = {
  username: Profile.username,
  relation: HARDCODED.RELATION,
  vat: HARDCODED.VAT
}