How to inject a service/factory to be used by a controller?

Question

I'm new to AngularJS and I've spent hours searching this online but I could not find an answer (every blog or site seems to say something different or is outdated).

I understand that services/factories can hold objects and their respective member functions. I want to create an instance of such an object and use their member functions in a controller.js file (which holds a controller to be used by the app).

However, I simply can't understand how to setup a service or a factory and how to inject it so that it an instance of the object from the service can be created and used by the controller file.

Does anybody know of any simple examples to illustrate this?

Much appreciated!

Have you read this: https://docs.angularjs.org/guide/services ? — Josep, Sep 18 '14 at 22:39
Yes I have, I'm currently using 1.2.24 so I've read the section on services for that section. But their example just confuses me — justinSYDE, Sep 18 '14 at 23:05
possible duplicate of [Service injection into controller with AngularJS](http://stackoverflow.com/questions/16876748/service-injection-into-controller-with-angularjs) — Jared, Apr 17 '15 at 20:43

score 1 · Answer 1 · answered Sep 18 '14 at 23:17

1

var myapp = angular.module('myApp',[]);

myapp.service('MyService',['$http', function($http) {
   return {
       doSomeThing: function() {
           // do something here with $http or whatever
       },
       doSomeThingElse: function() {
       }
}
]);

myapp.controller('MyController',['MyService',function(MyService) {


   MyService.doSomeThing();

}]);

answered Sep 18 '14 at 23:17

Scott

1,690
3
13
18

Thanks for this! However, how would this look if myApp, the service and the controller were in separate files? This is where I'm really stuck. – justinSYDE Sep 18 '14 at 23:24
it would look nearly the same. At the top of your service just use myapp=angular.module('myApp') with only a single parameter and that will retrieve the previously defined myapp. Just include both .js files in your page – Scott Sep 18 '14 at 23:56

score 1 · Accepted Answer · answered Sep 19 '14 at 05:16

After hours of searching, I stumbled on the perfect example of how to inject a service to a controller in a clean and simple manner. Funny enough this example was actually found in the overview of AngularJS section of the AngularJS official documentation - talk about bad luck.

Anyway, here it is:

HTML

<!--include the separate controller, service, & app js files here -->
<div ng-app="invoice2" ng-controller="InvoiceController as invoice">
<b>Invoice:</b>
  <div>
    Quantity: <input type="number" min="0" ng-model="invoice.qty" required >
  </div>
  <div>
    Costs: <input type="number" min="0" ng-model="invoice.cost" required >
    <select ng-model="invoice.inCurr">
      <option ng-repeat="c in invoice.currencies">{{c}}</option>
    </select>
  </div>
  <div>
    <b>Total:</b>
    <span ng-repeat="c in invoice.currencies">
      {{invoice.total(c) | currency:c}}
    </span>
    <button class="btn" ng-click="invoice.pay()">Pay</button>
  </div>

Controller

angular.module('invoice2', ['finance2'])
.controller('InvoiceController', ['currencyConverter', function(currencyConverter) {
this.qty = 1;
this.cost = 2;
this.inCurr = 'EUR';
this.currencies = currencyConverter.currencies;

this.total = function total(outCurr) {
  return currencyConverter.convert(this.qty * this.cost, this.inCurr, outCurr);
};
this.pay = function pay() {
  window.alert("Thanks!");
};
}]);

Service

angular.module('finance2', [])
.factory('currencyConverter', function() {
var currencies = ['USD', 'EUR', 'CNY'];
var usdToForeignRates = {
  USD: 1,
  EUR: 0.74,
  CNY: 6.09
};
var convert = function (amount, inCurr, outCurr) {
  return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr];
};

return {
  currencies: currencies,
  convert: convert
};
});

Hope this simple example can help others who are also finding it difficult to learn AngularJS!

Example taken from: https://docs.angularjs.org/guide/concepts

How to inject a service/factory to be used by a controller?

2 Answers2

HTML

Controller

Service