AngularJS ऐप: JSON एक बार से लोड डेटा और कई नियंत्रकों

Question

मैं एक ढांचे के रूप AngularJS का उपयोग कर एक मोबाइल एप्लिकेशन पर काम कर रहा हूँ में इसका इस्तेमाल करते हैं, वर्तमान में मैं एक संरचना इस के समान है:

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
     .when('/', { 
      templateUrl : 'pages/home.html', 
      controller : 'homeCtrl' 
     }) 

     .when('/one', { 
      templateUrl : 'pages/one.html', 
      controller : 'oneCtrl' 
     }) 

     .when('/two', { 
      templateUrl : 'pages/two.html', 
      controller : 'twoCtrl' 
     }); 
}]); 

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

}]); 

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

}]); 

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

}]); 

और फिर मैं 'm एक ng-view साथ सामग्री प्रदर्शित:

<div class="ng-view></div> 

चीजें अच्छी तरह से काम कर रहे हैं, लेकिन मैं अनुप्रयोग की सभी सामग्री को भरने के लिए एक JSON फ़ाइल से डेटा लोड करने की जरूरत है। मैं क्या चाहता हूं और एक AJAX कॉल केवल एक बार और फिर मेरे सभी अलग-अलग नियंत्रकों के माध्यम से डेटा पास करें। मेरे पहले प्रयास में, मैंने इसके अंदर $http.get() के साथ एक सेवा बनाने का विचार किया और इसमें शामिल है कि प्रत्येक नियंत्रक में, लेकिन यह काम नहीं करता है क्योंकि जब भी मैं इंजेक्ट करता हूं और सेवा का उपयोग करता हूं तो यह एक अलग AJAX अनुरोध करता है। चूंकि मैं कोणीय का उपयोग कर नया हूं, मैं सोच रहा हूं कि इसे गड़बड़ किए बिना इसे प्राप्त करने का सबसे अच्छा तरीका या अधिक "कोणीय तरीका" क्या है।

संपादित करें: मैं सेवा है, जो सिर्फ एक सरल $http.get अनुरोध है की कोड जोड़ रहा:

app.service('Data', ['$http', function($http) { 
    this.get = function() { 
     $http.get('data.json') 
     .success(function(result) { 
      return result; 
     }) 
    } 
}); 

Answer 1

यह एक प्राप्त लिंक से JSON डेटा प्राप्त करने के लिए प्रयास करें:

myService.getData().then(function(data){ 
    //use data here 
}, function(err){ 
    //Handle error here 
}); 

Answer 2

एक बार वादा प्रारंभ, और यह करने के लिए एक संदर्भ वापसी:

नहीं एक और वादा शुरू करने की जरूरत है। $ http एक रिटर्न देता है।

बस परिणाम को संशोधित करने के

angular.module('app', []) 
    .service('service', function($http){ 
    this.promise = null; 
    function makeRequest() { 
     return $http.get('http://jsonplaceholder.typicode.com/posts/1') 
      .then(function(resp){ 
        return resp.data; 
      }); 
    } 
    this.getPromise = function(update){ 
     if (update || !this.promise) { 
     this.promise = makeRequest(); 
     } 
     return this.promise;  
    } 
    }) 

Codepen example

संपादित अपने वादे पर एक .then() कॉल हमले: आप के बजाय $ http कैश उपयोग करने पर विचार कर सकते हैं। यह एक ही परिणाम प्राप्त कर सकते हैं। From the docs:

अनेक एक अनुरोध एक ही कैश है, जो अब तक तैयार नहीं है का उपयोग किया जाता है, तो एक अनुरोध सर्वर को किया जाएगा और शेष अनुरोधों एक ही प्रतिक्रिया वापस आ जाएगी।