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?
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);