Como usar o AngularJS no ASP.NET MVC e no Entity Framework

Como usar o AngularJS no ASP.NET MVC e no Entity Framework

Hoje em dia, parece que todo mundo está falando sobre AngularJS e ASP.NET MVC. Portanto, neste post, aprenderemos como combinar o melhor dos dois mundos e usar a bondade do AngularJS em ASP.NET MVC demonstrando como usar o AngularJS em um aplicativo ASP.NET MVC.

9min read

Hoje em dia, parece que todo mundo está falando sobre AngularJS e ASP.NET MVC. Portanto, neste post, aprenderemos como combinar o melhor dos dois mundos e usar a bondade do AngularJS em ASP.NET MVC demonstrando como usar o AngularJS em um aplicativo ASP.NET MVC.

Antes de aprender a usar o AngularJS no ASP.NET MVC, confira Infragistics biblioteca 'jQuery, Ignite UI para JavaScript, que ajuda você a escrever e executar aplicativos da Web mais rapidamente. Você pode usar a biblioteca Ignite UI for JavaScript para ajudar a resolver rapidamente requisitos complexos de LOB em HTML5, jQuery, Angular, React ou ASP.NET MVC. Baixe uma avaliação gratuita do Ignite UI hoje mesmo.

Para começar, vamos criar ASP.NET MVC aplicativo e clicar com o botão direito do mouse no projeto MVC. No menu de contexto, clique em Gerenciar Pacote Nuget. Procure o pacote AngularJS e instale-o no projeto.

let’s create ASP.NET MVC application

Depois de adicionar com sucesso a biblioteca AnngularJS, você pode encontrar esses arquivos dentro das pastas Scripts.

Referência: biblioteca AngularJS

Você tem duas opções para adicionar uma referência de biblioteca AngularJS no projeto: minificação e agrupamento MVC ou adicionando AngularJS na seção Script de uma exibição individual. Se você usar o agrupamento, o AngularJS estará disponível para todo o projeto. No entanto, você também tem a opção de usar o AngularJS em uma exibição específica.

Digamos que você queira usar o AngularJS em uma exibição específica (Index.cshtml) do controlador Home. Primeiro, você precisa consultar a biblioteca AngularJS dentro da seção de scripts, conforme mostrado abaixo:

@section scripts{
    <script src="~/Scripts/angular.js"></script>
}

Em seguida, aplique a diretiva ng-app e quaisquer outras diretivas necessárias no elemento HTML, conforme mostrado abaixo:

<div ng-app="" class="row">
     <input type="text" ng-model="name" />
     {{name}}
</div>

Ao executar o aplicativo, você descobrirá que o AngularJS está instalado e em execução na visualização Índice. Nessa abordagem, você não poderá usar o AngularJS nas outras exibições porque a biblioteca AngularJS é referenciada apenas na exibição Índice.

Você pode ter um requisito para usar o AngularJS em todo o aplicativo MVC. Nesse caso, é melhor usar o agrupamento e a minificação do MVC e de todas as bibliotecas do AngularJS no nível do layout. Para fazer isso, abra BundleConfig.cs na pasta App_Start e adicione um pacote para a biblioteca AngularJS, conforme mostrado abaixo:

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular.js"));

Depois de adicionar o pacote no arquivo BundleConfig, em seguida, você precisa adicionar o pacote AngularJS no _Layout.cshtml, conforme listado abaixo:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/angular")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</head>

Depois de criar um pacote AngularJS e consultá-lo em _Layout.cshtml, você poderá usar o AngularJS em todo o aplicativo.

Dados do banco de dados e no AngularJS

Até agora, vimos como configurar o AngularJS em um nível de exibição específico e em todo o nível do aplicativo. Agora vamos criar um aplicativo MVC de ponta a ponta no qual faremos as seguintes tarefas:

  1. Buscar dados do banco de dados usando a abordagem EF database first
  2. Retornar JSON do controlador MVC
  3. Crie um serviço AngularJS para buscar dados usando o $http
  4. Create an AngularJS controller
  5. Criar uma visualização AngularJS na visualização MVC para exibir dados na tabela

