Связь между AngularJS и Asp.Net MVC

Question

Я новый, использующий угловой в MVC, я пытаюсь читать данные с моего контроллера с ASP.NET MVC EF, до углового. Я стараюсь с этим:

Я добавил в моей MVC контроллер (путь «/Controllers/BrandController.cs») этот код:

public JsonResult GetBrands() 
     { 
      var result = db.Brands.ToList(); 
      return Json(result, JsonRequestBehavior.AllowGet); 
     } 

А затем в файле JS я ставлю как сервис и контроллер углового, то есть код:

var BrandApp = angular.module('BrandApp', []); 

//Controller 
BrandApp.controller('BrandController', function ($scope, BrandService) { 

    getBrands(); 
    function getBrands() { 
     BrandService.getBrands() 
      .success(function (items) { 
       $scope.brands = items; 
       console.log($scope.brands); 
      }) 
      .error(function (error) { 
       $scope.status = 'Unable to load customer data: ' + error.message; 
       console.log($scope.status); 
      }); 
    } 

}); 

//service 
BrandApp.factory('BrandService', ['$http', function ($http) { 

    var BrandService = {}; 
    BrandService.getBrands = function() { 
     return $http.get('/Home/GetBrands'); 
    }; 
    return BrandService; 

}]); 

Что я не так?

Спасибо за ответы!

Answer 1

Поскольку имя контроллера BrandController, URL-адрес должен быть /Brand/GetBrands.

BrandService.getBrands = function() { 
    return $http.get('/Brand/GetBrands'); 
}; 

Обычно, когда имеете дело с такого рода проблемы, вы хотите отлаживать с помощью Fiddler, Chrome Plugin PostMan, или некоторые другие инструменты.

Answer 2

Если ваш контроллер C# является «BrandController», то URL-адрес должен быть/Brand/GetBrands. Просто измените $ метод HTTP, так как:

BrandService.getBrands = function() { 
    return $http.get('/Brand/GetBrands'); 
}; 

Это также хорошая практика, чтобы добавить атрибут [HttpGet] выше метода GetBrands.

Answer 3

Изменения в

return $http.get('/Brand/GetBrands'); 

Answer 4

Win прав. Также я вижу проблему, когда вы определяете свой угловой контроллер. Вы

BrandApp.controller('BrandController', function ($scope, BrandService) { 
... 
}) 

И вы должны иметь что-то вроде этого:

BrandApp.controller('BrandController', ['$scope', 'BrandService', function ($scope, BrandService) { ... }]) 

Каждый раз, когда вы добавляете зависимость, вы должны добавить его в массив, который является вторым параметром и параметр списка анонимная функция в конце этого массива.

Кроме того, вы всегда должны использовать массив в качестве второго аргумента, даже если ваш контроллер выглядит следующим образом:

MyApp.controller('MyController', [function() { ... }]) 

Это просто безопаснее. Если я правильно помню, какая-то версия углового может сломаться (но не всегда), если она отсутствует.