AngularJS工厂服务_Angularjs - Fatal编程技术网

AngularJS工厂服务

angularjs

AngularJS工厂服务,angularjs,Angularjs,我不明白为什么我的服务不起作用。这就是我所处的位置这里有一些注释代码，其中有一个ngResource的应用程序模块，可以让它与一个js文件一起工作，但是如果有人理解ngResource，也许可以告诉我为什么这也不起作用 angular.module('priceCompareApp', []) //.factory('dish', function($resource, $http){ // var baseUrl = "http://www.decentrix.net/servic

我不明白为什么我的服务不起作用。这就是我所处的位置这里有一些注释代码，其中有一个ngResource的应用程序模块，可以让它与一个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=手动数据，但它不工作。

您的角度代码看起来有点不对劲。我为您创建了另一个JSFIDLE，并更新了代码，如下所示

body标签可在“Fiddle选项”下找到。Fiddler似乎也没有为AJAX调用打开端口，因此您的代码没有按预期运行。

如果您在Google Chrome中使用javascript开发人员控制台

（F12）

，您将看到无法加载资源的原因

请求的资源上不存在“Access Control Allow Origin”头。起源localhost://x.x.x.x 因此不允许访问。

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

“C:\Program Files（x86）\Google\Chrome\Application\Chrome.exe”--允许从文件访问文件--禁用web安全性
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>

你能告诉我你收到了什么错误吗？您可能遇到了相同的问题。您不能在Localhost上进行AJAX调用。您是否直接运行该文件？（在浏览器中打开文件，而不是通过Apache之类的服务器）如果双击该文件，请在本地主机上安装Apache服务器，然后重试我正在运行tomcat服务器。在localhost:8080和Apache 7.0.5.7上运行。这是一个身份验证问题吗？在本地向函数中添加一个console.log（）
，并对其进行测试。如果您没有收到任何错误或控制台.log（）
，则说明您没有点击该函数。我刚刚意识到我的很多问题是什么。我在一个html标记上有ng app指令，该标记后来没有输出到浏览器。现在我把它贴在身体标签上。另外，我现在得到了一个“不允许访问控制-允许源代码”我很高兴你发现了你的问题。如果不能帮助您纠正此“新问题”，我建议您向社区询问一个附加问题。一个$http
…不能有两个成功，但您可以有任意多个，然后
。从每个返回，然后
被发送到下一个然后。成功返回也不会导致url未启用CORS
<!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>

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

})();