Passing service as a parameter of controller function in Angularjs

Question

I have controller, view and services in separate files of an Angular application. These files are:

home.controller.js

angular
    .module('loc8rApp')
    .controller('homeCtrl', homeCtrl);

function homeCtrl () {
    var vm = this;
    vm.pageHeader = {
        title: 'Loc8r',
        strapline: 'Find places to work with wifi near you'
    };
}

home.view.html

<div id="banner" class="page-header">
  <div class="row">
    <div class="col-lg-6"></div>
    <h1>
      {{ vm.pageHeader.title }}
      <small>{{ vm.pageHeader.strapline }}</small>
    </h1>
  </div>
</div>

loc8rData.service.js

angular
    .module('loc8rApp')
    .service('loc8rData', loc8rData);

var loc8rData = function ($http) {
    var locationByCoords = function (lat, lng) {
        return $http.get('/api/locations?lng=' + lng + '&lat=' + lat + '&maxDistance=10000');
    };
    return {
        locationByCoords: locationByCoords
    };
};

The application with home.controller.js and home.view.html is ok. Now I want to use the service loc8rData which is defined in loc8rData.service.js file. To use the service from the controller, I passed the service name as a parameter of homeCtrl function. It then created an issue. It is showing angular expression instead of the value of that expression. The following image is the best fit to observe the issue:

What is the reason behind it? What will be the proper solution?

I have just included the service to the angular app which is the first statement of the loc8rData.service.js file. Is it enough? — Md. Ikramul Murad
– Md. Ikramul Murad, Commented Nov 28, 2017 at 2:06
How to inject the service into a controller? I've just passed the service name as a parameter to the controller function. — Md. Ikramul Murad
– Md. Ikramul Murad, Commented Nov 28, 2017 at 2:10

Sajeetharan · Accepted Answer · 2017-11-28 16:38:14Z

1

You need to inject your service to your controller as follows,

 homeCtrl.$inject = ['loc8rData'];
 function homeCtrl (loc8rData) {

 }

also change your service function as follows , make it globally accessible

angular
    .module('loc8rApp')
    .service('loc8rData', loc8rData);

function loc8rData($http) {
    var locationByCoords = function (lat, lng) {
        return $http.get('/api/locations?lng=' + lng + '&lat=' + lat + '&maxDistance=10000');
    };
    return {
        locationByCoords: locationByCoords
    };
};

edited Nov 28, 2017 at 16:38

answered Nov 28, 2017 at 2:15

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Md. Ikramul Murad Over a year ago

In which place? Immediately before the controller function?

Md. Ikramul Murad Over a year ago

I have done this, but still it is showing expression :(

Md. Ikramul Murad Over a year ago

Yes, a lot actually

Collectives™ on Stack Overflow

Passing service as a parameter of controller function in Angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related