廠服務與AngularJS

我對爲什麼我的服務沒有工作的困惑。這是我在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 =手動數據，它不工作。

來源

2015-07-22 user1842315

不能有一個2次成功'$ http' ....但你可以有儘可能多的「然後」。從每個'then'返回到下一個'then'。從成功返回什麼都不做 – charlietfl

也該URL未啓用CORS感謝 – charlietfl

你的角碼看起來有點過。我爲您創建了另一個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調用打開一個端口，所以你的代碼不會像你期望的那樣運行。

來源

2015-07-22 03:52:55

但是這並沒有爲我在localhost工作： – user1842315

你能告訴我你是什麼接收錯誤？你可能會遇到同樣的問題。您不能在本地主機上進行AJAX調用。你是直接運行文件嗎？（不通過像Apache這樣的服務器在瀏覽器中打開文件）如果雙擊該文件，請在本地主機上安裝Apache服務器，然後再試一次http://stackoverflow.com/questions/23100239/testing-ajax-using- localhost –

我正在運行一個tomcat服務器。在Apache 7.0.5.7上運行在localhost：8080上。這是一個身份驗證問題嗎？ – user1842315

如果你在谷歌瀏覽器使用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; 
      }); 
     }]); 

})();

來源

2015-07-22 04:28:38 SimplyInk

廠服務與AngularJS

回答

相關問題