Question

我很困惑为什么我的服务不起作用。这是我https://jsfiddle.net/regy3cps/的所在地那里有一些注释代码，它们有一个ngResource的app模块，可以和js文件一起使用，但也许有人可以告诉我，如果他们理解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;
    });
}]);

修改我的代码在某处有些不对劲。我制作了我的$ scope.packages =手动数据并且它无法正常工作。

Answer 1

你的Angular代码看起来有些偏差。我为你创建了另一个JSFiddle，并按如下方式更新了代码。

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

身体标签可以在“小提琴选项”下找到。 Fiddler似乎也没有为AJAX调用打开端口，因此您的代码无法按预期运行。

Answer 2

如果您在Google Chrome中使用javascript开发者控制台(F12)，您将看到无法加载资源的原因

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

仅用于开发目的：为Google Chrome创建新的快捷方式，并在Target中添加其他参数以允许CORS并读取本地json文件以供后代使用。您需要关闭所有Google Chrome窗口并使用新的快捷方式重新打开。

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

})();

AngularJS的工厂服务

2 个答案: