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, Jul 22 '15 at 04:39

score 1 · Answer 1 · answered Jul 22 '15 at 03:52

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 '15 at 03:52

Brian Gerhards

839
5
12

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 http://stackoverflow.com/questions/23100239/testing-ajax-using-localhost – Brian Gerhards Jul 22 '15 at 04:11
I am running a tomcat server. Running on localhost:8080 with Apache 7.0.5.7. Is this an auth issue? – user1842315 Jul 22 '15 at 13:57
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. – Brian Gerhards Jul 22 '15 at 14:33
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' – user1842315 Jul 22 '15 at 14:42
I'm glad you found your issue. I would recommend asking an additional question to the community if http://stackoverflow.com/questions/10143093/origin-is-not-allowed-by-access-control-allow-origin does not help you correct this 'new to you' issue. – Brian Gerhards Jul 22 '15 at 15:09
Yea I just talked to my boss. He explained CORS and the issue of why I can't use relative links locally. Thanks!! – user1842315 Jul 22 '15 at 15:14
If this or any answer has solved your question please consider [accepting it](http://meta.stackexchange.com/q/5234/179419) by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. – Brian Gerhards Jul 22 '15 at 15:24

score 1 · Answer 2 · answered Jul 22 '15 at 04:28

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;
            });
        }]);

})();

Factory Service with AngularJS

2 Answers2