AngularJS Circular Dependency - Transformers

Question

looking for a bit of advice if possible.

In dealing with an API and nested resources, I'm trying to make a set of "transformers" which format the data into a more usable format.

In doing this, I have to create a circular dependency, due to the nature of the nested resources, and that the relationships could be going each way.

Here's an example:

Client Transformer

angular.module('services.transformers.clients', [

])
.service('ClientTransformer', function ClientTransformer(DateService, EventTransformer){
    var transformer = this;

    transformer.transform = function(client) {
        clientObject = {
            id: client.id,
            name: client.name
        };

        if(client.events) {
            clientObject.events = includeEvents(client);
        }

        return clientObject;
    }

    transformer.transformCollection = function(clients) {
        for(var key in clients.data) {
            if(clients.data.hasOwnProperty(key)) {
                clients.data[key] = transformer.transform(clients.data[key]);
            }
        }
        return clients.data;
    }

    function includeEvents (client) {
        return EventTransformer.transformCollection(client.events);
    }
})
;

Event Transformer

angular.module('services.transformers.events', [

])
.service('EventTransformer', function EventTransformer(DateService, ClientTransformer){
    var transformer = this;

    transformer.transform = function(event) {
        eventObject = {
            id: event.id,
            title: event.title,
            description: event.description,
            client: includeClient(event),
            starts: DateService.createDateFromObject(event.starts),
            ends: DateService.createDateFromObject(event.ends)
        };

        return eventObject;
    }

    transformer.transformCollection = function(events) {
        for(var key in events.data) {
            if(events.data.hasOwnProperty(key)) {
                events.data[key] = transformer.transform(events.data[key]);
            }
        }
        return events.data;
    }

    function includeClient (event) {
        // check if client is an ID or nested data. If nested, transform then return
        return (event.client.data) ? ClientTransformer.transform(event.client.data) : event.client;
    }

})
;

As you can imagine, there are several more relationships off each of these resources, but these services need to depend on each other. I could be accessing the Event resource, and have nested Clients, or Vice Versa.

Angular really doesn't like this, and throws a circular dependency error, but I'm not sure how I can get around this, or the better way to structure my application.

Any help would be appreciated

Thanks!

it is a hack, so im posting it as comment, you could create angular variable , `Transformers` and each transformer on creation will be added to that variable. and instead injecting transformer, you just injecting that variable. in this way you could get rid off circular dependency. what is right way? i will say redesign your code — user902383, Sep 04 '15 at 12:02

score 0 · Answer 1 · answered Sep 04 '15 at 12:47

You can inject the $injector service and get the dependency when you actually use it.

Here is your workaround:

.service('EventTransformer', function EventTransformer(DateService, $injector){

    ...

    function includeClient (event) {
        var t = $injector.get('ClientTransformer');
        return (event.client.data) ? t.transform(event.client.data) : event.client;
    }

})

AngularJS Circular Dependency - Transformers

1 Answers1