AngularJS - 服务,工厂,过滤器等中的依赖注入

Kev*_*eal 58 javascript dependency-injection angularjs

所以我想在我的角度应用程序中使用一些插件和库,并且(目前)我只是引用那些函数/方法,因为它们在99%的应用程序中打算完全忽略依赖注入.

我有(例如)javascript库"MomentJS",它处理格式化和验证日期,我在控制器,服务和过滤器的整个应用程序中使用它.我学习的方法(使用AngularJS)是创建一个引用该函数(及其方法)的服务,并将该服务注入到我的控制器中,这非常有效.

问题是我真的需要在所有不同类型的组件中引用这个库,从服务到过滤器到控制器和其他所有组件.所以,我想我的问题是你如何在过滤器,服务和其他不是控制器的东西中进行依赖注入?

这可能吗?这甚至有益吗?

任何帮助将不胜感激 :)

Aru*_*hny 102

是的,您可以使用依赖注入过滤器和指令

例如:

过滤:

app.filter('<filter>', ['$http', function(http){
    return function(data){
    }
}]);
Run Code Online (Sandbox Code Playgroud)

指示:

app.directive('<directive>', ['$http', function(http){
    return {
        ....
    }
}]);
Run Code Online (Sandbox Code Playgroud)

服务:

app.factory('<service>', ['$http', function(http) {
  var shinyNewServiceInstance;
  return shinyNewServiceInstance;
}]);
Run Code Online (Sandbox Code Playgroud)


use*_*062 21

为了完整起见,这是一个带注入的服务示例:

app.service('<service>', ['$http', function($http) {
  this.foo = function() { ... }
}]);
Run Code Online (Sandbox Code Playgroud)


Dan*_*iel 7

虽然现有的答案是正确和有效的,但john papas角度风格指南有利于$injectY091中使用该服务:

过滤:

app.filter('<filter', MyFilter);
MyFilter.$inject = ['$http'];
function MyFilter() {
  return function(data) {
  }
}
Run Code Online (Sandbox Code Playgroud)

指示:

app.directive('<directive>', MyDirective);
MyDirective.$inject = ['$http'];
function MyDirective() {
  return {
    ...
  }
}
Run Code Online (Sandbox Code Playgroud)

厂:

app.factory('<factory>', MyFactory);
MyFactory.$inject = ['$http'];
function MyFactory() {
  var shinyNewServiceInstance;
  return shinyNewServiceInstance;
}
Run Code Online (Sandbox Code Playgroud)

服务:

app.service('<service>', MyService);
MyService.$inject = ['$http'];
function MyService() {
  this.foo = foo;
  function foo(){
    ...
  }
}
Run Code Online (Sandbox Code Playgroud)