Question

我有一个angularjs应用程序，它有几个带有多个视图的控制器。当我开始对应用程序进行编码时，很少有方法（类似的），它们被用于多个地方，最初看起来我可以将这些方法放在需要的地方（两个或三个控制器）。但随着我的应用程序的增长，我开始注意到代码冗余问题，因为在更多地方需要该方法。当然，这是我缺乏导致这个问题的经验。

现在我决定从我的应用中删除这个冗余代码。我找到了以下选项：

服务方式：删除冗余代码并将其放入新服务中，并将服务包含在我需要其功能的所有地方。
外部JS ：将冗余代码放在外部js文件中，然后调用所需的方法。
保留代码原样。

但在这里我想提一下，我所说的冗余代码并不是非常紧密耦合，只需付出很少的努力就可以添加和删除。

现在，我想知道的是上面的选项，我应该选择哪一个？ OR 是否有更好的选择可用于此问题（可能由angularJS本身提供）。

编辑代码的基本示例：正如我所说

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

Answer 1

你正在使用角度，所以你肯定想根据MVC使你的应用程序结构化。如果您的代码放在js文件中的任何位置，您的应用程序将遵循什么样的MVC模式。我建议把你的代码放在服务中。这是减少冗余的角度方式。您还可以选择将功能设置为$rootscope here

Answer 2

我不确定你的情况，但我有类似的情况：我有许多提供验证功能的功能。我创建了服务：

'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;
      });

Answer 3

我倾向于使用工厂，特别是因为工厂可以依赖其他工厂并且可以定义逻辑模块。考虑下面的伪代码。

.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)); 
     }
})

service vs controller vs external js将常用方法放在angularjs中

3 个答案: