राउटर संकल्प नियंत्रक

Question

में इंजेक्ट नहीं करेगा, मैंने दिए गए नियंत्रक-AppCtrl को इसके मान को पास करने के लिए यूई-राउटर के संकल्प को प्राप्त करने के लिए सब कुछ करने का प्रयास किया है। मैं $inject के साथ निर्भरता इंजेक्शन का उपयोग कर रहा हूं, और ऐसा लगता है कि समस्याएं उत्पन्न होती हैं। मैं क्या खो रहा हूँ?

रूटिंग

$stateProvider.state('app.index', { 
    url: '/me', 
    templateUrl: '/includes/app/me.jade', 
    controller: 'AppCtrl', 
    controllerAs: 'vm', 
    resolve: { 
    auser: ['User', function(User) { 
     return User.getUser().then(function(user) { 
     return user; 
     }); 
    }], 
    } 
}); 

नियंत्रक

appControllers.controller('AppCtrl', AppCtrl); 

AppCtrl.$inject = ['$scope', '$rootScope']; 

function AppCtrl($scope, $rootScope, auser) { 
    var vm = this; 
    console.log(auser); // undefined 

    ... 
} 

संपादित यहाँ एक खनखनाहट http://plnkr.co/edit/PoCiEnh64hR4XM24aH33?p=preview

Answer 1

है आप निर्भरता इंज के रूप में मार्ग संकल्प तर्क का उपयोग करते हैं मार्ग से बंधे नियंत्रक में ईक्शन, आप उस नियंत्रक का उपयोग एनजी-नियंत्रक निर्देश के साथ नहीं कर सकते क्योंकि aname नाम के साथ सेवा प्रदाता मौजूद नहीं है। यह एक गतिशील निर्भरता है जिसे राउटर द्वारा इंजेक्शन दिया जाता है जब यह नियंत्रक को अपने संबंधित आंशिक दृश्य में बाध्य होने के लिए तत्काल करता है।

अपने उदाहरण में $timeout वापस लौटना भी याद रखें, क्योंकि यह एक वादा देता है अन्यथा आपका तर्क किसी मूल्य के साथ हल नहीं होगा, वही मामला है यदि आप $http या किसी अन्य सेवा का उपयोग कर रहे हैं।

यानी

resolve: { 
    auser: ['$timeout', function($timeout) { 
     return $timeout(function() { 
     return {name:'me'} 
     }, 1000); 
    }], 

नियंत्रक में संकल्प निर्भरता इंजेक्षन।

<div ui-view></div> 

Demo

Answer 2

यहाँ है कि कैसे मैं संकल्प के साथ काम करते हैं:

appControllers.controller('AppCtrl', AppCtrl); 

AppCtrl.$inject = ['$scope', '$rootScope','auser']; //Inject auser here 

function AppCtrl($scope, $rootScope, auser) { 
    var vm = this; 
    vm.user = auser; 
} 

एनजी नियंत्रक के बजाय ध्यान में रखते हुए

, ui-view निर्देश का उपयोग करें। यह वादा प्राप्त करना चाहिए। तो मैं तदनुसार सेवा बनाते हैं।

app.factory('User', function($http){ 
    var user = {}; 
    return { 
     resolve: function() { 
      return $http.get('api/user/1').success(function(data){ 
       user = data; 
      }); 
     }, 
     get: function() { 
      return user; 
     } 
    } 
}); 

यह मुख्य विचार है। तुम भी साथ $q

app.factory('User', function($q, $http){ 
    var user = {}; 
    var defer = $q.defer(); 

    $http.get('api/user/1').success(function(data){ 
     user = data; 
     defer.resolve(); 
    }).error(function(){ 
     defer.reject(); 
    }); 

    return { 
     resolve: function() { 
      return defer.promise; 
     }, 
     get: function() { 
      return user; 
     } 
    } 
}); 

ये कार्रवाई में लगभग समान हैं कुछ इस तरह कर सकते हैं। अंतर यह है कि पहले मामले में, सेवा resolve() सेवा की विधि को कॉल करते समय सेवा लाने शुरू हो जाएगी और दूसरे उदाहरण में यह फैक्ट्री ऑब्जेक्ट बनने पर शुरू हो जाएगा।

अब आपके राज्य में।

$stateProvider.state('app.index', { 
    url: '/me', 
    templateUrl: '/includes/app/me.jade', 
    controller: function ($scope, $rootScope, User) { 
    $scope.user = User.get(); 
    console.log($scope.user); 
    }, 
    controllerAs: 'vm', 
    resolve: { 
    auser: function(User) { 
     return User.resolve() 
    } 
    } 
});