AngularJS UI路由器在工厂/服务中使用已解析的依赖项

AngularJS UI Router using resolved dependency in factory / service(AngularJS UI路由器在工厂/服务中使用已解析的依赖项)
本文介绍了AngularJS UI路由器在工厂/服务中使用已解析的依赖项的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

I have a UI Router defined something like this (trimmed for simplicity):

    $stateProvider
        .state('someState', {
            resolve: {
                model: ['modelService', 'info', function (modelService, info) {
                    return modelService.get(info.id).$promise;
                }]
            },
            controller: 'SomeController'
        });

This someState state is using a factory / service that is dependent on that model resolve. It's defined something like this, and AngularJS throws an Unknown provider: modelProvider <- model <- someService error here:

angular
    .module('someModule')
    .factory('someService', someService);

someService.$inject = ['model'];
function someService(model) { ... }

However, using the same model resolve inside of this state's controller works fine:

SomeController.$inject = ['model'];
function SomeController(model) { ... }

So I'm understanding that UI Router is delaying the DI of the SomeController until the resolve is happening, which allows AngularJS to not throw an error. However, how come the same delay is not happening when putting that resolve as a dependency on someService? Do resolves only work on controllers? And if that is the case, how can I use a resolve inside a factory / service?

解决方案

Do resolves only work on controllers?

Yes, resolves only work on controllers.

And if that is the case, how can I use a resolve inside a factory / service?

Remember that factories and services return singleton objects, i.e. the first time a factory is injected into a controller, it runs any instantiation code you provide and creates an object, and then any subsequent times that factory is instantiated, that same object is returned.

In other words:

angular.module('someModule')
.factory( 'SomeFactory' , function () {
  // this code only runs once
  object = {}
  object.now = Date.now();
  return object
);

SomeFactory.now will be the current time the first time the factory is injected into a controller, but it not update on subsequent usage.

As such, the concept of resolve for a factory doesn't really make sense. If you want to have a service that does something dynamically (which is obviously very common), you need to put the logic inside functions on the singleton.

For example, in the code sample you gave, your factory depended on a model. One approach would be to inject the model into the controller using the resolve method you've already got set up, then expose a method on the singleton that accepts a model and does what you need to do, like so:

angular.module('someModule')
.factory( 'SomeFactory', function () {
  return {
    doSomethingWithModel: function (model) {
      $http.post('wherever', model);
  }
});
.controller('SomeController', function (SomeFactory, model) {
  SomeFactory.doSomethingWithModel(model);
});

Alternatively, if you don't need the resolved value in the controller at all, don't put it directly in a resolve, instead put the resolve logic into a method on the service's singleton and call that method inside the resolve, passing the result to the controller.

It's hard to be more detailed with abstract conversation, so if you need further pointers then provide a specific use-case.

这篇关于AngularJS UI路由器在工厂/服务中使用已解析的依赖项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Swipable Vuetify Tabs with router(带路由器的可滑动Vutify标签)
Vue router - how to have multiple components loaded on the same route path based on user role?(VUE路由器-如何根据用户角色将多个组件加载到同一路由路径上?)
How to sort a array of object based on two properties and check the rage is sequential?(如何根据两个属性对对象数组进行排序,并检查范围是否连续?)
Untyped function calls may not accept type arguments - Angular 5 http calls(非类型化函数调用可能不接受类型参数-角度5 http调用)
Router Link in VUE JS is not showing active(VUE JS中的路由器链路未显示为活动状态)
Can i import single file component using Vue and Vue Router CDN?(我可以使用VUE和VUE路由器CDN导入单个文件组件吗?)