कोणीय में 2 समान नियंत्रकों से प्रोटोटाइप कैसे बनाएं?

Question

मेरे ऐप में मेरे पास लगभग लगभग समान नियंत्रक हैं। बहुत सारे काम समान हैं, इसलिए मैं उन्हें प्रोटोटाइप करना चाहता हूं।

c2gcontroller.js

angular.module('c2gyoApp') 
    .controller('C2gCtrl', function($scope) { 
    // some unique stuff 
    $scope.feeDay = 59; 
    ... 
    // the identical functions 
    $scope.getMinutes = function(minutes) { 
     var duration = moment.duration(minutes, 'm'); 
     return duration.minutes(); 
    }; 
    ... 
    }); 

और नियंत्रक # 2::

c2gbcontroller.js

angular.module('c2gyoApp') 
    .controller('C2gbCtrl', function($scope) { 
    // some unique stuff 
    $scope.feeDay = 89; 
    ... 
    // the identical functions 
    $scope.getMinutes = function(minutes) { 
     var duration = moment.duration(minutes, 'm'); 
     return duration.minutes(); 
    }; 
    ... 
    }); 

मैं में $scope.getMinutes डालने की कोशिश की है इस नियंत्रक # 1 है एक कारखाना:

smfactory.js

angular.module('c2gyoApp') 
    .factory('smfactory', function() { 
    return { 
     getHours: function(minutes) { 
     var duration = moment.duration(minutes, 'm'); 
     return Math.ceil(duration.asHours() % 24); 
     } 
    }; 
    }); 

मैं c2gcontroller.js में smfactory इंजेक्शन गए

c2gcontroller.js (प्रयास # 1)

angular.module('c2gyoApp') 
    .controller('C2gCtrl', function($scope, smfactory) { 
    ... 
    // the identical functions 
    $scope.getHours = smfactory.getHours(minutes); 
    ... 
    }); 

यह एक त्रुटि पैदावार कि मिनटों को परिभाषित नहीं किया गया है

line 33 col 42 'minutes' is not defined. 

तो मैं करने की कोशिश की:

c2gcontroller.js (प्रयास # 2)

angular.module('c2gyoApp') 
    .controller('C2gCtrl', function($scope, smfactory) { 
    ... 
    // the identical functions 
    $scope.getMinutes = function(minutes) { 
     return smfactory.getHours(minutes); 
    }; 
    ... 
    }); 

जो एक त्रुटि उपज नहीं है, लेकिन मेरे एप्लिकेशन प्रतिसाद नहीं दे रहा था। मूल रूप से $scope.getMinutes अब कुछ भी वापस नहीं करता है।

मैंने अंगुलरजेएस सेवाओं, कारखानों, प्रदाताओं के बारे में बहुत कुछ पढ़ा और देखा है, लेकिन मुझे नहीं पता कि यहां से कहां जाना है। c2gcontroller.js और c2gbcontroller.js प्रोटोटाइप का उचित तरीका क्या होगा?

Answer 1

कैसे angular.extend

/* define a "base" controller with shared functionality */ 
.controller('baseCtrl', ['$scope', .. 
    function($scope, ...) { 

    $scope.getMinutes = function(minutes) { 
    var duration = moment.duration(minutes, 'm'); 
    return duration.minutes(); 
    }; 


.controller('C2gCtrl', ['$controller', '$scope', ... 
    function($controller, $scope, ...) { 

    // copies the functionality from baseCtrl to this controller 
    angular.extend(this, $controller('baseCtrl', {$scope: $scope})); 

    // some unique stuff 
    $scope.feeDay = 59; 

}) 

.controller('C2gbCtrl', ['$controller', '$scope', ... 
    function($controller, $scope, ...) { 

    // copies the functionality from baseCtrl to this controller 
    angular.extend(this, $controller('baseCtrl', {$scope: $scope})) 

    // some unique stuff 
    $scope.feeDay = 89; 
}) 

Answer 2

यह वह जगह है जहां जावास्क्रिप्ट awesomeness के संयोजन का उपयोग, और controller as वाक्य रचना वास्तव में काम में आता साथ छद्म विरासत के बारे में।

अगर हम एक सादे पुराने वस्तु में बाहर अपने सामान्य कार्यों खींच: फिर

var commonStuff = { 
    getHours: function(minutes) { 
     var duration = moment.duration(minutes, 'm'); 
     return Math.ceil(duration.asHours() % 24); 
    } 
}; 

अगर हम हमारे नियंत्रक refactor एक सामान्य जे एस वस्तु होने के लिए, हम इसे एक mixin दो तरीकों में से एक के साथ संवर्धित कर सकते। या तो सीधे वस्तु पर, या प्रोटोटाइप के माध्यम से।

//Using the instance 
function MyCtrl(){ 
    var vm = this; 

    angular.extend(vm, commonStuff); 

    //Other stuff 
} 

//Or via the prototype 
function MyCtrl(){ 
    var vm = this; 
} 

//Controller specific 
MyCtrl.prototype = { 

}; 

angular.extend(MyCtrl.prototype, commonStuff); 

सबसे बड़ा अंतर यह है कि अब तुम सिर्फ सीधे नियंत्रक संदर्भित कर सकते हैं controller as वाक्य रचना के उपयोग के माध्यम से है।

<div ng-controller="myCtrl as ctrl"> 
    <a href="" ng-click="ctrl.getHours(120)">Get Hours</a> 
</div>