Я пытаюсь подключить скрипт Angularjs с базой данных PostgreSQL (полученный HTML должен иметь возможность отображать данные, извлеченные из базы данных PostgreSQL). База данных PostgreSQL была создана локально с настройками по умолчанию (во время установки). Я работаю в среде визуальной студии.Как создать соединение между Angular.js и PostgreSQL с помощью контроллера WEB API 2?
Я попытался использовать подобный подход к этому (хотя это означало соединиться с SQL Server, а не к базе данных PostgreSQL): http://cybarlab.com/crud-operations-in-angularjs-and-web-api
По существу вы определяете файл web.config со строкой соединения, создать класс объекта для строк таблицы базы данных, используйте команду update-database в консоли диспетчера пакетов, чтобы создать соответствующую таблицу в базе данных PostgreSQL (которая отлично работала), создать контроллер WEB API 2 на основе ранее созданного класса объектов (получить операции CRUD) и получить данные с помощью функции $ http.get в скрипте angular.js (также вызывая контроллер в html-файле).
Проблема в том, что я не знаю, что написать в html.get (url) URL-адресе. Все мои попытки не были успешными, что вместе с отсутствием информации о Google по этой проблеме приводит меня к мысли, что такой подход для PostgreSQL просто не работает. Так есть ли способ заставить его работать? Или есть другой способ установить соединение? Хотя описание задачи не учитывает, что нужно использовать команду $ http.get, она отмечает, что это должно быть сделано с использованием контроллера WEB API 2 для операций CRUD.
Строка подключения (команда Update-база данных работала так должно быть правильно):
<connectionStrings>
<add name="TestProjectContext" providerName="Npgsql" connectionString="Server=127.0.0.1;Port=5432;Database=TestProject;User Id=postgres;Password=NotTelling;" />
</connectionStrings>
Класса объект (таблица с этими атрибутами была создана в базе данных PostgreSQL после использования команды обновления стола):
public class DataDestination
{
[Key]
public Guid Id { get; set; }
public string Server { get; set; }
public string Port { get; set; }
public string Database { get; set; }
public string Username { get; set; }
public string Password { get; set; }
public string SqlType { get; set; }
public string Owner { get; set; }
}
выход таблицы в HTML:
<body data-ng-app="app" data-ng-controller="TestController">
<table style="width:100%" , border="1">
<tr>
<td>Id</td>
<td>Server</td>
<td>Port</td>
<td>Database</td>
<td>Username</td>
<td>Password</td>
<td>SqlType</td>
<td>Owner</td>
</tr>
<tr data-ng-repeat="std in DataDestinations">
<td>
{{std.Id}}
</td>
<td>
{{std.Server}}
</td>
<td>
{{std.Port}}
</td>
<td>
{{std.Database}}
</td>
<td>
{{std.Username}}
</td>
<td>
{{std.Password}}
</td>
<td>
{{std.SqlType}}
</td>
<td>
{{std.Owner}}
</td>
</tr>
</body>
{{error}}
Наконец, angular.js оператор сценария я пытался использовать (остальную часть сценария, кажется, работает нормально, и сообщение об ошибке также выброшены успешно):
$http.get('http://localhost:5432/TestProject').success(function (data) {
$scope.DataDestinations = data;
})
.error(function() {
$scope.error = "An Error has occured while loading posts!";
});
EDIT: Спасибо за ваши ответы. контроллер WEB API 2 был создан с помощью контроллера Add -> Controller -> WEB API 2 с действиями, используя Entity Framework -> Выберите ранее созданный класс и контекст. Таким образом, в основном он был создан на основе класса. Вот код:
public class TestController : ApiController
{
private TestProjectContext db = new TestProjectContext();
// GET: api/Test
public IQueryable<DataDestination> GetDataDestinations()
{
return db.DataDestinations;
}
// GET: api/Test/5
[ResponseType(typeof(DataDestination))]
public IHttpActionResult GetDataDestination(Guid id)
{
DataDestination dataDestination = db.DataDestinations.Find(id);
if (dataDestination == null)
{
return NotFound();
}
return Ok(dataDestination);
}
// PUT: api/Test/5
[ResponseType(typeof(void))]
public IHttpActionResult PutDataDestination(Guid id, DataDestination dataDestination)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
if (id != dataDestination.Id)
{
return BadRequest();
}
db.Entry(dataDestination).State = EntityState.Modified;
try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException)
{
if (!DataDestinationExists(id))
{
return NotFound();
}
else
{
throw;
}
}
return StatusCode(HttpStatusCode.NoContent);
}
// POST: api/Test
[ResponseType(typeof(DataDestination))]
public IHttpActionResult PostDataDestination(DataDestination dataDestination)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
db.DataDestinations.Add(dataDestination);
try
{
db.SaveChanges();
}
catch (DbUpdateException)
{
if (DataDestinationExists(dataDestination.Id))
{
return Conflict();
}
else
{
throw;
}
}
return CreatedAtRoute("DefaultApi", new { id = dataDestination.Id }, dataDestination);
}
// DELETE: api/Test/5
[ResponseType(typeof(DataDestination))]
public IHttpActionResult DeleteDataDestination(Guid id)
{
DataDestination dataDestination = db.DataDestinations.Find(id);
if (dataDestination == null)
{
return NotFound();
}
db.DataDestinations.Remove(dataDestination);
db.SaveChanges();
return Ok(dataDestination);
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
private bool DataDestinationExists(Guid id)
{
return db.DataDestinations.Count(e => e.Id == id) > 0;
}
}
}
Я также буду размещать контекст объекта только в том случае, является неправильным:
namespace TestProject.Models
{
public class TestProjectContext : DbContext
{
public TestProjectContext()
{
Database.SetInitializer<DbContext>(null);
}
public DbSet<DataDestination> DataDestinations { get; set; }
}
}
EDIT2: Добавлен пакет CORS в проект и добавить его к началу уже определенного WEB API-контроллера:
using TestProject.Models;
using System.Web.Http.Cors;
namespace TestProject.Controllers
{
[EnableCors(origins: "http://localhost", headers: "*", methods: "*")]
public class TestController : ApiController
{
private TestProjectContext db = new TestProjectContext();
code is the same as in previous WEB API
Не исправлена проблема сама по себе. Выдается одна и та же самоопределенная ошибка - «Ошибка при загрузке сообщений!».
Где ваш код веб-API? Можете ли вы опубликовать его здесь? – Dmitry
Для начинающих, если только страница, с которой вы работаете, обслуживается с того же порта локального хоста, вам нужно включить CORS в свой api. Вы увидите ошибки управления доступом в консоли браузера dev, если не работаете на одном и том же порту – charlietfl