Chamada AngularJS AJAX usando $ resource, $ http [Exemplo]

AJAX é a forma abreviada de JavaScript assíncrono e XML. AJAX foi projetado principalmente para atualizar partes de uma página da web, sem recarregar a página inteira.

A razão para projetar esta tecnologia foi para reduzir o número de viagens de ida e volta feitas entre o cliente e o servidor e o número de atualizações de páginas inteiras que costumavam ocorrer sempre que um usuário solicitava determinadas informações.

O AJAX permitiu que as páginas da web fossem atualizadas de forma assíncrona, trocando pequenas quantidades de dados com o servidor nos bastidores. Isso significava que era possível atualizar partes de uma página da web, sem recarregar a página inteira.

Muitos aplicativos da web modernos realmente seguem essa técnica para atualizar a página ou obter dados do servidor.

Neste tutorial, você aprenderá-

Interações de alto nível com servidores usando $ resource

O Angular fornece duas APIs diferentes para lidar com solicitações Ajax. Eles são

  • $ resource
  • $ http

Veremos a propriedade '$ resource' no Angular, que é usada para interagir com servidores em alto nível.

Quando falamos em interagir em um nível superior, significa que só nos preocuparemos com o que o servidor tem a oferecer em relação à funcionalidade e não com o que exatamente o servidor faz em detalhes com relação a essa funcionalidade.

Por exemplo, se o servidor estava hospedando um aplicativo que mantém as informações do funcionário de uma determinada empresa, o servidor pode expor a funcionalidade para clientes como GetEmployeeDetails, SetEmployeeDetails, etc.

Portanto, em um alto nível, sabemos o que essas duas funções podem fazer e podemos invocá-las usando a propriedade $ resource. Mas então não sabemos exatamente os detalhes das funções 'GetEmployeeDetails' e 'SetEmployeeDetails', e como elas são implementadas.

A explicação acima explica o que é conhecido como arquitetura baseada em REST.

  • REST é conhecido como Representational State Transfer, que é uma arquitetura seguida em muitos sistemas modernos baseados na web.
  • Isso significa que você pode usar os verbos HTTP normais de GET, POST, PUT e DELETE para trabalhar com um aplicativo baseado na web.

Então, vamos supor que temos um aplicativo da web que mantém uma lista de eventos.

Se quiséssemos obter a lista de todos os eventos,

  • O aplicativo da web pode expor uma URL como http: // exemplo / eventos e
  • Podemos usar o verbo 'GET' para obter a lista completa de eventos se o aplicativo estiver seguindo uma arquitetura baseada em REST.

Por exemplo, se houve um evento com ID 1, podemos obter os detalhes desse evento por meio da URL. http: // exemplo / eventos / 1

Qual é o objeto $ resource

O objeto $ resource no Angular ajuda a trabalhar com servidores que atendem aplicativos em uma arquitetura baseada em REST.

A sintaxe básica da instrução @resource juntamente com as várias funções são fornecidas abaixo

Sintaxe da instrução @resource

var resource Object = $resource(url); 

Depois de ter o resourceObject em mãos, você pode usar as funções abaixo para fazer as chamadas REST necessárias.

1. get ([params], [success], [error]) - Pode ser usado para fazer a chamada GET padrão.

2. salvar ([params], postData, [sucesso], [erro]) - Isso pode ser usado para fazer a chamada POST padrão.

3. consulta ([params], [sucesso], [erro]) - Isso pode ser usado para fazer a chamada GET padrão, mas uma matriz é retornada como parte da resposta.

4. remove ([params], postData, [sucesso], [erro]) - Isso pode ser usado para fazer a chamada DELETE padrão.

Em todas as funções fornecidas abaixo, o parâmetro 'params' pode ser usado para fornecer os parâmetros necessários, que precisam ser passados ​​na URL.

Por exemplo,

  • Suponha que você passe um valor de Tópico: 'Angular' como um 'param' na função get como
  • pegue(' http: // exemplo / eventos ',' {Tópico: 'Angular'} ')
  • O URL http: // exemplo / eventos? Tópico = Angular é chamado como parte da função get.

Como usar a propriedade $ resource

Para usar a propriedade $ resource, as seguintes etapas devem ser seguidas:

Passo 1) O arquivo 'angular-resource.js' precisa ser baixado do site Angular.JS e deve ser colocado no aplicativo.

Passo 2) O módulo do aplicativo deve declarar uma dependência do módulo 'ngResource' para usar o $ resource.

No exemplo a seguir, estamos chamando o módulo 'ngResource' de nosso aplicativo 'DemoApp'.

angular.module(DemoApp,['ngResource']); //DemoApp is our main module

Etapa 3) Chamando a função $ resource () com seu ponto de extremidade REST, conforme mostrado no exemplo a seguir.

Se você fizer isso, o objeto $ resource terá a capacidade de invocar a funcionalidade necessária exposta pelos terminais REST.

O exemplo a seguir chama o URL do endpoint: http: // exemplo / eventos / 1

