ASP .NET - Single Page Application(SPA) usando AngularJS com Web API - 7


 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.

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

A seguir a relação completa dos artigos:

  1. ASP .NET - Single Page Application(SPA) usando AngularJS com Web API - parte 1
  2. ASP .NET - Single Page Application(SPA) usando AngularJS com Web API - parte 2
  3. ASP .NET - Single Page Application(SPA) usando AngularJS com Web API - parte 3
  4. ASP .NET - Single Page Application(SPA) usando AngularJS com Web API - parte 4
  5. ASP .NET - Single Page Application(SPA) usando AngularJS com Web API - parte 5
  6. ASP .NET - Single Page Application(SPA) usando AngularJS com Web API - parte 6
  7. ASP .NET - Single Page Application(SPA) usando AngularJS com Web API - parte 7

Recursos usados:

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

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 e 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 esta 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 esta aninhado no interior de 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 esta 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ê conclui a criação da sua aplicação Single Page Application usando o ASP .NET , o Angular e o Entity Framework.

Pegue o projeto aqui:  FilmotecaFinal.zip (sem as referências)

Porque a palavra da cruz é loucura para os que perecem; mas para nós, que somos salvos, é o poder de Deus.
Porque está escrito: Destruirei a sabedoria dos sábios, E aniquilarei a inteligência dos inteligentes.

1 Coríntios 1:18,19

The Series is the title of data that we are displaying. In this tutorial we will display sales and expenses data from a database. Therefore our series collection will be Sales, Expenses.

We will delete Series1 becuase we will replace it with Expenses and Sales.

Right click the chart and click on properties. In the properties window, scroll down to Series and click on the small button next to Collection:

- See more at: http://www.visual-basic-tutorials.com/display-data-as-charts-and-graph-in-visual-basic.html#sthash.lBTOTLaR.dpuf
The Series is the title of data that we are displaying. In this tutorial we will display sales and expenses data from a database. Therefore our series collection will be Sales, Expenses.

We will delete Series1 becuase we will replace it with Expenses and Sales.

Right click the chart and click on properties. In the properties window, scroll down to Series and click on the small button next to Collection:

- See more at: http://www.visual-basic-tutorials.com/display-data-as-charts-and-graph-in-visual-basic.html#sthash.lBTOTLaR.dpuf
Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ?


  Gostou
?   Compartilhe no Facebook   Compartilhe no Twitter

 

Referências:


José Carlos Macoratti