169

我想将服务注入 app.config,以便在调用控制器之前检索数据。我试过这样:

服务:

app.service('dbService', function() {
    return {
        getData: function($q, $http) {
            var defer = $q.defer();
            $http.get('db.php/score/getData').success(function(data) {
                defer.resolve(data);            
            });
            return defer.promise;
        }
    };
});

配置:

app.config(function ($routeProvider, dbService) {
    $routeProvider
        .when('/',
        {
            templateUrl: "partials/editor.html",
            controller: "AppCtrl",
            resolve: {
                data: dbService.getData(),
            }
        })
});

但我得到这个错误:

错误:未知提供者:来自 EditorApp 的 dbService

如何更正设置并注入此服务?

4

10 回答 10

140

将您的服务设置为自定义 AngularJS 提供程序

尽管接受的答案说了什么,您实际上可以做您打算做的事情,但是您需要将其设置为可配置的提供程序,以便在配置阶段它可以作为服务使用。首先,将您更改Service为提供程序如下所示。这里的关键区别在于,在设置 的值之后defer,您将defer.promise属性设置为由返回的承诺对象$http.get

提供者服务:(提供者:服务配方)

app.provider('dbService', function dbServiceProvider() {

  //the provider recipe for services require you specify a $get function
  this.$get= ['dbhost',function dbServiceFactory(dbhost){
     // return the factory as a provider
     // that is available during the configuration phase
     return new DbService(dbhost);  
  }]

});

function DbService(dbhost){
    var status;

    this.setUrl = function(url){
        dbhost = url;
    }

    this.getData = function($http) {
        return $http.get(dbhost+'db.php/score/getData')
            .success(function(data){
                 // handle any special stuff here, I would suggest the following:
                 status = 'ok';
                 status.data = data;
             })
             .error(function(message){
                 status = 'error';
                 status.message = message;
             })
             .then(function(){
                 // now we return an object with data or information about error 
                 // for special handling inside your application configuration
                 return status;
             })
    }    
}

现在,你有了一个可配置的自定义 Provider,你只需要注入它。这里的主要区别是缺少“注射剂上的提供者”。

配置:

app.config(function ($routeProvider) { 
    $routeProvider
        .when('/', {
            templateUrl: "partials/editor.html",
            controller: "AppCtrl",
            resolve: {
                dbData: function(DbService, $http) {
                     /*
                     *dbServiceProvider returns a dbService instance to your app whenever
                     * needed, and this instance is setup internally with a promise, 
                     * so you don't need to worry about $q and all that
                     */
                    return DbService('http://dbhost.com').getData();
                }
            }
        })
});

使用已解析的数据appCtrl

app.controller('appCtrl',function(dbData, DbService){
     $scope.dbData = dbData;

     // You can also create and use another instance of the dbService here...
     // to do whatever you programmed it to do, by adding functions inside the 
     // constructor DbService(), the following assumes you added 
     // a rmUser(userObj) function in the factory
     $scope.removeDbUser = function(user){
         DbService.rmUser(user);
     }

})

可能的替代方案

以下替代方法是一种类似的方法,但允许在 中进行定义.config,将服务封装到应用程序上下文中的特定模块中。选择适合您的方法。另请参阅下面有关第三种替代方法的注释和有用的链接,以帮助您掌握所有这些事情

app.config(function($routeProvider, $provide) {
    $provide.service('dbService',function(){})
    //set up your service inside the module's config.

    $routeProvider
        .when('/', {
            templateUrl: "partials/editor.html",
            controller: "AppCtrl",
            resolve: {
                data: 
            }
        })
});

一些有用的资源

提供程序为您提供了比该.service方法更多的配置,这使其作为应用程序级提供程序更好,但您也可以通过注入$provide配置将其封装在配置对象本身中,如下所示:

于 2014-02-08T18:50:49.287 回答
131

亚历克斯提供了无法做你想做的事情的正确原因,所以+1。但是您遇到这个问题是因为您没有完全使用解决方案的设计方式。

resolve接受服务的字符串或返回要注入的值的函数。由于您正在执行后者,因此您需要传入一个实际函数:

resolve: {
  data: function (dbService) {
    return dbService.getData();
  }
}

当框架去 resolvedata时,它​​会将 注入dbService到函数中,这样你就可以自由地使用它了。您根本不需要注入config块来完成此操作。

胃口大开!

于 2013-04-10T23:12:10.630 回答
21

简短的回答:你不能。AngularJS 不允许您将服务注入到配置中,因为它无法确定它们是否已正确加载。

请参阅此问题和答案: AngularJS 依赖注入 module.config 中的值

模块是在引导过程中应用于应用程序的配置和运行块的集合。该模块最简单的形式由两种块的集合组成:

配置块- 在提供者注册和配置阶段执行。只有提供者和常量可以注入到配置块中。这是为了防止在完全配置之前意外实例化服务。

于 2013-04-10T22:40:51.843 回答
5

** 使用 angular.injector 从其他模块显式请求服务 **

只是为了详细说明kim3er的答案,您可以提供服务,工厂等,而无需将它们更改为提供者,只要它们包含在其他模块中...

但是,我不确定*Provider(在处理服务或工厂后由 Angular 内部制作)是否始终可用(它可能取决于首先加载的其他内容),因为 Angular 会延迟加载模块。

请注意,如果要重新注入应将它们视为常量的值。

这是一个更明确,可能更可靠的方法+一个工作的plunker

