Question

I'm using the following angularjs project structure:

index.html
js/
-- angularjs
-- application.js
-- shared
-----SharedModule.js
-----LocalizeService.js
-----OtherSharedService.js
-- user
-----UserModule.js
-----LoginController.js
-----RegisterController.js
-----UserService.js

In other words I group files not by their type (e.g. services/controllers/directives), but by their logic purpose (e.g. user/shared/cart etc). I read this is the correct approach for large projects.

The main application.js file includes the modules like this:

angular.module('myApplication', [
    'ngRoute',
    'ngCookies',
    'sharedModule', 
    'userModule',
    'dahsboardModule',
])

Then, each module includes the related controllers/directives/services/whatever.

e.g. SharedModule.js

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

sharedModule.factory('Localize', ['$http', '$rootScope', '$window', LocalizeService]);

sharedModule.controller('someController',['$rootScope',SomeController]);

Then I implement the logic in each separate file. My question is: what design pattern should I use to implement the logic of each separate service/controller?

I read this book: http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/ and so far my beloved design pattern is 'Revealing module pattern' which is kinda omni-purpose design pattern. I used it many times in other projects (w/o angularjs).

But it seems I cannot use it with angularjs.

var LocalizeService = (function() {
})();

How can I pass all the stuff like $rootScope/$http to the module?

This is how it works for me now:

function LocalizeService($http,$rootScope,$window) {
   var localize = (function() {

      function publicFunction() {
            // do smth.
        }
      return {
          someFunction: publicFunction
      }
   })();
   return localize;
}

But I'm not sure if it is quite correct. Could you please kindly advise?

Was it helpful?

Solution

You an use a service with a constructor instead of a factory:

var LocalizeService = (function() {
  function LocalizeService($http, $rootScope, $window) {

  }

  LocalizeService.prototype = {
    publicFunction: function() {

    }
  };

  LocalizeService.$inject = ['$http','$rootScope','$window'];

  return LocalizeService;
}());

sharedModule.service('Localize', LocalizeService);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top