Conectar-se a um banco de dados usando a primeira abordagem do banco de dados ef

Para se conectar a um banco de dados com a abordagem EF database-first, clique com o botão direito do mouse no aplicativo MVC e selecione um novo item. Na guia de dados, você precisa selecionar a opção ADO.NET Modelo de Entidade, conforme mostrado na imagem abaixo:

você precisa selecionar a opção ADO.NET Modelo de Entidade

Na próxima tela, selecione a opção "EF Designer do banco de dados".

selecione o "EF Designer do banco de dados"

Na próxima tela, clique na opção Nova Conexão. Para criar uma nova conexão com o banco de dados:

  1. Provide the database server name
  2. Escolha o banco de dados no menu suspenso. Aqui estamos trabalhando com o banco de dados "Escola", então selecionamos isso no menu suspenso.
Escolha o banco de dados no menu suspenso.

Na próxima tela, deixe o nome padrão da cadeia de conexão e clique em avançar.

na próxima tela, deixe o nome padrão da cadeia de conexão

Na próxima tela, selecione as tabelas e outras entidades que deseja manter como parte do modelo. Para simplificar, estou usando apenas a tabela "Pessoa" no modelo.

Selecione as tabelas e outras entidades que você deseja manter como parte do modelo

A partir de agora, criamos a conexão com o banco de dados e um modelo foi adicionado ao projeto. Você deve ver que um arquivo edmx foi adicionado como parte do projeto.

Retornar json do controlador mvc

Para retornar os dados da pessoa como JSON, vamos adicionar uma ação no controlador com o tipo de retorno JsonResult. Lembre-se de que você pode escrever facilmente uma API Web para retornar dados JSON; no entanto, o objetivo deste post é mostrar como trabalhar com o AngularJS, então vou ficar com a opção mais simples, que é criar uma ação que retorne dados JSON:

public JsonResult GetPesrons() {
    SchoolEntities e = new SchoolEntities();
    var result = e.People.ToList();
    return Json(result, JsonRequestBehavior.AllowGet);
}

Criar um serviço AngularJS para buscar dados usando o $HTTP

Aqui, suponho que você já tenha algum conhecimento sobre esses termos do AngularJS, mas aqui está uma rápida revisão / introdução dos principais conceitos:

Controller

Um controlador é a função construtora JavaScript que contém dados e lógica de negócios. O controlador e a exibição conversam entre si usando o objeto $scope. Cada vez que um controlador é usado na exibição, uma instância é criada. Portanto, se o usarmos 10 vezes, 10 instâncias do construtor serão criadas.

Serviço

Um serviço é a função JavaScript pela qual uma instância é criada uma vez por ciclo de vida do aplicativo. Qualquer coisa compartilhada entre o controlador deve fazer parte do serviço. Um serviço pode ser criado de cinco maneiras diferentes. A maneira mais popular é usando o método de serviço ou o método de fábrica. O AngularJS também fornece muitos serviços integrados: por exemplo, o serviço $http pode ser usado para chamar um serviço baseado em HTTP de um aplicativo Angular, mas um serviço deve ser injetado antes de ser usado.

Modules

Módulos são as funções JavaScript que contêm outras funções, como um serviço ou um controlador. Deve haver pelo menos um módulo por Angular aplicativo.

Nota: Estas são as definições mais simples desses conceitos do AngularJS. Você pode encontrar informações mais detalhadas na web.

Agora vamos começar a criar o módulo! Primeiro, clique com o botão direito do mouse no projeto e adicione um arquivo JavaScript. Você pode chamá-lo do que quiser, mas neste exemplo, vamos chamá-lo de StudentClient.js.

No StudentClient.js criamos um módulo e um controlador simples. Posteriormente, modificaremos o controlador para buscar os dados da ação MVC.

var StudentApp = angular.module("StudentApp", []);

StudentApp.controller("StudentController", function ($scope) {
    $scope.message = "Infrgistics";
});

