2013-06-03 6 views
12

मैं एक सेवा है जो एक json वस्तु यह है कि बनाता है देता है, संक्षिप्तता के लिए कहते हैं कि यह इस तरह दिखता है की सुविधा देता है है:मैं AngularJS में किसी टेम्पलेट से सेवा कैसे कॉल कर सकता हूं?

.service ('levelService', function() { 

    // service to manage levels. 
    return { 
     levels : [{name:'Base', href:'base'},{name:'Level 1', href:'level1'},{name:'level2', href:'level2'}] 
    }; 

}) 

मुझे लगता है कि ठीक है, लेकिन मैं अब इसका इस्तेमाल करने की, एक टेम्पलेट में चाहते हैं। वर्तमान में मेरे पास ऐसा कुछ है:

<ul class="dropdown-menu" ng-init="levels = [{name:'Base', href:'base'},{name:'Level 1', href:'level1'},{name:'level2', href:'level2'}];"> 
         <li ng-repeat="level in levels"> 
     <a ng-href="#/modeling/level/{{level.href}}">{{level.name}}</a></li> 
        </ul> 

अब सेवा का उपयोग करने के लिए एनजी-इनिट कैसे प्राप्त किया जा सकता है? मुझे सही काम करने की तरह लगता है, नियंत्रक को सेवा जोड़ना है, लेकिन यह किसी भी नियंत्रक के बाहर है। क्या मुझे इस जगह के लिए एक नया नियंत्रक बनाने की ज़रूरत है, या क्या मैं सीधे सेवा का संदर्भ दे सकता हूं?

उत्तर

10

हां, यह नियंत्रक बनाने के लिए सबसे अच्छा अभ्यास होगा।

एमवीसी ऐप आर्किटेक्चर के पीछे विचार यह है कि आप अपने ऑब्जेक्ट/कक्षाओं को एक साथ जोड़कर कसकर नहीं जोड़ते हैं। एक नियंत्रक में एक सेवा इंजेक्शन, उसके बाद levels$scope में आपके नियंत्रक को जोड़ने का अर्थ है कि आपके एचटीएमएल को इस बारे में चिंता करने की ज़रूरत नहीं है कि यह कहां से डेटा प्राप्त करता है।

इसके अलावा, ng-init का उपयोग करके, एक बहुत तेज़ प्रोटोटाइप को खारिज करने के लिए तर्कसंगत रूप से ठीक है, लेकिन उस दृष्टिकोण को उत्पादन कोड में उपयोग नहीं किया जाना चाहिए (क्योंकि आपके मॉडल का डेटा स्वयं आपके दृश्य के HTML से कसकर जोड़ता है)।

युक्ति: आपके dropdown-menu (यानी पृष्ठ/अनुभाग) के मूल कंटेनर के लिए नियंत्रक का उपयोग करना एक अच्छा विचार हो सकता है और फिर अपने dropdown-menu के लिए निर्देश का उपयोग करें। एक दृश्य घटक के रूप में निर्देश के बारे में सोचो।

सामान्य रूप से, आपको egghead.io पर वीडियो ट्यूटोरियल मिल सकते हैं।

+0

धन्यवाद! निर्देश बनाने के बजाय, अपनी सलाह ली, बस एक और नियंत्रक बनाया। – nycynik

1

एक नियंत्रक में सेवा डाल .. तो फिर आप अपने टेम्पलेट में सेवा कॉल कर सकते हैं ..

app.controller('yourCtrl', function($scope, levelService) { 
    $scope.levelService= levelService; 
}); 
संबंधित मुद्दे