ASP .NET – Single Page Application(SPA) usando AngularJS com Web API – Parte 07

Neste artigo eu mostrar como criar uma aplicação ASP .NET Single Page Application usando os recursos do AngularJS com Web API: Criando um serviço.

Na sexta parte do artigo implementamos as funcionalidades para deletar filmes, criamos a view edita.html que permitirá editar e criar um novo filme e alteramos os controladores listaController e detalhesController, incluindo as functions deletar e editar.

Hoje vamos criar o controlador editaController e implementar as functions isEditavel(), cancelar, salvar, atualizaFilme e criaFilme que já foram definidas.

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 profissional.

Criando o controlador editaController e implementando as funcionalidades para crira e editar filmes

Abra a solução Filmoteca criada no artigo anterior no VS Community 2015 (Open Project).

Clique com o botão direito do mouse na pasta Angular/js e, a seguir, em Add -> New Item e selecione o template JavaScript File. Depois informe o nome editaController.js.

A seguir inclua o código abaixo neste arquivo:

(function (app) {
var editaController = function ($scope, filmeService) {

    $scope.isEditavel = function () {
        return $scope.editar && $scope.editar.filme;
    };
    $scope.cancelar = function () {
        $scope.editar.filme = null;
    };
    $scope.salvar = function () {
        if ($scope.editar.filme.Id) {
            atualizaFilme();
        } else {
            criaFilme();
        }
    };
    var atualizaFilme = function () {
        filmeService.atualizar($scope.editar.filme)
        .success(function() {
            angular.extend($scope.filme , $scope.editar.filme);
            $scope.editar.filme = null;
        });
    };
    var criaFilme = function () {
        filmeService.criar($scope.editar.filme)
        .success(function(filme) {
            $scope.filmes.push(filme);
            $scope.editar.filme = null;
        });
    };
  };
app.controller("editaController", editaController);
}(angular.module("filmoteca")));

No código deste controller temos que:

1. As functions isEditavel, cancelar e salvar estão definidas no $scope e são acionadas pelas diretivas ng-click nas respectivas views. As functions atualizaFilme e criaFilme não estão vinculadas ao $scope e são chamadas dentro do controller;
2. A propriedade  $scope.isEditavel ativa a exibição da view edita.html, retornado true quando a propriedade editar.filme está disponível no $scope e exibe a view para editar o filme.

O objeto $scope em um controller herda do objeto $scope em um controller pai. Como o controller editaController está aninhado no interior da listaController e detalhesController, ele pode ler todas as propriedades do $scope no controller pai.

O controlador editaController usa este comportamento para incluir um novo filme no array de filmes quando cria um novo filme e copia as propriedades quando está atualizando (via angular.extend).

Nota: angular.extend é usado em um cenário quando você quer copiar um objeto para outro objeto. Ex: angular.extend(destination, src1, src2 …). Podemos também usar angular.copy() mas ele é mais lento.

Feito isso, basta incluir a referência ao novo controlador editaController.js no arquivo Index.html conforme abaixo:

<div class="well">
    <h4>Macoratti .net</h4>
</div>
<div ng-app="filmoteca">
    <ng-view></ng-view>
</div>
@section scripts
{
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/AngularApp/js/filmoteca.js"></script>
    <script src="~/AngularApp/js/filmeService.js"></script>
    <script src="~/AngularApp/js/listaController.js"></script>
    <script src="~/AngularApp/js/detalhesController.js"></script>
    <script src="~/AngularApp/js/editaController.js"></script>
}

Agora é só alegria!

Já temos nossa aplicação com todas as funcionalidades implementadas e vamos testar:

1. Incluindo um novo filme:

2. Alterando um filme existente:

Se você acompanhou a série de artigos até aqui, então, parabéns! Você concluiu a criação da sua aplicação Single Page Application usando oASP .NET, o Angular e o Entity Framework.

Pegue o projeto aqui: FilmotecaFinal.zip