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

Neste artigo eu mostrar como criar uma aplicação ASP .NET 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 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.