CODEWITHSUNDEEP
angularjsservicedependency-injectioncontroller
justinSYDE
justinSYDE

Reputation: 307

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

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!

Upvotes: 2

Views: 301

Answers (2)

justinSYDE
justinSYDE

Reputation: 307

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

Upvotes: 1

Scott
Scott

Reputation: 1690

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

}]);

Upvotes: 1

Related Questions