var base = angular.module('myAppBaseModule', [])
base.factory('Foo', function() { 
  console.log("Foo");
  var Foo = function(name) { this.name = name; };
  Foo.prototype.hello = function() {
    return "Hello from factory instance " + this.name;
  }
  return Foo;
})
base.service('serviceFoo', function() {
  this.hello = function() {
    return "Service says hello";
  }
  return this;
});

var app = angular.module('appModule', []);
app.config(function($provide) {
  var base = angular.injector(['myAppBaseModule']);
  $provide.constant('Foo', base.get('Foo'));
  $provide.constant('serviceFoo', base.get('serviceFoo'));
});
app.controller('appCtrl', function($scope, Foo, serviceFoo) {
  $scope.appHello = (new Foo("app")).hello();
  $scope.serviceHello = serviceFoo.hello();
});
于 2014-10-09T17:42:10.243 回答
5

我不认为你应该能够做到这一点,但我已经成功地将服务注入到一个config块中。(AngularJS v1.0.7)

angular.module('dogmaService', [])
    .factory('dogmaCacheBuster', [
        function() {
            return function(path) {
                return path + '?_=' + Date.now();
            };
        }
    ]);

angular.module('touch', [
        'dogmaForm',
        'dogmaValidate',
        'dogmaPresentation',
        'dogmaController',
        'dogmaService',
    ])
    .config([
        '$routeProvider',
        'dogmaCacheBusterProvider',
        function($routeProvider, cacheBuster) {
            var bust = cacheBuster.$get[0]();

            $routeProvider
                .when('/', {
                    templateUrl: bust('touch/customer'),
                    controller: 'CustomerCtrl'
                })
                .when('/screen2', {
                    templateUrl: bust('touch/screen2'),
                    controller: 'Screen2Ctrl'
                })
                .otherwise({
                    redirectTo: bust('/')
                });
        }
    ]);

angular.module('dogmaController', [])
    .controller('CustomerCtrl', [
        '$scope',
        '$http',
        '$location',
        'dogmaCacheBuster',
        function($scope, $http, $location, cacheBuster) {

            $scope.submit = function() {
                $.ajax({
                    url: cacheBuster('/customers'),  //server script to process data
                    type: 'POST',
                    //Ajax events
                    // Form data
                    data: formData,
                    //Options to tell JQuery not to process data or worry about content-type
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function() {
                        $location
                            .path('/screen2');

                        $scope.$$phase || $scope.$apply();
                    }
                });
            };
        }
    ]);
于 2013-08-14T10:37:38.733 回答
5

您可以使用 $inject service 在配置中注入服务

app.config(功能($提供){

    $provide.decorator("$exceptionHandler", function($delegate, $injector){
        返回函数(异常,原因){
            var $rootScope = $injector.get("$rootScope");
            $rootScope.addError({message:"Exception", reason:exception});
            $delegate(异常,原因);
        };
    });

});

来源: http: //odetocode.com/blogs/scott/archive/2014/04/21/better-error-handling-in-angularjs.aspx

于 2015-05-26T14:49:21.077 回答
2

使用 $injector 调用配置中的服务方法

我遇到了类似的问题,并通过使用如上所示的 $injector 服务解决了它。我尝试直接注入服务,但最终导致对 $http 的循环依赖。该服务显示一个带有错误的模式,我正在使用 ui-bootstrap 模式,它也依赖于 $https。

    $httpProvider.interceptors.push(function($injector) {
    return {
        "responseError": function(response) {

            console.log("Error Response status: " + response.status);

            if (response.status === 0) {
                var myService= $injector.get("myService");
                myService.showError("An unexpected error occurred. Please refresh the page.")
            }
        }
    }
于 2015-01-04T17:34:31.453 回答
2

一个很容易做到的解决方案

注意:它仅适用于异步调用,因为服务未在配置执行时初始化。

你可以使用run()方法。例子 :

  1. 您的服务称为“MyService”
  2. 您想将其用于提供者“MyProvider”上的异步执行

你的代码:

(function () { //To isolate code TO NEVER HAVE A GLOBAL VARIABLE!

    //Store your service into an internal variable
    //It's an internal variable because you have wrapped this code with a (function () { --- })();
    var theServiceToInject = null;

    //Declare your application
    var myApp = angular.module("MyApplication", []);

    //Set configuration
    myApp.config(['MyProvider', function (MyProvider) {
        MyProvider.callMyMethod(function () {
            theServiceToInject.methodOnService();
        });
    }]);

    //When application is initialized inject your service
    myApp.run(['MyService', function (MyService) {
        theServiceToInject = MyService;
    }]);
});
于 2015-05-07T10:15:39.423 回答
1

好吧,我在这个方面有点挣扎,但我确实做到了。

我不知道答案是否因为角度的一些变化而过时,但你可以这样做:

这是您的服务:

.factory('beerRetrievalService', function ($http, $q, $log) {
  return {
    getRandomBeer: function() {
      var deferred = $q.defer();
      var beer = {};

      $http.post('beer-detail', {})
      .then(function(response) {
        beer.beerDetail = response.data;
      },
      function(err) {
        $log.error('Error getting random beer', err);
        deferred.reject({});
      });

      return deferred.promise;
    }
  };
 });

这是配置

.when('/beer-detail', {
  templateUrl : '/beer-detail',
  controller  : 'productDetailController',

  resolve: {
    beer: function(beerRetrievalService) {
      return beerRetrievalService.getRandomBeer();
    }
  }
})
于 2015-09-21T21:05:09.283 回答
0

最简单的方法: $injector = angular.element(document.body).injector()

然后使用它来运行invoke()get()

于 2015-07-04T19:00:29.487 回答