angular.module('DemoApp.services').factory('Entry', function($resource) { return $resource('/example/Event/:1); // Note the full endpoint address });

No exemplo acima, as seguintes coisas estão sendo feitas

  1. Ao definir o aplicativo Angular, um serviço está sendo criado usando a instrução 'DemoApp.services' onde DemoApp é o nome dado ao nosso aplicativo Angular.

  2. O método .factory é usado para criar os detalhes deste novo serviço.

  3. 'Entry' é o nome que damos ao nosso serviço, que pode ser qualquer nome que você queira fornecer.

  4. Neste serviço, estamos criando uma função que vai chamar a API $ resource

  5. $ resource ('/ exemplo / Evento /: 1).

    A função $ resource é um serviço usado para chamar um terminal REST. O ponto de extremidade REST normalmente é um URL. Na função acima, estamos usando a URL (/ example / Event /: 1) como nosso endpoint REST. Nosso endpoint REST (/ example / Event /: 1) denota que há um aplicativo Event localizado em nosso site principal 'example'. Este aplicativo de evento é desenvolvido usando uma arquitetura baseada em REST.

  6. O resultado da chamada de função é um objeto de classe de recurso. O objeto de recurso agora terá as funções (get (), query (), save (), remove (), delete ()) que podem ser chamadas.

Passo 4) Agora podemos usar os métodos que foram retornados na etapa acima (que são get (), query (), save (), remove (), delete ()) em nosso controlador.

No snippet de código a seguir, estamos usando a função get () como exemplo

Vejamos o código que pode usar a função get ().

angular.module('DemoApp.controllers',[]); angular.module('DemoApp.controllers').controller('DemoController',function($scope, MyFunction) { var obj = MyFunction.get({ 1: $scope.id }, function() { console.log(obj); }); 

Na etapa acima,

  • A função get () no snippet acima emite uma solicitação GET para / example / Event /: 1.
  • O parâmetro: 1 no URL é substituído por $ scope.id.
  • A função get () retornará um objeto vazio que é populado automaticamente quando os dados reais vêm do servidor.
  • O segundo argumento para get () é um callback que é executado quando os dados chegam do servidor. A saída possível de todo o código seria um objeto JSON que retornaria a lista de eventos expostos do site 'exemplo'.

    Um exemplo do que pode ser retornado é mostrado abaixo

    { { 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'}, { 'EventName' : 'Node , 'EventDescription' : 'Node Basics'}, { 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'} }

Interações de servidor de baixo nível com $ http

O $ http é outro serviço Angular JS usado para ler dados de servidores remotos. A forma mais popular de dados lidos de servidores são os dados no formato JSON.

Vamos supor que temos uma página PHP ( http: //example/angular/getTopics.PHP ) que retorna os seguintes dados JSON

'Topics': [ { 'Name' : 'Controllers', 'Description' : 'Controllers in action' }, { 'Name' : 'Models', 'Description' : 'Binding data using Models' }, { 'Name' : 'Directives', 'Description' : 'Using directives in Angular' } ]

Vejamos o código AngularJS usando $ http, que pode ser usado para obter os dados acima do servidor

 var app = angular.module('myApp', []); app.controller('AngularCtrl', function($scope, $http) { $http.get('  http://example/angular/getTopics.PHP  ') .then(function(response) { $scope.names = response.data.records;}); }); 

No exemplo acima

  1. Estamos adicionando o serviço $ http à nossa função Controlador para que possamos usar a função 'get' do serviço $ http.
  2. Agora estamos usando a função get do serviço HTTP para obter os objetos JSON do URL http: // exemplo /angular/getTopics.PHP
  3. Com base no objeto 'resposta', estamos criando uma função de retorno de chamada que retornará os registros de dados e, subsequentemente, os armazenamos no objeto $ scope.
  4. Podemos então usar a variável $ scope.names do controlador e usá-la em nossa visualização para exibir os objetos JSON de acordo.

Buscando dados de um servidor que executa SQL e MySQL

O Angular também pode ser usado para buscar dados de um servidor que executa MySQL ou SQL.

A ideia é que se você tiver uma página PHP conectando-se a um banco de dados MySQL ou uma página Asp.Net conectando-se a um banco de dados do servidor MS SQL, então você precisa garantir que tanto a página PHP quanto a página ASP.Net renderizam os dados no formato JSON.

Vamos supor que temos um site PHP ( http: // exemplo /angular/getTopics.PHP ) servindo dados de um banco de dados MySQL ou SQL.

Passo 1) A primeira etapa é garantir que a página PHP obtenha os dados de um banco de dados MySQL e forneça os dados no formato JSON.

Passo 2) Escreva o código semelhante mostrado acima para usar o serviço $ http para obter os dados JSON.

Vejamos o código AngularJS usando $ http, que pode ser usado para obter os dados acima do servidor

 var app = angular.module('myApp', []); app.controller('AngularCtrl', function($scope, $http) { $http.get('http://example /angular/getTopics.PHP') .then(function(response) { $scope.topics = response.data.records;}); }); 

Etapa 3) Renderize os dados em sua visualização usando a diretiva ng-repeat.

A seguir, estamos usando a diretiva ng-repeat para percorrer cada um dos pares de valores-chave nos objetos JSON retornados pelo método 'get' do serviço $ http.

Para cada objeto JSON, estamos exibindo a chave que é 'Nome' e o valor é 'Descrição'.

 
{{ x.Name }} {{ x.Description }}

Resumo:

  • Vimos o que é uma arquitetura RESTFUL, que nada mais é do que uma funcionalidade exposta por aplicativos da web com base nos verbos HTTP normais de GET, POST, PUT e DELETE.
  • O objeto $ resource é usado com o Angular para interagir com os aplicativos da web RESTFUL em um alto nível, o que significa que apenas invocamos a funcionalidade exposta pelo aplicativo da web, mas não nos preocupamos em como a funcionalidade é implementada.
  • Também examinamos o serviço $ http, que pode ser usado para obter dados de um aplicativo da web. Isso é possível porque o serviço $ http pode funcionar com aplicativos da web em um nível mais detalhado.
  • Devido ao poder do serviço $ http, ele pode ser usado para obter dados de um MySQL ou MS SQL Server por meio de um aplicativo PHP. Os dados podem ser renderizados em uma tabela usando a diretiva ng-repeat.