我正在尝试使用 $resource 从 ASP.NET webApi 获取数据，但它不工作答案

【问题标题】：I am trying to use $resource for fetching data from ASP.NET webApi but it is not working我正在尝试使用 $resource 从 ASP.NET webApi 获取数据，但它不工作
【发布时间】：2017-09-02 14:20:22
【问题描述】：

我是 webapi 和 angular 的新手，找不到合适的解决方案，请帮助我，如果可以的话，请建议我一些好的资源来了解这个主题。

productResource.js 文件：

(function () {
    "use strict";

    angular.module('Random')
    .factory('productResource', function ($resource) {
        return $resource("http://localhost:60208/");
    });
});

T.js 文件

var app = angular.module("JobsApp", []);
app.controller("JobController", function($scope,$http,productResource)
{
    $scope.Jobs = productResource.query();
});

Index.cshtml 文件：

<div ng-app="JobsApp">
    <div ng-controller="JobController">
        <table class="table">
            <tr>
                <th>Job Id</th>
                <th>Description</th>
                <th>Minimum</th>
                <th>Maximum</th>
            </tr>
            <tr ng-repeat="j in Jobs">
                <td>{{j.job_id}}</td>
                <td>{{j.job_desc}}</td>
                <td>{{j.min_lvl}}</td>
                <td>{{j.max_lvl}}</td>
            </tr>
        </table>
    </div>
</div>

【问题讨论】：

这不是 Angular 2 的问题，请移除标签。

标签： asp.net angularjs asp.net-mvc asp.net-web-api

【解决方案1】：

您需要将ngResource 注入您的模块以使其正常工作。喜欢

(function () {
    "use strict";    
    angular.module('Random',['ngResource'])
    .factory('productResource', function ($resource) {
        return $resource("http://localhost:60208/");
    });
});

更新

您的网址似乎也不正确。您需要在后端创建一个WebAPI controller 类进行通信，它应该像/User/jobs 一样是RESTful。

进一步请确保您已在应用中添加angular-resource.js。

【讨论】：

什么不工作，？你得到同样的错误还是新的错误。 ?进一步尝试：使用相同的模块名称进行工厂注册 JobsApp ，并访问如下数据：productResource.query(function(data){ $scope.Jobs = data; })
是的，还是同样的错误。你能给我一个在 mvc 中使用 $resource 从任何服务获取数据的例子吗？
我猜你的后端实现不正确，正如你的网址所说，请检查this section，而不是整个页面。 :) 而且我还附上了小提琴演示的链接。查看 fiddler 中包含的脚本并尝试将您的代码与其连接.. fiddle

【解决方案2】：

参考这个http://fdietz.github.io/recipes-with-angular-js/consuming-external-services/consuming-restful-apis.html

使您的代码如下所示..

var app = angular.module("JobsApp",["ngResource"]);
app.controller("JobController",['$scope','productResource', function($scope,  productResource){
   productResource.query(function(value) {
		$scope.Jobs=value;
    //console.log(value);
	});
}]);

app.factory('productResource', function ($resource) {
return $resource('http://jsonplaceholder.typicode.com/posts');
    });

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-resource.js"></script>
</head>
<body ng-app="JobsApp">
<div ng-controller="JobController">
    <div>
        <table class="table">
            <tr>
                <th>Job Id</th>
                <th>Description</th>
                <th>Minimum</th>
                <th>Maximum</th>
            </tr>
            <tr ng-repeat="job in Jobs">
                <td>{{job.id}}</td>
                <td>{{job.title}}</td>
                <td>{{job.userId}}</td>
                <td></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

【讨论】：