2015-07-22 92 views
0

我对为什么我的服务没有工作的困惑。 这是我在https://jsfiddle.net/regy3cps/ 其中有是有ngResource的应用模块,使其与一个js文件一起工作,但也许有人可以告诉我,为什么不工作,要么如果他们了解ngResource上有些注释代码。厂服务与AngularJS

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 =手动数据,它不工作。

+0

不能有一个2次成功'$ http' ....但你可以有尽可能多的“然后”。从每个'then'返回到下一个'then'。从成功返回什么都不做 – charlietfl

+0

也该URL未启用CORS感谢 – charlietfl

回答

1

你的角码看起来有点过。我为您创建了另一个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; 
    }); 
}]); 

body标签可以在 '小提琴选项' 中找到。 Fiddler似乎也没有为AJAX调用打开一个端口,所以你的代码不会像你期望的那样运行。

+0

但是这并没有为我在localhost工作: – user1842315

+0

你能告诉我你是什么接收错误?你可能会遇到同样的问题。您不能在本地主机上进行AJAX调用。你是直接运行文件吗? (不通过像Apache这样的服务器在浏览器中打开文件)如果双击该文件,请在本地主机上安装Apache服务器,然后再试一次http://stackoverflow.com/questions/23100239/testing-ajax-using- localhost –

+0

我正在运行一个tomcat服务器。在Apache 7.0.5.7上运行在localhost:8080上。这是一个身份验证问题吗? – user1842315

1

如果你在谷歌浏览器使用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.

仅用于开发目的:创建一个新的快捷方式,谷歌Chrome和在目标添加额外的参数,以允许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; 
      }); 
     }]); 

})();