Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

Many angular examples use simple global functions. Angular-seed and yo angular use a more complex coding style. Here is an example of a simple styled example from stackoverflow/jsbin: http://jsbin.com/lucit/8/edit

var app = angular.module( 'app', [] );
var MyFunc = function() {
  this.name = "default name";
  this.$get = function() {
      this.name = "new name"
      return "Hello from MyFunc.$get(). this.name = " + this.name;
  };
  return "Hello from MyFunc(). this.name = " + this.name; 
};
// returns the actual function
app.service( 'myService', MyFunc );
// returns the function's return value
app.factory( 'myFactory', MyFunc );
// returns the output of the function's $get function
app.provider( 'myProv', MyFunc );

function MainCtrl( $scope, myService, myFactory, myProv ) {
  $scope.serviceOutput = "service = "+ JSON.stringify(myService);
  $scope.factoryOutput = "factory = " + myFactory;
  $scope.providerOutput = "provider = " + myProv;
}

What follows is an attempt to rewrite a simple example in the angular-seed module style: http://jsbin.com/hitun/4/edit

var MyFunc = function() {
  this.name = "default name";
  this.$get = function() {
      this.name = "new name"
      return "Hello from MyFunc.$get(). this.name = " + this.name;
  };
  return "Hello from MyFunc(). this.name = " + this.name; 
};       

angular.module('app', [
'app.controllers',
'app.services'
]);
angular.module('app.services',[])
  .factory('MainData', MyFunc)
  .service('MainData', MyFunc)
  .provider('MainData', MyFunc));

angular.module('app.controllers',[])
  .controller('MainCtrl', [function($scope, myService, myFactory, myProv){
    $scope.serviceOutput = "service = "+ JSON.stringify(myService);
    $scope.factoryOutput = "factory = " + myFactory;
    $scope.providerOutput = "provider = " + myProv;  
  }]);  

No matter how I try to tweak the syntax, I get errors.

share|improve this question

1 Answer 1

up vote 1 down vote accepted

The following line has a parenthesis too much:

.provider('MainData', MyFunc));

Change it to:

.provider('myProv', MyFunc);

The factory, service and provider are all named MainData, but in your MainCtrl you are trying to inject myService, myFactory, myProv.

Rename them:

angular.module('app.services', [])
.factory('myFactory', MyFunc)
.service('myService', MyFunc)
.provider('myProv', MyFunc);

Your controller definition is using the inline array notation. Notice the bracket in front of function:

.controller('MainCtrl', [function(

Change it to:

.controller('MainCtrl', ['$scope', 'myService', 'myFactory', 'myProv',
  function($scope, myService, myFactory, myProv) {

Or remove both brackets:

.controller('MainCtrl', function($scope, myService, myFactory, myProv) {
  $scope.serviceOutput = "service = " + JSON.stringify(myService);
  $scope.factoryOutput = "factory = " + myFactory;
  $scope.providerOutput = "provider = " + myProv;
});

You can read more about this in the dependency injection documentation.

Demo: http://jsbin.com/kipeyele/2/edit?html,output

share|improve this answer
    
Sorry for my sloppy work. I tried to get the inline array notation version to work without success jsbin.com/hitun/8/edit. On to figure out testing. –  mcktimo Apr 30 at 16:48
    
When using the inline array notiation the function must be last, and everything before it needs to be strings: .controller('MainCtrl', ['$scope', 'myService', 'myFactory', 'myProv', function($scope, myService, myFactory, myProv) –  tasseKATT Apr 30 at 16:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.