CODEWITHSUNDEEP
angularjs
user1842315
user1842315

Reputation: 317

Factory Service with AngularJS

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.

Upvotes: 0

Views: 57

Answers (2)

SimplyInk
SimplyInk

Reputation: 6802

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

})();

Upvotes: 1

Brian Gerhards
Brian Gerhards

Reputation: 849

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.

Upvotes: 1

Related Questions