Доступ к жестко закодированным данным в MVC-контроллере с использованием Angularjs

Question

У меня есть некоторые сведения об Angularjs, но я новичок в ASP.NET MVC. Итак, я следил за этим уроком https://docs.microsoft.com/en-us/aspnet/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api. Но я столкнулся с проблемой, поскольку использует JQuery. Я хочу получить доступ к жестко закодированным данным в нижнем контроллере с помощью Angular.

using ProductsApp.Models; 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Web.Http; 

namespace ProductsApp.Controllers 
{ 
    public class ProductsController : ApiController 
    { 
     Product[] products = new Product[] 
     { 
      new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
      new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
      new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M } 
     }; 

     public IEnumerable<Product> GetAllProducts() 
     { 
      return products; 
     } 

     public IHttpActionResult GetProduct(int id) 
     { 
      var product = products.FirstOrDefault((p) => p.Id == id); 
      if (product == null) 
      { 
       return NotFound(); 
      } 
      return Ok(product); 
     } 
    } 
} 

Я просто хочу, чтобы метод имел доступ к данным.

Может ли кто-нибудь помочь мне с этим. Спасибо

Answer 1

Используйте $http в вашем сервисе или контроллере AngularJS для доступа к данным из вашего веб-API. Например:

$http.get("http://localhost:8080/api/products/getallproducts") 
    .then(function(response) { 
     console.log(response.data); 
    }); 

Answer 2

При написании приложения WebApi вам необходимо изменить имя IHttpActionResult для Get. и попробуйте этот URL:

localhost:8080/api/products/{id} 

* {id} не является обязательной.

Если вы хотите использовать маршрут, вы должны изменить WebApiConfig.cs в папке App_Start.

Answer 3

Посмотрите на услугу angularjs $http, которая используется для установления связи с http-сервером в ситуации как ваша.

Для вызова GetAllProducts(), используя $http, использовать маршрут "api/products" как этот

$http.get("api/products") 
    .then(function(response) { 
     console.log(response); 
}); 

И называть GetProduct() использовать маршрут "api/products/1", если ваш продукт 1 нравится эта

$http.get("api/products/1") 
    .then(function(response) { 
     console.log(response); 
});