1

Hi I got stuck in custom service in AngularJS i prepared a code snippets as bellow

for HTML :

<div ng-controller="ctrlC">
<ul ng-repeat="x in cors">
    <li>{{x.Name}}</li>
</ul>
</div>

for AngularJS Service

var app = angular.module('myApp', []);
app.service('myfuncA', function($http){

    $http.get('lib/data.txt').success(function(datax){


        this.dataM = datax;

    }).error(function(){

var den =   console.log("No Data");
this.case = den;
    });


});

for controller

app.controller('ctrlC', function($scope, myfuncA){

    $scope.cors = myfuncA.datax;


});

The data is not pulling up and no errors are there.

3
  • Try using full path in http.get() Commented Oct 7, 2015 at 11:41
  • You will get CORS error Commented Oct 7, 2015 at 11:44
  • XMLHttpRequest cannot load 127.0.0.1:85/lib/data.txt. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:85' is therefore not allowed access. Commented Oct 7, 2015 at 11:44

5 Answers 5

1
  1. The service MUST return something
  2. datax is an internal variable, not available to contexts external to the service.

    Try return the promise of the $http.get or better the result of the promise.

    app.service('myfuncA', function($http){
      var service = {
           run: run
      };
    
      function run(){
        var ret;
        $http.get('lib/data.txt')
             .success(function(datax){
               ret = datax;})
             .error(function(){
               console.log("No Data");});
        return ret;
      }
    

    });

Sign up to request clarification or add additional context in comments.

Comments

0

$http.get method returns HttpPromise (https://docs.angularjs.org/api/ng/service/$http#get). Here is example of usage: https://docs.angularjs.org/api/ng/service/$http

Try to use:

$http.get('lib/data.txt').then(function(datax){
    this.dataM = datax;
}, function(){
    var den = console.log("No Data");
    this.case = den;
});

2 Comments

See data is travelling in but the case one what u shared and the one what i pasted, but it is not appearing in a view
You need to return the Promise to the controller and then on the controller set the $scope variable inside the then callback from the Promise returned - if I get time time will post some code.
0

Something along these lines. Not tested but will give you an idea. Also you should use the $log service and also not sure why you are setting it to a variable either. Also how is the data stored in the txt file? I assume JSON. But hopefully this will get you on the right track.

var app = angular.module('myApp', []);
app.service('myfuncA', function($http){
    return $http.get('lib/data.txt').then(function(datax){
       return datax;
    });
})

Controller:

app.controller('ctrlC', function($scope,$log myfuncA){
    myfuncA.then(function(datax){
           $scope.cors = datax;
           },function() {$log.log("No Data");};
    });
});

Comments

0

On a different note for $http calls I would rather use a factory and inject that factory in the controller to set $scope.cors. Something like this:

app.factory('myfuncA', function($http){
    return {
         getData: function() {

             return $http.get('lib/data.txt');
          };
    }
});

And in the controller I would consume the factory:

app.controller('ctrlC', function($scope, myfuncA){
    myfuncA.getData().then(function(response) {
         $scope.cors = response.data;
    });
});

Comments

0

I think the problem there is that this is not referring to your service object.

"Even though it appears this refers to the object where it is defined, it is not until an object invokes the this Function that this is actually assigned a value. And the value it is assigned is based exclusively on the object that invokes the this Function. this has the value of the invoking object in most circumstances. However, there are a few scenarios where this does not have the value of the invoking object. I touch on those scenarios later."

"The this keyword is most misunderstood when we borrow a method that uses this, when we assign a method that uses this to a variable, when a function that uses this is passed as a callback function, and when this is used inside a closure"

If I were you, I would use other type of syntax such as:

angular.module('myApp').factory('myfuncA', dataService);

/* @ngInject */
function dataService($http) {
    var service = {
        getData: getData
    };

    return service;

    function getData() {
        return $http.get('lib/data.txt');//$http.get method returns HttpPromise
    }
}

Then for using it:

myfuncA.getData().then(function (result) {
    //your code
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.