如何添加一些小的效用函数到我的AngularJS应用程序?

前端之家收集整理的这篇文章主要介绍了如何添加一些小的效用函数到我的AngularJS应用程序?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想为我的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个功能和十个控制器。如果我这样做,这意味着为每个控制器添加大量的代码

解决方案2 – 由我提议

var factory = {

        Setup: function ($scope) {

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

这样做的缺点是,在每个控制器的开始,我将有一个或多个这些安装程序调用每个通过$ scope的服务。

解决方案3 – 由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);

我应该添加通用服务到这个,我怎么能这样做?

编辑7/1/15:

我写了这个答案很久以前,没有一直保持很多角度一段时间,但似乎这个答案仍然相对受欢迎,所以我想指出一点点@nicolas使下面是好的。例如,注入$ rootScope并在那里附加帮助程序将使您无需为每个控制器添加它们。另外 – 我同意如果你添加的应该被认为是角服务或过滤器,他们应该以这种方式被采纳到代码

此外,从当前版本1.4.2开始,Angular公开了一个“Provider”API,允许注入到配置块中。有关更多信息,请参阅以下资源:

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

AngularJS dependency injection of value inside of 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 partial中使用服务函数,那么你应该将它们添加到控制器的范围:

$ scope.doSomething = ServiceName.functionName;

然后在你的部分,你可以使用:

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

这里有一个方法,你可以保持这一切有组织,免费太多的麻烦:

将您的控制器,服务和路由代码/ config分成三个文件:controllers.js,services.js和app.js.顶层模块是“app”,它有app.controllers和app.services作为依赖。然后app.controllers和app.services可以声明为自己文件中的模块。这个组织结构只是从Angular Seed

app.js:

angular.module('app',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','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>

这样,您只需为每个控制器添加一行代码,并且能够访问任何可访问该作用域的服务功能

猜你在找的Angularjs相关文章