Para usar o módulo e o controlador na exibição primeiro, você precisa adicionar a referência ao StudentClient.js e, em seguida, definir o valor da diretiva ng-app como o nome do módulo StudentApp. Veja como fazer isso:

@section scripts{
     <script src="~/StudentClient.js"></script>
}
<div ng-app="StudentApp" class="row">
    <div ng-controller="StudentController">
        {{message}}
    </div>
</div>

Neste ponto, se você executar o aplicativo, encontrará Infragistics renderizados na exibição. Vamos começar criando o serviço. Criaremos o serviço personalizado usando o método de fábrica. No serviço, usar o $http serviço embutido chamará o método de ação do controlador.  Aqui estamos colocando o serviço no mesmo arquivo StudentService.js.

StudentApp.factory("StudentService", [
    "$http",
    function ($http) {
        var StudentService = {};

        StudentService.getStudents = function () {
            return $http.get("/Home/GetPersons");
        };

        return StudentService;
    },
]);

Depois que o serviço for criado, em seguida, você precisará criar o controlador. No controlador, usaremos o serviço personalizado e atribuiremos os dados retornados ao objeto $scope. Vamos ver como criar o controlador no código abaixo:

StudentApp.controller("StudentController", function ($scope, StudentService) {
    getStudents();
    function getStudents() {
        StudentService.getStudents()
            .success(function (studs) {
                $scope.students = studs;
                console.log($scope.students);
            })
            .error(function (error) {
                $scope.status =
                    "Unable to load customer data: " + error.message;
                console.log($scope.status);
            });
    }
});

Aqui, criamos o controlador, o serviço e o módulo. Juntando tudo, o arquivo StudentClient.js deve ficar assim:

var StudentApp = angular.module("StudentApp", []);
StudentApp.controller("StudentController", function ($scope, StudentService) {
    getStudents();
    function getStudents() {
        StudentService.getStudents()
            .success(function (studs) {
                $scope.students = studs;
                console.log($scope.students);
            })
            .error(function (error) {
                $scope.status =
                    "Unable to load customer data: " + error.message;
                console.log($scope.status);
            });
    }
});

StudentApp.factory("StudentService", [
    "$http",
    function ($http) {
        var StudentService = {};

        StudentService.getStudents = function () {
            return $http.get("/Home/GetPersons");
        };

        return StudentService;
    },
]);

Na exibição, podemos usar o controlador conforme mostrado abaixo, mas lembre-se de que estamos criando uma exibição AngularJS no Index.cshtml. A visualização pode ser criada conforme mostrado abaixo:

@section scripts{
    <script src="~/StudentClient.js"></script>
}

<div ng-app="StudentApp" class="container">
    <br/>
    <br/>
    <input type="text" placeholder="Search Student" ng-model="searchStudent" />
    <br />
    <div ng-controller="StudentController">
        <table class="table">
            <tr ng-repeat="r in students | filter : searchStudent">
                <td>{{r.PersonID}}</td>
                <td>{{r.FirstName}}</td>
                <td>{{r.LastName}}</td>
            </tr>
        </table>
    </div>
</div>

Na visualização, estamos usando as diretivas ng-app, ng-controller, ng-repeat e ng-model, juntamente com "filter" para filtrar a tabela na entrada inserida na caixa de texto. Essencialmente, essas são as etapas necessárias para trabalhar com o AngularJS em ASP.NET MVC aplicativo.

Conclusão

Nesta postagem, nos concentramos em algumas etapas simples, mas importantes, para trabalhar com o AngularJS e ASP.NET MVC juntos. Também abordamos as definições básicas de alguns dos principais componentes do AngularJS, a abordagem EF database-first e o MVC. Em outras postagens, entraremos em mais detalhes sobre esses tópicos, mas espero que esta postagem ajude você a começar a usar o AngularJS em ASP.NET MVC.

Além disso, não se esqueça de verificar Ignite UI para JavaScript, que você pode usar com HTML5, Angular, React e ASP.NET MVC para criar aplicativos avançados da Internet. Você pode baixar uma versão de avaliação de todos os nossos controles JavaScript gratuitamente.

Como
Solicite uma demonstração