AngularJS AJAX – Faça uma chamada AJAX usando $ http

Angular JS AJAX

AJAX é a forma abreviada de AsyncJavaScript e XML completos. AJAX foi projetado principalmente para atualizar partes de uma página web, sem recarregar a página inteira.

A razão para projetar esta tecnologia foi 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 ocorriam sempre que um usuário solicitava determinadas informações.

AJAX permitiu que páginas da web fossem atualizadassynccronamente, trocando pequenas quantidades de dados com o servidor nos bastidores. Isto significava que era possível atualizar partes de uma página web, sem recarregar a página inteira.

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

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

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

  • $recurso
  • $http

Veremos a propriedade “$resource” em Angular, que é usada para interagir com servidores de 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 termos de funcionalidade e não com o que exatamente o servidor faz em detalhes em relação a essa funcionalidade.

Por exemplo, se o servidor hospedasse um aplicativo que mantém as informações dos funcionários de uma determinada empresa, o servidor poderia expor a funcionalidade a clientes como GetEmployeeDetails, SetEmployeeDetails, etc.

Então, em 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 otails do “GetEmployeeDetails” e o “SetEmployeeDetails funções” e como ele é implementado.

A explicação acima explica o que é conhecido como baseado em REST archiarquitetura.

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

Então, vamos supor que temos uma aplicação web que mantém uma lista de Eventos .

Se quiséssemos chegar à lista de todos os eventos,

  • O aplicativo da web pode expor uma URL como http://example/events e
  • Podemos usar o verbo “GET” para obter a lista completa de eventos se a aplicação for seguidawing baseado em REST archiarquitetura.

Por exemplo, se houve um evento com ID 1, podemos obter o details deste evento através do URL. http://example/events/1

Qual é o objeto $ Resource

O objeto $resource em Angular ajuda a trabalhar com servidores que atendem aplicativos baseados em REST archiarquitetura.

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]) – Isso pode ser usado para fazer a chamada GET padrão.

2. save([params], postData, [success], [error]) – Isso pode ser usado para fazer a chamada POST padrão.

3. query([params], [success], [error]) – Pode ser usado para fazer a chamada GET padrão, mas um array é retornado como parte da resposta.

4. remove([params], postData, [success], [error]) – 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 Topic: 'Angular' como um 'param' na função get como
  • pegar('http://example/events' ,'{ Tópico: 'Angular' }')
  • A URL http://example/events?Topic=Angular é invocado como parte da função get.

Como usar a propriedade $resource do AngularJS

Para usar a propriedade $resource, o seguintewing etapas precisam ser seguidas:

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

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

Na sequênciawing Por exemplo, estamos chamando o módulo “ngResource” de nosso aplicativo 'DemoApp'.

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

Passo 3) Chamando a função $resource() com seu endpoint REST, conforme mostrado a seguirwing exemplo.

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

O seguintewing exemplo chama o URL do endpoint: http://example/events/1

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

No exemplo acima o seguintewing as coisas estão sendo feitas

  1. Ao definir a aplicação Angular, um serviço está sendo criado usando a instrução 'DemoApp.services' onde DemoApp é o nome dado à nossa aplicação Angular.
  2. O método .factory é usado para criar o details deste novo serviço.
  3. 'Entrada' é 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 irá chamar a API $resource
  5. $resource('/example/Event/:1).A função $resource é um serviço usado para chamar um endpoint REST. O endpoint REST normalmente é uma 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 “exemplo” do site principal. Este aplicativo de evento é desenvolvido usando um ambiente baseado em REST archiarquitetura.
  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 invocadas.

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 trecho de código abaixo, estamos usando a função get() como exemplo

Vejamos o código que pode fazer uso da 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 trecho acima emite uma solicitação GET para / exemplo /Event/:1.
  • O parâmetro:1 no URL é substituído por $scope.id.
  • A função get() retornará um objeto vazio que será preenchido automaticamente quando os dados reais vierem do servidor.
  • O segundo argumento para get() é um retorno de chamada que é executado quando os dados chegam do servidor. A possível saída de todo o código seria um objeto JSON que retornaria a lista de eventos expostos no 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 nos servidores são os dados no formato JSON.

Vamos supor que temos um PHP página ( http://example/angular/getTopics.PHP ) que retorna o seguintewing 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

<script>
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;});
});
</script>

No exemplo acima

  1. Estamos adicionando o serviço $http à nossa função Controller 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 da URL http://example /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 posteriormente os armazenaremos 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.

Como buscar dados do servidor SQL e MySQL usando AngularJS

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

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

Following é um processo passo a passo sobre como buscar dados do servidor SQL e MySQL usando AngularJS.

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

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

Passo 2) Obtenha os dados JSON usando o serviço $http
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

<script>
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;});
});
</script>

Passo 3) Renderize os dados na sua visualização usando o diretiva ng-repeat

Abaixo, 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, exibimos a chave que é “Nome” e o valor é “Descrição”.

<div ng-app="myApp" ng-controller="AngularCtrl"> 
<table>
  <tr ng-repeat="x in topics">
    <td>{{ x.Name }}</td>
    <td>{{ x.Description }}</td>
  </tr>
</table>
</div>

Resumo

  • A forma completa do AJAX é Asynchonroso JavaScript e XML.
  • Nós demos uma olhada no que REPOUSANTE architecture é, que nada mais é do que uma funcionalidade exposta por aplicações web baseadas nos verbos HTTP normais de GET, POST, PUT e DELETE.
  • O objeto $resource é usado com Angular para interagir com os aplicativos da web RESTFUL em alto nível, o que significa que invocamos apenas a funcionalidade exposta pelo aplicativo da web, mas não nos preocupamos em como a funcionalidade é implementada.
  • Também analisamos o serviço $http que pode ser usado para obter dados de uma aplicação web. Isso é possível porque o serviço $http pode funcionar com aplicações 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 então ser renderizados em uma tabela usando a diretiva ng-repeat.