CODEWITHSUNDEEP
javascriptangularjsservice
Jose Miguel
Jose Miguel

Reputation: 445

injecting service in angular 1.6 application

I'm interested in learn angular, is getting so popular it seems necessary 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 functionality 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 which provides 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 difficulties, 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 assign other way the data but it does work without the service. I think I've done everything according 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?

Upvotes: 0

Views: 115

Answers (4)

Jose Miguel
Jose Miguel

Reputation: 445

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

Upvotes: 0

Estus Flask
Estus Flask

Reputation: 222369

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.

Upvotes: 1

JSON Derulo
JSON Derulo

Reputation: 17546

You need to define an Angular factory.

angular.module('myApp', [])

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

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

Upvotes: 1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41387

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

Upvotes: 1

Related Questions