Modelo Breeze/Angular

por Mads Kristensen

The Breeze/Angular MVC Template foi escrito por Ward Bell

Baixar o modelo Breeze/Angular MVC

AngularJS é uma biblioteca de código aberto 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 código aberto para modelagem de dados e gerenciamento de dados, e você tem os ingredientes essenciais para um ótimo aplicativo cliente HTML/JavaScript.

O modelo breeze/Angular SPA é uma variação do modelo KnockoutJS SPA incluído na Atualização do ASP.NET and Web Tools 2012.2. Se você tiver o Visual Studio, terá um SPA de exemplo em execução em menos de 60 segundos.

Externamente, o aplicativo é muito semelhante ao modelo do KnockoutJS SPA. Mas é bem diferente nos bastidores. 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 em execução de eventos durante a sessão do usuário atual, incluindo:

• Paginação. Observe a criação do controlador Todo.
• Consultas remotas e consultas de cache local.
• 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 Angular "diretivas".
• 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 #. Em 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 executar 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, na qual 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 um usuário... mas com os olhos de um desenvolvedor. Use as ferramentas de desenvolvedor em seu navegador para capturar o tráfego de rede. (Na 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 Pendentes". Uma nova lista aparece à esquerda da lista anterior.
• Reproduza com o título TodoList, disparando suas validações necessárias e de comprimento.
• Clique na caixa de texto título para limpar a mensagem de erro.
• Clique no "x" no círculo no canto superior direito para excluir TodoList e todos.
• Clique no link "Sobre" no canto superior direito para ver um log dessas atividades.

A lógica de validação é executada do 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 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 SaveChanges API Web. Isso é diferente do modelo de SPA 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.

Espiar dentro

Esse aplicativo tem um lado do cliente e um lado do servidor. A pilha do lado do cliente consiste em um pouco de 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 dos modos de exibição do código de apresentação de suporte nos controladores. A Angular sistema de associação de dados coordena exibições e controladores para que cada um possa fazer seu trabalho sem conhecimento íntimo do outro.

O controlador solicita que o contexto de dados adquira e salve as entidades do modelo. O contexto de dados delega a maior parte do trabalho ao 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 do KnockoutJS SPA. 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 ampla discussão sobre as pilhas do cliente e do servidor no site do Breeze.

Você pode tentar jogar com a consulta do lado do cliente breeze; adicione alguns filtros e classificações. Você pode adicionar mais propriedades de modelo e mais entidades para ter uma melhor noção do desenvolvimento de SPA de ponta a ponta. Quando estiver confiante no design, você poderá retirar os recursos de Tarefas Pendentes e substituí-los por seus próprios.

Boa codificação!