Structure of services.js


#1

I’m still a little fuzzy on factories and functions, but if I want to add new factories to the services.js file do I just keep chaining them?

If the app starts to get big is this a problem? Is there a better architecture?

Thanks.


#2

How the default apps get the services.js:

angular.module( 'visuall.services', [] )

/**
 * A simple example service that returns some data.
 */.factory( 'Playlists', function () {
    // Might use a resource here that returns a JSON array

    // Some fake testing data
    var playlists = [
      { title: 'Reggae', id: 1 },
      { title: 'Chill', id: 2 },
      { title: 'Dubstep', id: 3 },
      { title: 'Indie', id: 4 },
      { title: 'Rap', id: 5 },
      { title: 'Cowbell', id: 6 }
    ];

    return {
      all: function () {
        return playlists;
      },
      get: function ( playlistId ) {
        var foundlist = false;
        for ( var key in playlists ) {
          if ( playlists.hasOwnProperty( key ) ) {
            var playlist = playlists[key];
            if ( playlist.id == playlistId ) {
              foundlist = playlist;
              break;
            }
          }
        }
        // Simple index lookup
        return foundlist;
      }
    }
  } );

How you could do it:

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

/**
 * A simple example service that returns some data.
 */
services.factory( 'Playlists', function () {
    // Might use a resource here that returns a JSON array

    // Some fake testing data
    var playlists = [
      { title: 'Reggae', id: 1 },
      { title: 'Chill', id: 2 },
      { title: 'Dubstep', id: 3 },
      { title: 'Indie', id: 4 },
      { title: 'Rap', id: 5 },
      { title: 'Cowbell', id: 6 }
    ];

    return {
      all: function () {
        return playlists;
      },
      get: function ( playlistId ) {
        var foundlist = false;
        for ( var key in playlists ) {
          if ( playlists.hasOwnProperty( key ) ) {
            var playlist = playlists[key];
            if ( playlist.id == playlistId ) {
              foundlist = playlist;
              break;
            }
          }
        }
        // Simple index lookup
        return foundlist;
      }
    }
  } );

There is no need to chain :wink: But you could keep chaining if you want.


#3

OK, that’s cool. I like the second way better. Thanks.

Is there a way to put factories into different files for even more modularity?


#4

How I do it:

file1:

var FactoryA angular.module( 'visuall.services.factoryA', [] );
FactoryA.factory( 'Playlists', function () {/*init here*/};

file2:

var FactoryB angular.module( 'visuall.services.factoryB', [] );
FactoryB.factory( 'Playlists2', function () {/*init here*/};

app.js

var App = angular.module( 'app', [
  'app.services.FactoryA',
  'app.services.FactoryB'
] );

But there might be betters ways to this! I could imagine a services.js having

var Services angular.module( 'visuall.services.factoryA', [] );

And in different files (later included in head, to ensure services.js is always loaded) multiple factory calls. But I personally choose not to do this to avoid dependency’s in load order.


#5

Very cool. Thank you.


#6

No problem :slight_smile: Glad to help