Modelo Breeze/Angular

por Mads Kristensen

The Breeze/Angular MVC Template foi escrito por Ward Bell

Baixar o modelo de MVC do Breeze/Angular

AngularJS é uma biblioteca de software livre do Google para a criação de SPAs (Aplicativos de Página Única). Ele oferece associação de dados, injeção de dependência e gerenciamento de tela. Combine-o com o BreezeJS, outra biblioteca de software livre para modelagem de dados e gerenciamento de dados, e você tem os ingredientes essenciais para um ótimo aplicativo cliente HTML/JavaScript.

O modelo de SPA Breeze/Angular é uma variação no modelo de SPA do KnockoutJS incluído na atualização do ASP.NET e das Ferramentas Web 2012.2. Se você tiver o Visual Studio, terá um exemplo de SPA em execução em menos de 60 segundos.

Externamente, o aplicativo é muito semelhante ao modelo de SPA do KnockoutJS. Mas é bem diferente sob o capô. O modelo KnockoutJS usa Knockout para associação de dados e AJAX bruto para acesso a dados. O modelo Breeze/Angular usa Angular para associação de dados e Breeze para acesso a dados. Essas bibliotecas habilitam recursos adicionais, incluindo navegação de página e histórico.

A página Sobre do aplicativo exibe um log contínuo de eventos durante a sessão atual do usuário, incluindo:

• Paginação. Observe a criação do controlador Todo.
• Consultas remotas e consultas de cache locais.
• Salvando entidades novas e modificadas.
• Alterações validadas no cliente, para que o usuário possa corrigir erros antes de confirmar alterações no banco de dados.

Há mais para explorar neste modelo, incluindo:

• Carregamento dinâmico de modelos de exibição HTML.
• Associação de dados personalizada por meio de "diretivas" angulares.
• Modularidade e injeção de dependência.
• Filtros de consulta, classificações, paginação, projeções e inclusão de entidades relacionadas.
• Compartilhando dados em várias telas.
• Salvando várias alterações como uma única transação.
• Regras de validação propagadas automaticamente do servidor para o cliente JavaScript.

Vamos começar.

Criar um projeto de modelo Breeze/Angular

Baixe e instale o modelo clicando no botão Baixar acima. O modelo é empacotado como um arquivo VSIX (Extensão do Visual Studio). Talvez seja necessário reiniciar o Visual Studio.

No painel Modelos, selecione Modelos Instalados e expanda o nó Visual C#. No Visual C#, selecione Web. Na lista de modelos de projeto, selecione ASP.NET Aplicativo Web MVC 4. Nomeie o projeto e clique em OK.

No assistente Novo Projeto , selecione Breeze Angular SPA.

Pressione Ctrl-F5 para compilar e executar o aplicativo sem depuração ou pressione F5 para ser executado com depuração.

Quando o aplicativo é executado pela primeira vez, ele exibe uma tela de logon. Clique no link "Inscrever-se" e uma nova página desliza para exibição, em que você pode inserir um nome de usuário e uma senha. (As páginas de logon e registro são criadas usando ASP.NET MVC.) Quando você envia o formulário de registro, o servidor gera um TodoList com dois itens para sua conta. Em seguida, ele apresenta-os para você em uma nota amarela.

Agora você está na terra de SPA. Tudo o que você vê e experimenta ao manipular Todos é renderizado e gerenciado no cliente com a ajuda de Knockout e Breeze. Explore o aplicativo como usuário... mas com o olhar de um desenvolvedor. Use as ferramentas de desenvolvedor em seu navegador para capturar o tráfego de rede. (No Internet Explorer: pressione F12, selecione a guia Rede e clique em Iniciar captura.) Agora tente o seguinte:

• Adicione um novo item Todo.
• Clique no rótulo e edite o título do item Todo
• Marque uma caixa de seleção para marcar o item concluído. Observe que a caixa de texto está desabilitada, portanto, o título não é mais editável.
• Clique no 'x' à direita do rótulo. O item desaparece e é excluído do banco de dados.
• Escolha outro item e desmarque seu título. Você receberá um erro de validação de que o título é necessário. Após uma breve pausa, o título anterior é restaurado.
• Digite um título ridiculamente longo. Você receberá um erro de validação diferente de que o título é muito longo.
• Clique no botão "Adicionar Lista de Tarefas". Uma nova lista aparece à esquerda da lista anterior.
• Experimente com o título TodoList, ativando suas validações obrigatórias e de comprimento.
• Clique na caixa de texto de título para limpar a mensagem de erro.
• Clique no "x" no círculo no canto superior direito para excluir o TodoList e seus todos.
• Clique no link "Sobre" no canto superior direito para ver um log dessas atividades.

A lógica de validação é executada no lado do cliente pelo Breeze. Os atributos de validação nas classes de modelo de servidor são propagados para o cliente e executados automaticamente antes que o cliente entre em contato com o servidor.

Examine o tráfego de rede. Observe que não houve chamadas para o servidor quando o Breeze detectou um erro. Cada alteração válida resultou em uma solicitação POST para "/api/Todo/SaveChanges". O Breeze agrupa as alterações e as envia como uma única solicitação para o método do controlador de API Web SaveChanges . Isso é diferente do modelo de SPA do KnockoutJS, que faz solicitações PUT, POST e DELETE para cada item individualmente.

Além disso, observe que não há tráfego de rede quando você alterna entre as páginas TodoList e About. Isso ocorre porque a consulta foi restrita ao cache breeze local.

Dê uma olhada dentro

Esse aplicativo tem um lado do cliente e um lado do servidor. A pilha do lado do cliente consiste em um pequeno HTML e uma combinação de módulos JavaScript de aplicativo (na pasta "app") além de bibliotecas JavaScript de terceiros (na pasta "Scripts").

A arquitetura da interface do usuário separa os widgets HTML das visões do código de apresentação associado nos controladores. O sistema de associação de dados angular coordena exibições e controladores para que cada um possa fazer seu trabalho sem conhecimento íntimo do outro.

O controlador solicita ao contexto de dados que adquira e salve as entidades de modelo. O contexto de dados delega a maior parte do trabalho para o Breeze, que constrói objetos de modelo de auto-acompanhamento a partir dos resultados da consulta JSON.

A pilha do lado do servidor consiste em alguns códigos de desenvolvedor e três bibliotecas principais do .NET: API Web, Entity Framework e Breeze.NET.

A arquitetura básica é a mesma que o modelo de SPA do KnockoutJS. No entanto, a implementação é muito mais simples: os DTOs foram excluídos e a maioria dos detalhes do Entity Framework foram delegados para Breeze.NET.

Próximas etapas

Sugerimos que você explore o código, guiado pela discussão detalhada das pilhas do cliente e do servidor no site do Breeze.

Você pode tentar experimentar com a consulta cliente do Breeze; aplique alguns filtros e ordenações. Você pode adicionar mais propriedades de modelo e mais entidades para compreender melhor o desenvolvimento completo de Aplicações de Página Única (SPA). Quando estiver confiante no design, você poderá retirar as funcionalidades Todo e substituí-las pelas suas próprias.

Divirta-se programando!