Single Page Application (SPA) usando AngularJS com Web API – Parte 02

Neste artigo eu mostrar como criar uma aplicação ASP .NET↳.NET113 conteúdosNovidades do .NET 9 – o tipo genérico OrderedDictionaryDev (Back & Front) · dez 2024Novidades .NET 10: novas formas de uso do .NET CLIDev (Back & Front) · dez 2025Novidades do .NET 5: implementando um proxy reverso com YARP + ASP.NET 5Dev (Back & Front) · nov 2020Ver tudo em Dev (Back & Front) → Single Page Application usando os recursos do AngularJS com Web API.

Na primeira parte do artigo realizamos as seguintes tarefas:

• Criamos a solução no VS 2015 Community;

• Incluímos o AngularJS no projeto;

• Configuramos o banco de dados↳Banco de dados134 conteúdosSQL ou NoSQL: eis a questão!!Data · mar 2020Banco de dados: como organizar e dar segurança para milhões de dados de loteriasData · mai 20215 serviços gratuitos na cloud para bancos de dados PostgresData · fev 2025Ver tudo em Data → usando o Entity Framework;

• Definimos o domínio :  a classe Filme e a classe FilmeDb;

• Habilitamos o Migrations no projeto;

• Preenchemos a tabela com dados usando o Migrations.

Agora vamos criar a nossa Web API e iniciar o desenvolvimento AngularJS.

Recursos usados:

• Visual Studio 2015 Community
• AngularJS
• Web API
• Entity Framework

Nota: Baixe e use a versão Community 2015 do VS. Ela é grátis e é equivalente a versão Professional.

Criando a Web API

Abra a solução Filmoteca, criada no artigo anterior, no VS Community 2015 (Open Project). Depois clique com o botão direito do mouse sobre a pastas Controllers e, a seguir, em Add -> Controller.

A seguir, na janela Add Scaffold, selecione a opção Web API 2 Controller with actions, using Entity Framework e clique no botão Add.

Na janela Add Controller, o Model Class é a classe Filme que criamos e o Data context class é a classe FilmeDb.

Ajuste o nome para FilmeController e clique no botão Add.

Nota: Poderíamos marcar a opção Use async controller actions para criar os métodos do controlador como métodos assíncronos.

Ao final, teremos o controlador FilmeController criado na pasta Controllers com todos os métodos prontos para serem usados:

Observe que a classe FilmeController herda de ApiController.

Vamos executar o projeto e, a seguir, navegar para /api/filme no navegador.

Iremos obter como resultado as informações dos filmes que incluímos na tabela Filme codificada no formato XML ou JSON (dependendo do Browser), conforme vemos na figura abaixo:

Dessa forma, todo o código que precisamos do lado do servidor já está pronto.

Vamos iniciar, então, na próxima parte do artigo, a implementação do lado cliente usando AngularJS.