How to send data from AngularJS controller to its service?

Question

I have my page with element like this

<div ng-app="myApp" class="ng-cloak" ng-controller="MyController as ctrl">
        <div class="item" ng-repeat="i in ctrl.items">                
             <h3>Some text...</h3>  
             <p ng-bind="i.id"></p>
             <button ng-click="alertValue(i.id)">DETAILS</button></p>                   
        </div>
</div>

My controller looks like this and has a method

   'use strict';

    App.controller('MyController', ['$scope', 'Item', function ($scope, Item) {
             $scope.alertValue = function (id) {
                 alert('clicked:' + id);
             }
    }

Which works fine, I get the alert with the id. But how do I send this id from controller to my service? I tried following few tutorials, but they are all different and I got completly lost in it. Can anyone explain this to me in a simple way and show how to do this? May be I need to provide some additional info? Thanks.

Answer 1

I try not to use scope so I would create a function for that click on my controller. Then it's just a matter of doing what you want with it.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
  angular.module('my-app', [])
  .service('Items', function() {
    return {
      doWork: function(id) {
        console.log(id);
      }
    };
  })
  .controller('ItemsCtrl', function(Items) {
    var vm = this;
    vm.items = [
      { id: 1, name: 'Foo' },
      { id: 2, name: 'Bar' },
      { id: 3, name: 'Baz' },
    ];
    
    vm.doWork = function(id) {
      Items.doWork(id);
    };
  });
</script>



<div ng-app="my-app">
  <div ng-controller="ItemsCtrl as ctrl">
    <ul>
      <li ng-repeat="item in ctrl.items">
        {{item.name}}
        <button ng-click="ctrl.doWork(item.id)">Do Work</button>
      </li>
    </ul>
  </div>
</div>

Answer 2

You have to use $http service. $http service facilitates communication with the remote HTTP servers.

$http service use then method in order to attach a callback.

The then() method takes two arguments: a success and an error callback which will be called with a response object.

Using the then() method, attach a callback function to the returned promise.

Something like this:

app.controller('MainCtrl', function ($scope, $http){
   $http({
     method: 'GET',
     url: 'api/url-api'
   }).then(function (success){

   },function (error){
  });
}

See reference here

Shortcut methods are also available.

$http.get('api/url-api').then(successCallback, errorCallback);

function successCallback(response){
   //success code
}
function errorCallback(error){
   //error code
}

Answer 3

You have to inject the service inside controller to pass some data to it.

app.controller.js

App.controller('MyController', ['$scope', 'ItemService', function ($scope, ItemService) {
         $scope.alertValue = function (id) {
            ItemService.id = id;       
         }
}

Please refer this for more information on creating and registering a service in angular.