在angularjs服务中编写函数

时间:2012-12-19 12:01:18

标签: angularjs

我想在angularjs服务中编写一个函数,我想在我的所有

中重用它

控制器。

var mod= angular.module('myapp', ['eventFilters', 'highlight', 'event', 'dayfilter', 'Services']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
      when('/', {templateUrl: 'template.html',   controller: Ctrl}).
      when('/temp', {templateUrl: 'temp.html',   controller: tempCtrl}).
      otherwise({redirectTo: '/invalid'});
}]);
mod.service ('sharedService', function() {
function daysInMonth(month,year) {
    return new Date(year, month+1,0).getDate();
}
});

我想在我的任何控制器中使用daysInMonth函数。 可能吗?如果有的话,任何人都可以用小提琴中的一些例子简要地解释一下。

提前致谢

6 个答案:

答案 0 :(得分:26)

这里提供了一个如何在控制器中使用(注入)服务的基本示例。

http://jsfiddle.net/uhmNR/1/

var myApp = angular.module('myApp',[]);


//Here is the service Users with its functions and attributes
//You can inject it in any controller, service is a singleton and its data persist between controllers
myApp.factory('Users', function () {

    var userName = "John Doe";

    return {
        getUserName: function () {
             return userName;                   
        },
        setUserName: function (newName) {
            userName = newName;
        }
    }
});

//An Util service with DaysInMonth method   
myApp.factory('Util', function () {

    return {
        daysInMonth: function (month,year) {

            return new Date(year, month+1,0).getDate();
        }
    };

});   

//Here I am injecting the User service andusing its methods   
myApp.controller('MyCtrl', ['$scope', 'Users', 'Util', function ($scope, Users, Util) {

    Users.setUserName('Robin Hood');

    $scope.name = Users.getUserName();

    //Using Util.daysInMonth()
    $scope.date = Util.daysInMonth(12,2012);
}]);

希望它有所帮助。

答案 1 :(得分:6)

将该功能公开为服务,然后让AngularJS注入器完成其余工作。您可以轻松地将daysInMonth服务设置为模块中的静态值。请参阅http://jsfiddle.net/hbulhoes/zdtnw/

中的此操作
var mod = angular.module('myapp', []);

// This is the declaration of the daysInMonth service. It's set as
// a value in the module, with the value being the very function
// you want to share among other services and controllers:
mod.value('daysInMonth', function(month, year) {
    return new Date(year, month+1,0).getDate();
});

// And this is an example controller that depends on the daysInMonth function.
function MyController($scope, daysInMonth){
    $scope.DaysInCurrentMonth = daysInMonth(12, 2012);
}

答案 2 :(得分:1)

如果您希望某个功能可用于所有控制器,您可以考虑在$ rootScope上定义该方法,而不是使用服务:

myApp.run(function($rootScope) {
    $rootScope.daysInMonth = function(year, month) {
        return new Date(year, month+1,0).getDate();
    }
});

然后,由于原型范围继承,所有控制器的范围都可以访问该方法(无需依赖注入)。您可以在任何控制器中调用它,如下所示:

function MyCtrl($scope) {
   console.log($scope.daysInMonth(12, 2012));
}​

JavaScript将找不到在$ scope上定义的函数daysInMonth,因此它将查找该函数的父作用域(在本例中为根作用域),并且它将找到它。

答案 3 :(得分:1)

您需要公开它。将它包裹在返回区块中:

var mod= angular.module('myapp', ['eventFilters', 'highlight', 'event', 'dayfilter', 'Services']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
  when('/', {templateUrl: 'template.html',   controller: Ctrl}).
  when('/temp', {templateUrl: 'temp.html',   controller: tempCtrl}).
  otherwise({redirectTo: '/invalid'});
}]);
mod.service ('sharedService', function() {
   return {
      daysInMonth: function(month,year) {
         return new Date(year, month+1,0).getDate();
      }
   };
});

答案 4 :(得分:0)

如果您想使用实际的Angular 服务(不是工厂或提供商),那么您需要做的就是以下方式创建Angular方式。

mod.service ('sharedService', function() {
  function daysInMonth(month,year) {
    return new Date(year, month+1,0).getDate();
  }
});

// Would turn into 

mod.service("sharedService", function(){
  this.daysInMonth(month, year){
    return new Date(year, month + 1, 0).getDate();
  }
});
  

除非您需要覆盖服务 THIS 对象,否则您不应返回。 > NEW'ED 即可。在这种情况下,您可以返回对象文字,函数定义,数组,大多数对象,不包括任何基元。只是保证你问一个问题“为什么我需要覆盖默认行为?”

这真的是服务的全部要点。当你注入 SERVICE Angular NEW 你传递的函数时,就会按照描述将它返回给你。在您的情况下,该服务将正是您所需要的。 Angular将只构建一次服务,并且 new sharedService 函数结果将在整个应用程序中可用,但仅当服务在您的某个地方至少一次DI时才可用应用。如果你没有DI它,那么服务将永远不会被创建,因为它是懒惰加载(工厂和服务)。

如果你发现你真的想要归还某些东西,(虽然你可以在服务中做到),适当的地方将是Angular 工厂。事实上,如果你工厂返回,你会得到一个很好的注意事项

  

错误: 提供商'sharedService'必须从$ get factory方法返回一个值。

注意:其中 $ get 函数是服务函数定义的第二个参数。

mod.factory("sharedService", function(){
  function daysInMonth(month, year){
    return new Date(year, month + 1, 0).getDate();
  }

  return {
    daysInMonth: daysInMonth
  }

  // Or you could do this...
  return daysInMonth;
});

使用Angular 工厂时,您不再获得 NEW'ED 功能,这就是必须创建返回的原因。

答案 5 :(得分:0)

我认为OP意味着服务一个函数,例如$ timeout函数。由于默认服务工厂对您返回的任何内容进行“服务”,您可以执行以下操作:

angular.module('myApp.myModule',[])
.factory('add',['$injectables',function($injectables) {
  return function(arg1,arg2)
  {
    //this is the function that will be called when you use this service
    return arg1 + arg2;
  }
}]);

用法:

angular.module('myApp.Othermodule',['myApp.myModule'])
.controller('controllername',['add',function(add) {

  //controller code and somehwere
  $scope.z = add($scope.x,$scope,y);
}]);