如何在AngularJS应用程序中添加一些小的实用程序函数？

Question

我想在AngularJS应用程序中添加一些实用程序功能。例如：

$scope.isNotString = function (str) {
    return (typeof str !== "string");
}

将它们添加为服务的最佳方法是吗？从我所阅读的内容中我可以做到，但是然后我想在HTML页面中使用它们，因此如果它们在服务中仍然可行吗？例如，我可以使用以下内容：

 <button data-ng-click="doSomething()"
         data-ng-disabled="isNotString(abc)">Do Something
 </button>

有人可以举例说明如何添加这些内容。我应该创建服务还是有其他实现方法。最重要的是，我希望将这些实用程序功能存储在文件中，而不要与主要设置的另一部分结合使用。

我了解有一些解决方案，但没有一个如此明确。

解决方案1 -Urban提出

$scope.doSomething = ServiceName.functionName;

这里的问题是我有20个功能和10个控制器。如果执行此操作，则意味着要向每个控制器添加很多代码。

解决方案2- 我提议

    var factory = {

        Setup: function ($scope) {

            $scope.isNotString = function (str) {
                return (typeof str !== "string");
            }

这样做的缺点是，在每个控制器启动时，我会对通过$ scope的每个服务有一个或多个这些Setup调用。

解决方案3 -Urban提出

Urban提出的创建通用服务的解决方案看起来不错。这是我的主要设置：

var app = angular
    .module('app', ['ngAnimate', 'ui.router', 'admin', 'home', 'questions', 'ngResource', 'LocalStorageModule'])
    .config(['$locationProvider', '$sceProvider', '$stateProvider',
        function ($locationProvider, $sceProvider, $stateProvider) {

            $sceProvider.enabled(false);
            $locationProvider.html5Mode(true);

我是否应该在其中添加通用服务，我该怎么做？

Answer 1

编辑7/1/15：

我在很久以前就写了这个答案，并且有一段时间没跟上角度了，但似乎这个答案仍然相对受欢迎，因此我想指出一点@nicolas下面做的很好。首先，注入$
rootScope并附加那里的助手将使您不必为每个控制器添加它们。另外-
我同意，如果您要添加的内容应被视为Angular服务或过滤器，则应以这种方式将其应用于代码中。

另外，从当前版本1.4.2开始，Angular公开了一个“提供程序” API，该API可以注入到配置块中。有关更多信息，请参见以下资源：

https://docs.angularjs.org/guide/module#module-loading-
dependencies

AngularJS依赖注入module.config内部的值

我认为我不会在下面更新实际的代码块，因为这些天我并没有真正积极地使用Angular，并且我真的不想冒一个新的答案而又不觉得它实际上符合最新的最佳做法。实践。如果有人愿意接受，那么一定要去做。

编辑2/3/14：

在考虑了这一点并阅读了其他一些答案之后，我实际上认为我更喜欢@Brent Washburne和@Amogh
Talpallikar提出的方法的变体。特别是如果您正在寻找isNotString（）之类的实用程序。这里的明显优势之一是，您可以在角度代码之外重新使用它们，并且可以在配置函数中使用它们（对于服务则不能这样做）。

话虽这么说，如果您正在寻找一种通用的方式来重用应该正确地用作服务的内容，那么我认为旧的答案仍然是一个不错的选择。

我现在要做的是：

app.js：

var MyNamespace = MyNamespace || {};

 MyNamespace.helpers = {
   isNotString: function(str) {
     return (typeof str !== "string");
   }
 };

 angular.module('app', ['app.controllers', 'app.services']).                             
   config(['$routeProvider', function($routeProvider) {
     // Routing stuff here...
   }]);

controller.js：

angular.module('app.controllers', []).                                                                                                                                                                                  
  controller('firstCtrl', ['$scope', function($scope) {
    $scope.helpers = MyNamespace.helpers;
  });

然后，您可以在部分使用：

<button data-ng-click="console.log(helpers.isNotString('this is a string'))">Log String Test</button>

下面的旧答案：

最好将它们作为服务包含在内。如果您打算在多个控制器之间重用它们，包括将它们作为服务使用，将使您不必重复代码。

如果您想在html部分中使用服务功能，则应将它们添加到该控制器的作用域中：

$scope.doSomething = ServiceName.functionName;

然后，您可以在部分使用：

<button data-ng-click="doSomething()">Do Something</button>

您可以通过以下方式使这一切保持井井有条，并避免太多麻烦：

将控制器，服务和路由代码/配置分成三个文件：controllers.js，services.js和app.js。顶层模块是“
app”，其中有app.controllers和app.services作为依赖项。然后，可以在自己的文件中将app.controllers和app.services声明为模块。该组织结构仅取自Angular
Seed：

app.js：

 angular.module('app', ['app.controllers', 'app.services']).                             
   config(['$routeProvider', function($routeProvider) {
     // Routing stuff here...
   }]);

services.js：

 /* Generic Services */                                                                                                                                                                                                    
 angular.module('app.services', [])                                                                                                                                                                        
   .factory("genericServices", function() {                                                                                                                                                   
     return {                                                                                                                                                                                                              
       doSomething: function() {   
         //Do something here
       },
       doSomethingElse: function() {
         //Do something else here
       }
    });

controller.js：

angular.module('app.controllers', []).                                                                                                                                                                                  
  controller('firstCtrl', ['$scope', 'genericServices', function($scope, genericServices) {
    $scope.genericServices = genericServices;
  });

然后，您可以在部分使用：

<button data-ng-click="genericServices.doSomething()">Do Something</button>
<button data-ng-click="genericServices.doSomethingElse()">Do Something Else</button>

这样，您只需向每个控制器添加一行代码，就可以在可访问该范围的任何地方访问任何服务功能。