एंगुलरजेएस - एक सेवा से नियंत्रक फ़ंक्शन को कॉल करना

Question

मैं कोणीय में इतना हरा हूं, मुझे यह भी यकीन नहीं है कि मैं इस के लिए एक खोज की संरचना कर रहा हूं। पूरा निर्देश और सेवा शब्दावली अभी भी मुझे कुछ भ्रमित कर रही है, लेकिन यह मेरा सवाल नहीं है।

मैं वापस करने के लिए इस उत्कृष्ट लेख श्रृंखला सामने पढ़ा है: http://www.ng-newsletter.com/posts/beginner2expert-how_to_start.html

इसीलिए मैं अपने आवेदन में इस बिंदु पर कर रहा हूँ। और मुझे क्यों पता है कि मेरा प्रश्न सेवाओं और नियंत्रकों के बीच संबंधों से अधिक संबंधित है। वाक्यविन्यास से संबंधित।

मैं एक नियंत्रक है:

तो यहाँ एप्लिकेशन के एक सिंहावलोकन है। यह बंद हो जाता है और एक PHP फ़ाइल में AJAX कॉल का उपयोग कर उपयोगकर्ता के लिए खेत डेटा का एक गुच्छा प्राप्त करता है, और इसे अपने स्वयं के $ स्कोप का उपयोग करके स्क्रीन पर प्रदर्शित करता है।

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(); 
} 

आप देखेंगे कि मैं "कॉमनकंट्रोल" नामक कुछ इंजेक्शन कर रहा हूं। यह एक मॉड्यूल था जिसे मैंने नियंत्रण रखने के लिए बनाया था जिसे एकाधिक नियंत्रकों द्वारा पुन: उपयोग किया जाएगा।

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 से जुड़ा हुआ है। और उस लोड का व्यवहार FarmData फ़ंक्शन उस नियंत्रक के लिए विशिष्ट है। दूसरे शब्दों में, यह केवल उन चीजों को करेगा जो उस पृष्ठ पर लागू होते हैं।

बात यह है कि, इस फार्म चयनकर्ता का उपयोग अन्य पृष्ठों पर किया जाएगा। और प्रत्येक पृष्ठ के लिए एक परिवर्तन घटना का सटीक व्यवहार अलग होगा। इसलिए मैं यह काम करने के लिए संघर्ष कर रहा हूं कि इस व्यवहार को कहाँ बैठना चाहिए। और इसे 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 कहा जाता है, जो एक विधि है: events (जो वास्तव में doRequest के लिए सिर्फ एक अलग नाम है,। इतना है कि यह लेख के कोड के साथ मिलान होगा मैं नाम बदलने रखा)

यहाँ पर्दे के पीछे छिपे हुए $q एपीआई, जो कभी कभी के रूप में जाना जाता है है 'वादा' एपीआई। फ़ंक्शन $http एक 'वादा' ऑब्जेक्ट देता है, जो कोड के लिए वास्तव में एक तरीका है ताकि 'वादा' किया जाने पर क्या होनी चाहिए।उदाहरण के लिए, आइए इस अगले कोड को देखें (फिर से, आलेख के संस्करण से संशोधित):

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 पर भी देखें। आपको वास्तव में क्या हो रहा है, यह जानने के लिए दोनों को समझने की जरूरत है, लेकिन अच्छी खबर यह है कि वे दोनों कोणीय में अक्सर उपयोग किए जाते हैं, इसलिए यह आपके समय के लायक होगा।