服务与控制器与外部JS将常用方法放在AngularJS中

service vs controller vs external js to put frequently used methods in angularjs

本文关键字：方法 AngularJS 控制器 外部 JS 服务 常用      更新时间：2023-09-26

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

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

    服务

  1. 方式：删除多余的代码并将其放入新服务中，并将服务包含在我需要该功能的所有位置。

    2. 外部

  2. JS：将冗余代码放在外部js文件中，只需调用所需的方法即可。

  3. 保持代码不变。

但是在这里我想提一下，我所说的冗余代码不是很紧密耦合，可以毫不费力地在任何地方添加和删除。

现在，我

想知道的是上述选项，我应该选择哪一个？或者这个问题是否有更好的选择(可能由 angularJS 本身提供(。

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

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

您正在使用角度，因此您肯定希望根据MVC构建应用程序。 如果您的代码像任何东西一样放在 JS 文件中的任何位置，您的应用程序将遵循什么样的 MVC 模式。我建议将代码放在服务中。这就是减少冗余的角度方法。此外，您还可以选择在此处将功能设置为$rootscope

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

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

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

.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)); 
     }
})
相关文章：