injecting service in angular 1.6 application

Question

I'm interested in learn angular, is getting so popular it seems necesary to lean something about it.

I'm having an issue, I did a Little application in angular 1.0.x, but in order to extend my knowledge about angular I decide to add a funcionality and complexity to my code.

After Reading some blogs I modify my app and update it to angular 1.6. So I'm trying to use a service wich provide me the data, till now the data are a fixed json, which give me several objects to trat and show in the screen. But I'm having some dificulties, the code I'm trying is next one:

var app = angular.module('myApp', ['ngRoute']);
app.config(appConfig);
app.service('MyService', MyService);
app.controller('TestController', ['$http', TestController])

function appConfig($routeProvider, MyService) {
  $routeProvider.when('/', {
    templateUrl: './test.html',
    controller: 'TestController',
    controllerAs: 'my',
    resolve: {
      data: MyService.getData()
    }

  });
}

function TestController($http, MyService) {
  // some code
}


function MyService() {
  return {
    getData: getData
  }

  function getData() {
    var datos = [ << valid json >> ];
    return datos;
  }
}

But it seems I'm injecting wrong the service it says my it's and unknow provider.

If i quit references to the service it Works, i have to asign other way the data but it does Work without the service. I think I've done everthing acording to the tutorials I've read, but It's obvious there's something wrong, and as long as I can't identify it Clearly I need someone to explain my the basics of injections in angular. SO I have questions: How do I inject a service? What am i doing wrong? Why my code is not working?

Answer 1

inject MyService to the controller instead of TestController

app.controller('TestController', ['$http', 'MyService'])

Also what you are implemented is a factory, not a service. so change it

app.factory('MyService', MyService);

Answer 2

You need to define an Angular factory.

angular.module('myApp', [])

.factory('MyService', function () {
    return {
        getData: getData
      }

      function getData() {
        var datos = [ << valid json >> ];
        return datos;
      }
}

Answer 3

The controller has wrong annotation, it has no 'MyService' , this results in undefined MyService parameter.

For named functions $inject annotation is preferable instead of inline array (see John Papa style guide ), primarily because it allows to have annotation right above function signature and avoid mistakes:

app.controller('TestController', TestController)

TestController.$inject = ['$http', 'MyService'];
function TestController($http, MyService) {...}

It is not a considerable problem that MyService is service and not factory because returns are allowed in constructor functions, but factory is more suitable if this isn't used. factory is just faster and is reasonable choice here.

Answer 4

Finally it worked, now the code looks like this:

var app = angular.module('myApp',['ngRoute']);
app.provider('myProvider', function myProvider(){
    this.$get=function(){
        return new mFactory();
    }
});

app.controller('TestController', TestController);
app.config(appConfig);
TestController.$inject = ['$http', 'myProvider'];

function appConfig($routeProvider){
     $routeProvider.when('/', {     
         templateUrl: './test.html',
         controller: 'TestController',
         controllerAs: 'my'
    });
}
function mFactory(){
    return{
        getData:function(){
            return mydata();//returns some valid json 
        }
    }
}

It was a bit hard for me to understand what a provider is but now i understand a provider has factories and each Factory returns the collections which services produce. Once i get to understand that everything come easier. Thank you all of you for your answers, each one has help me to find the solution to my little experiment. It feels fine to know there's people eager to help. Greetings