AngularJS - 서비스에서 컨트롤러 함수 호출

Question

저는 Angular에서 너무 초록색입니다.이 검색을 제대로 구조화하고 있는지 확실하지 않습니다. 전체 지침과 서비스 용어는 여전히 나에게 다소 혼란 스럽지만, 그것은 내 질문이 아닙니다.

나는 백업이 우수한 기사 시리즈의 앞을 읽었습니다 : 내 응용 프로그램에서이 시점에서 나는 왜 http://www.ng-newsletter.com/posts/beginner2expert-how_to_start.html

입니다. 그리고 왜 내 질문이 서비스와 컨트롤러 간의 관계에 더 관련이 있는지 알 수 있습니다. 구문과 관련이 있습니다.

다음은 앱의 개요입니다.

컨트롤러가 하나 있습니다. 이것은 떨어져 나가고 PHP 파일에 AJAX 호출을 사용하여 사용자를위한 팜 데이터를 가져 와서 자신의 $ scope를 사용하여 화면에 표시합니다.

var masterApp = angular.module('masterApp', ['myFilters','commonControls']); 

masterApp.controller('MasterCtrl', ['$scope','$http', '$filter', 'commonFarmSelector', 
    function($scope, $http, $filter, commonFarmSelector){ 

     ... 

     $scope.masterCtrl.loadFarmData = function(farmId) { 
      var postdata = { 
       "farmId":farmId 
      }; 

      $http.post('/service/farmproduction', postdata).success(function (data) { 
       // Do stuff with the $scope using data 
      } 
     } 

     $scope.masterCtrl.loadFarms(); 
} 

"commonControls"라는 것을 주입하고 있습니다. 이것은 여러 컨트롤러가 다시 사용할 수있는 컨트롤을 보유하기 위해 만든 모듈입니다. 이것은 잘 작동

var commonControlsApp = angular.module('commonControls', []); 

commonControlsApp.controller('farmSelectorCtrl', ['$scope', '$http',function($scope, $http) { 

    $scope.farmSelectorCtrl ={} 

    // Change entire farm view when a different farm is selected 
    $scope.farmSelectorCtrl.switchUserFarm = function() { 
     var farmId = $scope.farmSelectorCtrl.selectedUserFarm; 
     $scope.masterCtrl.loadFarms(farmId); // !!! Direct link to masterCtrl 
    }; 

    // Get a list of the user's farms 
    $http.post('/service/userfarms').success(function (data) { 
     $scope.farmSelectorCtrl.userFarms = data.getFarmsPerUserResult.farmIds; 
    }); 

}]); 

이 경우, (또한 AJAX 호출에 의해 수득)는 사용자가 액세스 할 수있는 농장의리스트를 포함하는 드롭 다운 필드. 그러나 볼 수 있듯이 farmSelector는 masterCtrl에 직접 연결됩니다. 그 loadFarmData 함수의 동작은 해당 컨트롤러에만 해당됩니다. 즉, 해당 페이지에만 적용되는 작업을 수행합니다.

이 FarmSelector는 다른 페이지에서 사용됩니다. 그리고 변경 이벤트의 정확한 동작은 각 페이지마다 다를 수 있습니다. 그래서 나는이 행동이 어디에 있어야 하는지를 고민하고 있습니다. 그리고 farmSelector를 사용하여 컨트롤러에서 종속성을 호출하는 방법.

위에서 링크 된 기사에서는이 farmSelector가 서비스에 있어야 다른 곳에서 재사용 할 수 있음을 제안합니다. 그러나 나는 일반적인 서비스에 이벤트가 발생했을 때 취할 구체적인 조치를 제공하는 방법에 대해 여전히 혼란 스럽다.

Answer 1

나는 기사가 제안하는 것과 같은 이유로 서비스도 좋습니다. 그것은 또한 당신의 문제에 대한 훌륭한 대답을 가지고 있습니다.

원하는 기술 용어는 보조 기능입니다. 정확하게 이벤트가 트리거 될 때 수행 할 특정 작업이며, 기사의 서비스 섹션에서는이를 수행하는 방법에 대한 좋은 예를 제공합니다.

그래서 우리는 현재 서비스를 가지고

angular.module('myApp.services', []) 
    .factory('githubService', ['$http', function($http) { 

    var doRequest = function(username) { 
     return $http({ 
     url: 'https://MySuperURL.com/getTheData' 
     }); 
    } 

    return { 
     events: doRequest 
    }; 

}]); 

(필자는 중요한 부분까지 손질 한) 서비스 기사의이 섹션에서 살펴 보자는 하나 개의 방법이있는, githubService라고 : (정말 doRequest 단지 다른 이름입니다. 그것은이 기사의 코드와 일치 할 수 있도록 내가 이름 바꾸기를 유지) events 뒤에서 여기에 숨겨진

때로는라고하는 $q API입니다 '약속'API. $http 함수는 'promise'객체를 반환하는데, 이는 'promise'가 완료되었을 때 일어날 일을 추적하는 코드 일뿐입니다.예를 들어 다음 코드를 다시 보겠습니다 (다시 기사의 버전에서 수정).

app.controller('ServiceController', ['$scope', 'githubService', 
function($scope, githubService) { 

    // uses the $http service to call the GitHub API 
    // and returns the resulting promise 
    githubService.events(newUsername) 
    .success(function(data, status, headers) { 
     // do magic stuff with the result 
     // (which is in the data param) 
     $scope.events = data.data; 
    }) 
}); 

]]);

'마법'이 발생하는 곳입니다. success()에 대한 호출을 살펴보면 실제로 요청이 작동 할 때 실행해야하는 function을 전달하고 있음을 알 수 있습니다. 함수는 여전히 닫힘으로 인해 ServiceController에있는 모든 변수에 액세스 할 수 있으므로 $scope 및 다른 변수를 사용할 수 있습니다. 그러나 매번 다른 함수를 전달하여 모든 컨트롤러에 다른 success() 메서드를 작성할 수 있으므로 여러 컨트롤러가 서로 다른 동작을 수행 할 수 있습니다. 요청이 완료되면 모든 success 함수가 호출됩니다.

이 코드 예제를 따르면 작동하는 모델을 얻을 수 있지만 $q in angular을 살펴보고 callback functions에 대해 살펴 보시기 바랍니다. 진행 상황을 파악하기 위해서는 두 가지를 모두 이해할 필요가 있지만 좋은 소식은 두 가지 모두 각도가 너무 많이 사용되므로 시간을 투자 할 가치가 있다는 것입니다.