CODEWITHSUNDEEP
angularjsrest
kasey
kasey

Reputation: 185

Trouble making a back end call through Angular service

I am newbie learning to make back end calls from my angular app's service, I am making the back end call from the angular's Service.

I am calling the function in the service from the controller.

The rest service I provided is not the actual service I am hitting, for some reasons I cannot disclose it. I am sure that the rest service I have is valid and is working, cause I was able to hit it though the controller, which is a bad way of doing it, so this is the reason i want to change the back end call to the service.

Below is my js file. Any help would be appreciated, please feel free to let me know if I am doing this wrong.

    angular.module("myApp",[])

    .controller("myCont", ['myService',  function($http, myService){

            var vm = this;
            this.myUrl = "some rest service";


            console.log("The  controller");

            vm.getDataInController = function() {
                console.log("The function is called");
                myService.getData(vm)
                    .success(function (custs) {
                        console.log("The data is obtained");
                    })
                    .error(function (error) {
                        console.log("some error occurred");
                    });
            }
        }])


        .service('myService', ['$http', function ($http) {

            this.getData = function (vm) {
                console.log("control is in the service");
                console.log(vm.myUrl);
                $http({
                    type: 'GET',
                    url: vm.myUrl
                    // data is where we have the JSON returned in the form of OBJECT from the gis
                }).then(function successCallback(response) {
                    console.log("the backend call worked");
                }), function errorCallback(response) {
                    console.log("the backend call worked");
                }

            };


    }])
    ;

My Html file is 

<!DOCTYPE html>
<html >
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script src = "angular-min.js"></script>
    <script src = "sampleOneScript.js"></script>

</head>
<body ng-app = "myApp" ng-controller = "myCont as main">

{{main.myUrl}}

<br>


<button type = "button" ng-click = main.getDataInController()>Click me </button>

</body>
</html>

The error I got in the console.

TypeError: Cannot read property 'getData' of undefined at vm.getDataInController (http://localhost:63342/exercise.weokspce/ng-repeat%20example/sampleOneScript.js:15:26) at fn (eval at (http://localhost:63342/exercise.weokspce/ng-repeat%20example/angular-min.js:212:87), :4:275) at f (http://localhost:63342/exercise.weokspce/ng-repeat%20example/angular-min.js:252:82) at m.$eval (http://localhost:63342/exercise.weokspce/ng-repeat%20example/angular-min.js:132:366) at m.$apply (http://localhost:63342/exercise.weokspce/ng-repeat%20example/angular-min.js:133:60) at HTMLButtonElement. (http://localhost:63342/exercise.weokspce/ng-repeat%20example/angular-min.js:252:134) at HTMLButtonElement.Hf.c (http://localhost:63342/exercise.weokspce/ng-repeat%20example/angular-min.js:35:137)

Upvotes: 0

Views: 810

Answers (1)

chris
chris

Reputation: 1817

The problem may be that you are not injecting properly all the dependencies for "myCont". Try changing the line:

.controller("myCont", ['myService',  function($http, myService){

with:

.controller("myCont", ['$http', 'myService',  function($http, myService){

and see if that corrects things

Upvotes: 3

Related Questions