Correct way to make a factory module in angularJs

天涯浪子 提交于 2019-12-02 11:43:00

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

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!