CODEWITHSUNDEEP
angularjs
Vikram Singh Jadon
Vikram Singh Jadon

Reputation: 1047

Angular JS - service not working

I am using a service to get data from the server using $http.get() method. I am calling the function in the service and then accessing its variable from the controller. But it is not working this way. The code is below

    'use strict';

var mission_vision_mod = angular.module('myApp.mission_vision', ['ngRoute']);

mission_vision_mod.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/mission_vision', {
    templateUrl: 'partials/mission_vision/mission_vision.html',
    controller: 'mission_visionCtrl'
  });
}]);

mission_vision_mod.controller('mission_visionCtrl', ['$scope','getMissionData','$http', function($scope, $http, getMissionData) {
        $scope.visiontext = "Here is the content of vision";
        getMissionData.getmissiondata();
        $scope.missions = getMissionData.missiondata;
        $scope.len = $scope.missions.length;
}]);

mission_vision_mod.service('getMissionData', ['$rootScope','$http', function($rootScope, $http){
        var missiondata;
        function getmissiondata(){
            $http.get('m_id.json').success(function(data){
            missiondata = data;
        });
        }
}]);

When i write the$http.get() function in the controller itself, it works. I am new to angular JS.

Upvotes: 0

Views: 80

Answers (3)

Abdul23
Abdul23

Reputation: 6015

Try writing your service like this

mission_vision_mod.service('getMissionData', ['$rootScope','$http', function($rootScope, $http){
    this.getMissionData=function(){
        return $http.get('m_id.json');
    }
}]);

Use Service in controller like this:

mission_vision_mod.controller('mission_visionCtrl', ['$scope','getMissionData','$http', function($scope,getMissionData,$http) {
    $scope.visiontext = "Here is the content of vision";
    getMissionData.getMissionData().success(function(response){
       $scope.missions=response;
       $scope.len = $scope.missions.length;
     }).error(function(errorl){
       //handle error here
     });

}]);

Also I suggest using a better name for service -'MissionDataService' :)

EDIT- Your sequence of injected service should match sequence of injectable names specified in the array..See my last edit

Upvotes: 1

JB Nizet
JB Nizet

Reputation: 691735

        ['$scope','getMissionData','$http', 
function($scope,   $http,           getMissionData

The service names don't match with the variable names.

My advice: stop using this array notation. It clutters the code and is a frequent source of bugs. Use ng-annotate.

That said, your service is not correctly defined. It doesn't have any member function that would allow it to be called. Re-read the documentation of services. Defining services using factory() is easier than defining them using service(), BTW. And the service should return the promise returned by $http. Trying to access the value returned by an asynchronous call right after making the asynchronous call will never work. Read http://blog.ninja-squad.com/2015/05/28/angularjs-promises/

Upvotes: 1

Sajal
Sajal

Reputation: 4401

Try:

    mission_vision_mod.service('getMissionData', ['$rootScope','$http', function($rootScope, $http){
            var missiondata;
            function getmissiondata(){
                $http.get('m_id.json').success(function(data){
                missiondata = data;
                return missiondata;
            });
            }

}]);

Upvotes: 0

Related Questions