Factory Service with AngularJS

Question

I am confused on why my services aren't working. Here is where I am at https://jsfiddle.net/regy3cps/ There is some commented code on there that had an app module of ngResource to make it work along with a js file but maybe someone can tell me why that doesn't work either if they understand ngResource.

angular.module('priceCompareApp', [])

//.factory('dish', function($resource, $http){
//    var baseUrl = "http://www.decentrix.net/services/";
//    var programming = "programming/";
//
//    //return $resource(baseUrl + 'packages', {}, {
//    //    packages: {method: 'GET', isArray:true},
//    //    smartpack: {url: baseUrl + programming + 'SmartPack', method: 'GET', isArray:true},
//    //    at120: {url: baseUrl + programming + 'at120', method: 'GET', isArray:true},
//    //    at120p: {url: baseUrl + programming + 'at120p', method: 'GET', isArray:true},
//    //    at200: {url: baseUrl + programming + 'at200', method: 'GET', isArray:true},
//    //    at250: {url: baseUrl + programming + 'at250', method: 'GET', isArray:true}
//    //})
//})
//
//.controller('compareApp', function ($scope, dish){
//    $scope.packages = dish.packages;
//    $scope.smartpack = dish.smartpack();
//    $scope.at120 = dish.at120();
//    $scope.at120p = dish.at120p();
//    $scope.at200 = dish.at200();
//    $scope.at250 = dish.at250();
//});

.factory('dish', ['$http', function($http) {
    return $http.get('http://www.decentrix.net/services/packages')
        .success(function(data) {
            return data;
        })
        .error(function(err) {
            return err;
        });
}])
.controller('MainController', ['$scope', 'dish', function($scope, dish) {
    dish.success(function(data) {
        $scope.packages = data;
    });
}]);

EDIT There is something off about my code somewhere. I made my $scope.packages = manual data and it's not working.

can't have 2 success for one $http....but you can have as many then as you want. Return from each then gets sent to next then. return from success does nothing — charlietfl
– charlietfl, Commented Jul 22, 2015 at 4:39

Brian Gerhards · Accepted Answer · 2015-07-22 03:52:55Z

1

Your Angular code looked a little off. I created another JSFiddle for you and updated the code as follows.

https://jsfiddle.net/bgerhards/xukucsuk/

var app = angular.module('myApp', [])

    .filter('html_render', ['$sce', function ($sce) {
    return function (text) {
        return $sce.trustAsHtml(text);
    };
}])


.factory('dish', ['$http', function($http) {
    return $http.get('http://www.decentrix.net/services/')
        .success(function(data) {
            return data;
        })
        .error(function(err) {
            return err;
        });
}])
.controller('MainController', ['$scope', 'dish', function($scope, dish) {
    dish.success(function(data) {
        $scope.packages = data;
    });
}]);

The body tag can be found under 'Fiddle Options'. Fiddler also seems to not have a port open for an AJAX call, so your code does not run as you may expect it to.

answered Jul 22, 2015 at 3:52

Brian Gerhards

8495 silver badges12 bronze badges

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

7 Comments

Brian Gerhards Over a year ago

Can you tell me what error you are receiving? You are likely running into the same issue. You can't make an AJAX call on Localhost. Are you running the file directly? (opening the file in the browser not through a server like Apache) If you are double clicking the file, install an Apache server on your localhost and try again stackoverflow.com/questions/23100239/…

user1842315 Over a year ago

I am running a tomcat server. Running on localhost:8080 with Apache 7.0.5.7. Is this an auth issue?

Brian Gerhards Over a year ago

Add a console.log() into your function locally and test it out. If you are not receiving any errors or the console.log(), then you are not hitting the function.

user1842315 Over a year ago

I just realized what a lot of my problem was. I had the ng-app directive on an html tag that was later not being output to the browser. Now I put it on the body tag. Also I am now getting a No 'Access-Control-Allow-Origin'

Brian Gerhards Over a year ago

I'm glad you found your issue. I would recommend asking an additional question to the community if stackoverflow.com/questions/10143093/… does not help you correct this 'new to you' issue.

|

SimplyInk · Accepted Answer · 2015-07-22 04:28:38Z

If you use the javascript developer console (F12) in Google Chrome, you will see why your resource could not be loaded

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin localhost://x.x.x.x is therefore not allowed access.

For development purposes only: Create a new shortcut to Google Chrome and in the Target add additional arguments to allow CORS and reading local json files for posterity. You need to close all Google Chrome windows and reopen using the new shortcut.

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security

HTML

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="priceCompareApp">
    <div ng-controller="MainController">
        <div class="row">
            <div ng-repeat="package in packages">
                <p>{{packages.name}}</p>
                <p>{{package.description}}</p>
                <p>{{package.variation}}</p>
                <p>{{package.packageId}}</p>
                <p>{{package.corePackage}}</p>
            </div>
        </div>
    </div>
</body>
</html>

app.js

(function () {

    var app = angular.module('priceCompareApp', [])

        //.factory('dish', function($resource, $http){
        //    var baseUrl = "http://www.decentrix.net/services/";
        //    var programming = "programming/";
        //
        //    //return $resource(baseUrl + 'packages', {}, {
        //    //    packages: {method: 'GET', isArray:true},
        //    //    smartpack: {url: baseUrl + programming + 'SmartPack', method: 'GET', isArray:true},
        //    //    at120: {url: baseUrl + programming + 'at120', method: 'GET', isArray:true},
        //    //    at120p: {url: baseUrl + programming + 'at120p', method: 'GET', isArray:true},
        //    //    at200: {url: baseUrl + programming + 'at200', method: 'GET', isArray:true},
        //    //    at250: {url: baseUrl + programming + 'at250', method: 'GET', isArray:true}
        //    //})
        //})
        //
        //.controller('compareApp', function ($scope, dish){
        //    $scope.packages = dish.packages;
        //    $scope.smartpack = dish.smartpack();
        //    $scope.at120 = dish.at120();
        //    $scope.at120p = dish.at120p();
        //    $scope.at200 = dish.at200();
        //    $scope.at250 = dish.at250();
        //});

        .factory('dish', ['$http', function ($http) {
            return $http.get('http://www.decentrix.net/services/packages')
                .success(function (data) {
                    return data;
                })
                .error(function (err) {
                    return err;
                });
        }])
        .controller('MainController', ['$scope', 'dish', function ($scope, dish) {
            dish.success(function (data) {
                $scope.packages = data;
            });
        }]);

})();

Collectives™ on Stack Overflow

Factory Service with AngularJS

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related