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:
- 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;
- 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