服務與控制器vs外部js把經常使用的方法在angularjs

我有一個angularjs應用程序，其中有幾個控制器與幾個視圖。當我開始編寫應用程序時，幾乎沒有方法（類似類型），這些方法在多個地方使用，最初對於將這些方法放在需要的地方（兩個或三個控制器）來說，最初看起來還不錯。但隨着我的應用程序的增長，我開始注意到代碼冗餘問題，因爲這個方法在更多地方需要。肯定這是我缺乏經驗導致這個問題。服務與控制器vs外部js把經常使用的方法在angularjs

現在我決定從我的應用程序中刪除這個冗餘代碼。我發現下面的選項：

服務方式：刪除冗餘代碼，並把它放在一個新的服務，包括服務，我需要的功能的所有地方。
External JS：將冗餘代碼放在外部js文件中，並調用所需的方法。
請保持原樣。

但在這裏我想提一提，我說的冗餘代碼不是很緊耦合，並且可以添加，並用很少的努力去除任何地方。

現在，我想知道的是從上述選項中，我應該選擇哪一個？或是否有更好的選擇可用於這個問題（可能由angularJS本身提供）。

編輯的代碼基本的例子：正如我所說

$scope.showSomething = function (show, ele) { 
    //show or hide the ele (element) based on value of show 
}

來源

2014-12-08 me_digvijay

這取決於重複代碼*是什麼*。你能提供一個例子嗎？ – 2014-12-08 09:06:46

@DavinTryon：提供樣本代碼 – 2014-12-08 09:12:31

您正在使用的角度肯定使你想使按照MVC你的應用程序結構。如果您的代碼放在任何地方的任何js文件中，您的應用將遵循什麼樣的MVC模式。我會建議把你的代碼放入一個服務中。這是減少冗餘的角度。您還有另一個選項來設置功能$rootscopehere

來源

2014-12-08 09:15:56

我不確定你的情況，但我有類似的情況：我有一些功能提供驗證功能。我創建的服務：

'use strict'; 


angular.module('myApp') 
    .factory('UtilService', ['Env', 'IBANChecker', function(Env, IBANChecker) { 

var validateCallbacks = { 
     checkAddress: function (address) { 
     return address.action != 'delete'; 
     }, 
     validateIBAN: function (iban) { 
     return !iban || IBANChecker.isValid(iban); 
     }, 
..... 
     validateYCode: function(id) { 
     return YCodeChecker.isValid(id); 
     } 
    }; 

    return { 
     /** 
     * Factory with callbacks for 'validate' directive. 
     * 0 arguments -- get all callbacks, over wise see @validateCallbacks object to get specific callbacks. 
     * if wrong callback name requested -> it will be ignored 
     * @returns {object} -- call requested callbacks. 
     */ 
     getValidateCallbacks : function() { 
     if(arguments.length) { 
      var result = {}; 
      _.each(arguments, function(argument){ 
      if(validateCallbacks[argument]) { 
       result[argument] = validateCallbacks[argument]; 
      } 
      }); 
      return result; 
     } else { 
      return validateCallbacks; 
     } 
     } 
    }; 

    }]);

和代碼在控制器的樣子：

 var validateCallbacks = UtilService.getValidateCallbacks('validateText', 'validateNumber'); 

     _.each(validateCallbacks, function(callback, key) { 
     $scope[key] = callback; 
     });

來源

2014-12-08 09:16:17 Rasalom

我傾向於使用的工廠，特別是因爲工廠可以依賴於其他工廠，可以定義邏輯模塊。考慮下面的僞代碼。

.controller('HisController', function (UtilityService) { 
    $scope.foo = UtilityService.foo; 
}) 
.controller('HerController', function (UtilityService) { 
    $scope.foo = UtilityService.foo; 
}) 
.factory('UtilityService', function (SomeOtherService) { 
    var service = { 
     foo: foo, 
     bar: bar, 
    } 
    return service 
    /////// 
    function foo(a) { 
     return a.substring(0,1); 
    } 
    function bar(a) { 
     return SomeOtherService.doStuff(service.foo(a)); 
    } 
})

來源

2014-12-08 09:17:11

那些投下了答案的人需要時間來解釋他們的投票嗎？ – redben 2015-05-03 19:22:56

服務與控制器vs外部js把經常使用的方法在angularjs

回答

相關問題