Web Api 2 的 Angular 资源设置答案

【问题标题】：Angular Resource Setup for Web Api 2Web Api 2 的 Angular 资源设置
【发布时间】：2014-08-07 14:19:37
【问题描述】：

所以我有我的 api 控制器：

public BlogController
{
    public Blog[] Get()
    {
        return context.Blogs.ToArray();
    }

    public Blog Get(Guid id)
    {
        return context.Blogs.FirstOrDefault(b => b.Id.Equals(id));
    }
}

如何设置我的 Angular 资源来模仿这个？

我从这个开始：

angular.module('spaTestApp.home.services', [])
    .factory('blogRepository', ['$resource', function($resource) {
            return {
                get: function() {
                    return $resource('/api/Blogs').query();
                }
            }
        }
    ]);

然后我想我可能需要这样做：

angular.module('spaTestApp.home.services', [])
        .factory('blogRepository', ['$resource', function($resource) {
            return $resource('/api/Blogs/:id', {}, {
                query: {method:'GET', params:{id:'WHAT_GOES_HERE'}, isArray:true}
            });
        }]);

我不完全确定 WHAT_GOES_HERE 中的内容，然后如何调用 get，我认为它会是：

blogRepository.query($selectedId);

【问题讨论】：

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

【解决方案1】：

您不需要在资源定义时提供选定的值，因此您可以将其从$resource 配置对象中移除。

当你调用你做的方法时

blogRepository.query({id:$selectedId});

【讨论】：

在你定义路由的时候，路由已经配置好了。它只会用具有相同名称属性的对象的值替换模板 id。试试看。
所以我的资源看起来像这样：$resource('/api/Blogs/:id')

【解决方案2】：

如果您查看 angular 文档，它会解释您将在哪里执行此操作。 https://docs.angularjs.org/api/ngResource/service/$resource

有一个部分讨论了用户资源，如下所示：

var User = $resource('/user/:userId', {userId:'@id'});
  var user = User.get({id:123}, function() {
    user.abc = true;
    user.$save();
  });

当使用工厂时，你可以走下面的路线

 app.factory('Blog', ['$resource', function($resource) {
        return $resource('/api/v1/blogs/:id', {id: '@id'});
    }
 ]);

或者如果你想添加更新和查询部分

app.factory('Blog', ['$resource', function($resource) {
   return $resource('/api/v1/blogs/:id', {id: '@id'},
       {
           'update': { method:'PUT' }
           'query':  { method:'GET', isArray:true},
       });
   }
]);

那么当调用get时

Blog.get({id: $scope.selectedId});

或者使用集合调用

Blog.query();

也可以像promise一样处理

Blog.get({id: $scope.selectedId})
   .$promise.then(function(response){
     //do something with response
   });

如果你想抓取资源集合

$scope.blogs; //If this is your blogs collection

Blog.get()
   .$promise.then(function(response){
       $scope.blogs = response;
   });

请记住，console.log(response) 将返回一个包含 2 个额外组件的数组，即 promise 已解析和 $promise。一旦你将它设置为你的范围变量，它就只是一个资源数组。

【讨论】：