ASP .NET MVC  - Usando o AngularJS

 Neste artigo eu vou mostrar como podemos usar os recursos do AngularJS em uma aplicação ASP .NET MVC.

Se você não conhece o AngularJS, sugiro que leia o meu artigo : .NET - Apresentando o AngularJS - Macoratti.net

De maneira bem sucinta, o Angular JS é um framework de aplicações web de código aberto, mantido pelo Google e a comunidade, que auxilia na criação de aplicativos de uma única página(Single Page Application - SPA). Ele suporta o estilo MVC de design de aplicativos e seu objetivo principal é o desenvolvimento de aplicações SPA.

O AngularJS possui muitos recursos dentre eles o suporte o two-way binding, que significa que o seu modelo de dados e os dados do controle vão estar sincronizados.

Dessa forma a biblioteca AngularJS lê o HTML que contém tags especiais e então executa a diretiva à qual esta tag pertence, e faz a ligação entre a apresentação e seu modelo, representado por variáveis JavaScript comuns.

O valor dessas variáveis JavaScript podem ser definidas manualmente, ou via um recurso JSON estático ou dinâmico.

O AngularJS é construído sob a ideologia de que programação declarativa deve ser usada para construção de Interfaces de Usuário e componentes de software, enquanto que a programação imperativa é excelente para escrever as regras de negócio.

Recursos usados:

Criando o projeto no Visual Studio 2013 Express for web

Abra o VS 2013 Express for web e clique em New Project;

Selecione a linguagem Visual Basic ou Visual C# e o template ASP .NET Web Application;

Informe o nome AspNet_ExibindoDados_AngularJS ou outro de sua preferência e clique no botão OK;

A  seguir selecione o template MVC e clique no botão OK:

Vamos agora incluir uma referência ao AngularJS em nosso projeto usando o Nuget.

Para isso clique no menu TOOLS -> Nuget Package Manager -> Manage Nuget Package for Solution...

Informe o nome AngularJS na caixa de busca, e, após ser encontrado selecione e clique no botão Install para o pacote AngularJS;

Agora abra na janela Solution Explorer abra a pasta App_Start e a seguir o arquivo BundleConfig.cs e inclua as linhas de código abaixo neste arquivo:

...
bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                        "~/Scripts/angular.js",
                        "~/Scripts/angular-route.js"));
...

Após isso abra o arquivo Layout.cshtml na pasta Views/Shared e inclua as linhas de código em azul para dar suporte ao AngularJS:

Observe que incluímos a tag ng-app="MacApp" na tag Body e que fizemos a referência ao pacote do angular : @Scripts.Render("~/bundles/angular")

Definimos também no script o arquivo MacApp.js que iremos criar a seguir.

Clique com botão direito sobre a pasta Scripts e selecione Add -> New Item;

Selecione o template JavaScript File e informe o nome MacApp.js e clique no botão Add;

Defina o seguinte código no arquivo MacApp.js:

(function () {
    //Cria um Module
    // será usado ['ng-Route'] quando implementarmos o roteamento
    var app = angular.module('MacApp', ['ngRoute']); 
    //Cria um Controller
    // aqui $scope é usado para compartilhar dados entre a view e o controller
    app.controller('HomeController', function ($scope) {
        $scope.Mensagem = "Olá.  Esse é nosso primeiro contato com o AgularJS no ASP .NEt MVC.";
    });
})();

Neste código eu criei um módulo angular e um controlador com objeto $scope.

Vejamos o significado das tags do AngularJS usadas:

angular.module: Um módulo Angular é simplesmente uma coleção de controladores, serviços, filtros, diretivas, etc., que são inicializados quando o aplicativo é inicializado. Ele é parecido com a função Main para outras linguagens.

angular.Controller: Contém o login de negócio por trás do aplicativo como MVC controlador. Os Controladores são o ponto de entrada em nossa lógica de negócios front-end, que contêm todos os métodos e variáveis que nossa view usam. Os Controladores também permitem inicializar o escopo, que vai abrigar tanto os dados e as funções que nós vamos desejar executar no modo de exibição.

$scope: Não nada mais que um objeto que permite vincular a View com o Controller. O scope utiliza a ligação de dados de duas vias do Angular para vincular os dados do modelo e de view. Quando o AngularJS inicializar este controlador, ele automaticamente cria e injeta o objeto $scope para esta função usando a injeção de dependência.

Agora, como já temos um controlador chamado HomeController criado na pasta Controllers basta ajustar a view Index na pasta Views/Home com o código abaixo:

@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<div ng-controller="HomeController">
    {{Mensagem}}
</div>
View Index.cshtml

A diretiva ng-controller define qual controlador será usado na nossa view. Esta diretiva anexa a classe do controlador com a view. Podemos anexar múltiplos controladores para uma única view.

Aqui podemos ver que foi especificado a diretiva ng-controller="HomeController" e isso especifica qual é o escopo do objeto $scope da aplicação AngularJS.

Executando o projeto iremos obter o seguinte resultado:

Embora seja bem simples essa aplicação foi o nosso primeiro contato com os recursos do AngularJS em uma aplicação ASP .NET MVC.

Na continuação irei mostrar como podemos exibir dados obtidos de um banco de dados relacional em uma aplicação MVC.

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

Disse-lhes, pois, Jesus: Quando levantardes o Filho do homem, então conhecereis que EU SOU, e que nada faço por mim mesmo; mas isto falo como meu Pai me ensinou.
E aquele que me enviou está comigo. O Pai não me tem deixado só, porque eu faço sempre o que lhe agrada.
João 8:28-29

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 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti