리팩토링 AngularJS 코드 - 함수 추출

Question

저는 AngularJS 앱을 만들고 있습니다. 앱이 모듈에 크게 의존하고 있습니다. 컨트롤러와 지시문이있는 모듈이 있습니다. 모듈은 다음과 같습니다.

angular.module('myApp.component', []) 
    .controller('ShellCtrl', function ($scope, $location, $rootScope, $gustoAreas) { 
     $scope.myVariable = false; 
    }) 
    .directive('myDirective', function(){ 
     return { 
      restrict: 'E', 
      replace: true, 
      template: function() { 
       return '<div>Some HTML Goes Here</div>'; 
      }, 
      scope: true 
     }; 
    }) 
; 

템플릿을 보유하는 함수를 추출하여 이름으로 참조 할 수 있습니다. 즉, 다음과 같은 것을하고 싶습니다.

.directive('myDirective', function(){ 
     return { 
      restrict: 'E', 
      replace: true, 
      template: generateTemplate(), 
      scope: true 
     }; 
    }) 

JavaScript 구문은 약간 녹색입니다. 제 질문은 지금 generateTemplate을 어디에 정의합니까? 어떻게 부르죠? generateTemplate() 또는 generateTemplate (괄호 사용 또는 사용 안함)을 사용해야합니까?

도움 주셔서 감사합니다.

Answer 1

가장 간단한 방법은 다음과 같이 값을 정의하는 것입니다

angular.module('myApp.component', []) 
    .constant('generateTemplate', '<div>Some HTML Goes Here</div>'); 

을 그리고 당신의 지시 또는 모든 곳이 그것을 필요에 주입 :

.directive('myDirective', function(generalTemplate){ 
    return { 
     restrict: 'E', 
     replace: true, 
     template: generalTemplate, 
     scope: true 
    }; 
}) 

Answer 2

서비스에 generateTemplate 코드를 추출 할 수 있다고 생각합니다. generateTemplate()이 DOM을 포함하는 문자열을 반환한다고 가정하면 괄호로 호출해야합니다.

templateUrl 옵션을 함께 사용하는 것이 좋을 수 있으므로 코드 번호 template을 사용하는 대신 별도의 HTML/템플릿 파일을 사용하여 코드를 모듈화 할 수 있습니다.

Answer 3

전역 범위에서 generateTemplate을 정의 할 수 있습니다. function generateTemplate() {...} 이전 또는 이후로 컴파일하기 전에 중요하지 않습니다. 함수 참조를 필요로하는 동안 괄호를 넣어서 함수 실행을 트리거하면 안됩니다.

angular.module('myApp.component', []) 
    .value('generateTemplate', '<div>Some HTML Goes Here</div>'); 

또는이 같은 :