如何从mvc5项目调用web-api控制器

时间:2014-05-21 07:19:07

标签: angularjs asp.net-mvc-5

我想使用angularjs从mvc5 web项目调用web-api控制器。重要的是我的mvc5和web-api是单独的项目。

下面是我的**编辑代码 angularjs控制器功能**

//following is our application module.ngGrid is the angular grid that we need to use to display data.
var categoryApp = angular.module('categoryApp', ['ngGrid']);
var url = 'http://localhost:8053/api/Category';


//the factory object for the webAPI call.
categoryApp.factory('categoryRepository', ['$resource',
    function ($resource) {
        return $resource('/api/Category');
    }
]);

//controller   
categoryApp.controller('categoryCtrl', ['$scope', 'categoryRepository', 
    function($scope, categoryRepository) {
        $scope.categoryData = categoryRepository.get() 
        //or .query() if it returns an array

        //if you need to manipulate the data after retrieval:
        categoryRepository.get().$promise.then(function(data){
            $scope.categoryData = data;
        })

        $scope.setScope = function (obj, action) {

            $scope.action = action;
            $scope.New = obj;
        }

        $scope.gridOptions = {
            data: 'categoryData',
            showGroupPanel: true,
            columnDefs: [{ field: 'Name', displayName: 'Name', width: '15%' },
                { field: 'Description', displayName: 'Description', width: '15%' },

            ]
        };
    }
])

问题是web-api没有通过上面的代码调用 请尽快告诉我如何解决此问题。

1 个答案:

答案 0 :(得分:0)

我会将您的categoryRepository重构为resource

categoryApp.factory('categoryRepository', ['$resource',
    function($resource) {
        return $resource('/api/Category');
    }
])

然后您可以在控制器中使用它:

categoryApp.controller('categoryCtrl', ['$scope', 'categoryRepository', 
    function($scope, categoryRepository) {
        $scope.categoryData = categoryRepository.get() 
        //or .query() if it returns an array

        //if you need to manipulate the data after retrieval:
        categoryRepository.get().$promise.then(function(data){
             $scope.categoryData = data;
        })
    }
])

要使用$resource,您需要在应用中包含资源模块(您可以在angular docs上找到说明)