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
}