Correct way to make a factory module in angularJs

Question

I have a controller function like this:

$scope.localTimezone = function (userTimezone,datetime) {
  // ....
  return data;
}

What is the correct way to make it a factory module? I tried the following but it's giving errors.

angular.module('localTimezone',  [])
   .factory('localTimezone',function(userTimezone,datetime) {
      // ...
      return data;
   });


angular.module('app', ['localTimezone'])
   .controller('tasksController',function ($scope,localTimezone) {
     // ...
   });

I am missing out on some concept or logic.Can anyone please point me in the right direction?

Cavender

angular-tips.com/blog/2013/08/understanding-service-types - this is a great article describing the different service types in Angular and how they differ. Helped me when I was starting out. – Carping

can you setup a plunker showing the problem – Goidelic

Answer 1

CONTROLLER Example Bad:

function MainCtrl () {
  this.doSomething = function () {

  };
}
angular
  .module('app')
  .controller('MainCtrl', MainCtrl);

Good:

function MainCtrl (SomeService) {
  this.doSomething = SomeService.doSomething;
}
angular
  .module('app')
  .controller('MainCtrl', MainCtrl);

Factory Example Bad:

function AnotherService () {

  var someValue = '';

  var someMethod = function () {

  };

  return {
    someValue: someValue,
    someMethod: someMethod
  };

}
angular
  .module('app')
  .factory('AnotherService', AnotherService);

Good:

function AnotherService () {

  var AnotherService = {};

  AnotherService.someValue = '';

  AnotherService.someMethod = function () {

  };

  return AnotherService;
}
angular
  .module('app')
  .factory('AnotherService', AnotherService);

For Detail Guidelines go through this blog : Opinionated AngularJS styleguide for teams

Karaite

Suppose I want $http ... How do you inject to AnotherService? – Halfprice

app.service('<service>', ['$http', function($http) { this.yourVar = function() { ... } }]); – Karaite

Sorry, I not explain well , how do you inject In the Good way where you have function AnotherService(){ ........} -.... angular.module('app').factory('AnotherService',AnotherService); – Halfprice

Answer 2

Here is a working code example based on the assumption userTimezone and datetime are services which are apart of the localTimezone module.

The following has been modified

• 'data' which your factory is returning has been modified to return a string based on the factory pattern - as you were returning 'data' which referenced nothing
• constructing the app has been moved to the top. This code should execute before anything else.
• app variable removed - I don't like global variables.

Code:

angular.module('app', ['localTimezone']);

angular.module('localTimezone', []).factory('localTimezone',
  function(userTimezone, datetime) {
    var data = 'hello';
    return { data: data } ;
  });

angular.module('localTimezone').service('userTimezone', function() {
});

angular.module('localTimezone').service('datetime', function() {
});

angular.module('app').controller('tasksController',function ($scope,localTimezone) {
});  

Codepen: http://codepen.io/anon/pen/wijmb (no errors appearing in console)

Take a look at http://angular-tips.com/blog/2013/08/understanding-service-types for information about the different service types in Angular.

Carping