How to call service in angularjs

Question

(function() {
    'use strict';
    angular
        .module('autocompleteCustomTemplateDemo', ['ngMaterial'])
        .controller('DemoCtrl', DemoCtrl);

    function DemoCtrl($timeout, $q, $log, $scope, $http) {
        var self = this;
        $scope.service_details = [];



        $scope.productdetail == [];

        $scope.add = function() {
            $scope.show_servicelist = true;
            $scope.type = function(e) {
                alert(e);
            }
            $scope.service_details.push(JSON.parse($scope.productdetails));
        }
        self.simulateQuery = false;
        self.isDisabled = false;

        self.repos = loadAll();
        self.querySearch = querySearch;
        self.selectedItemChange = selectedItemChange;
        self.searchTextChange = searchTextChange;


        function querySearch(query) {
            var results = query ? self.repos.filter(createFilterFor(query)) : self.repos,
                deferred;
            if (self.simulateQuery) {
                deferred = $q.defer();
                $timeout(function() {
                    deferred.resolve(results);
                }, Math.random() * 1000, false);
                return deferred.promise;
            } else {
                return results;
            }
        }

        function searchTextChange(text) {
            $log.info('Text changed to ' + text);
        }

        function selectedItemChange(item) {
            $log.info('Item changed to ' + JSON.stringify(item));
            $scope.productdetails = JSON.stringify(item);
        }


        function loadAll() {
            var repos = [{
                    'product_gid': '1',

                    'product_name': 'stabilizer',
                    'forks': '16,175',
                }, {
                    'product_gid': '2',

                    'product_name': 'stand',
                    'forks': '760',
                }, {
                    'product_gid': '3',

                    'product_name': 'ac',
                    'forks': '1,241',
                },

            ];
            return repos.map(function(repo) {
                repo.value = repo.product_name.toLowerCase();
                return repo;
            });
        }


        function createFilterFor(query) {
            var lowercaseQuery = angular.lowercase(query);

            return function filterFn(item) {
                return (item.value.indexOf(lowercaseQuery) === 0);
            };

        }
    }
})();

app.service("productservice", function($http) {
    this.getproduct = function() {
        deggure
        var response = $http.get("/Productjson/");
        return response;
    }
});

I'm displaying angularjs file for listing autocomplete, now i have added new service file to get some data.I want to send the service data into app code, i dont know how to connect service with controller code.when i try to connect i got syntax error. please modify the code and guide me to fetch the service data .

Answer 1

This is how you write a service-

I prefer factory:

(function() {
    'use strict';
    angular
        .module('app')
        .factory('productservice', productservice);
    function productservice($q, $http) {
        return {
            getproduct : getproduct
        };
        function getproduct(){
            var d = $q.defer();
            $http({
                method: 'GET',
                url: 'url'
            }).success(function(response){
                d.resolve(response);
            }).error(function(response){
                d.reject(response);
            });
            return d.promise;
        }
    }
})();

Here;s controller

(function() {
    'use strict';
    angular
        .module('app')
        .controller('AppController', AppController);
    function AppController(
        $scope, productservice
    ) {
            function getproduct(){
            productservice.getproduct().then(function(response){
                //got the response here
            }, function(){
            });
        }
    }
})();

Answer 2

This is full sample to show you how to use service in angularjs with controller:

var app = angular.module("app", []);

app.controller("ctrl", function($scope, service) {

  $scope.alert = function() {
    service.alert();
  }

  $scope.console = function() {
    service.console();
  }
})

app.service("service", function() {
  this.alert = function() {
    alert("hey")
  }

  this.console = function() {
    console.log("hey")
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <button ng-click="alert()">alert</button>
  <button ng-click="console()">console</button>
</div>