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

Angular JS AJAX

AJAX é a abreviação de Asynchronous JavaScript 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 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.

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. 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 funcionalidades 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 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 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 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://example/events/1

Qual é o objeto $ Resource

O objeto $resource em 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]) – 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, nos

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, as seguintes 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.

No exemplo a seguir, estamos chamando o módulo “ngResource” de nosso aplicativo ‘DemoApp’.

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

Passo 3) Chamar a função $resource() com seu endpoint 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 endpoints REST.

O exemplo a seguir 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, as seguintes coisas estão sendo feitas

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.
O método .factory é usado para criar os detalhes deste novo serviço.
'Entrada' é o nome que damos ao nosso serviço, que pode ser qualquer nome que você queira fornecer.
Neste serviço, estamos criando uma função que irá chamar a API $resource
$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 Event é desenvolvido usando uma arquitetura baseada em REST.
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 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

<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

Estamos adicionando o serviço $http à nossa função Controller para que possamos usar a função “get” do serviço $http.
Agora estamos usando a função get do serviço HTTP para obter os objetos JSON da URL http://example /angular/getTopics.PHP
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.
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 SQL e MySQL Servidor 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 MySQL banco de dados ou 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.

A seguir está o processo passo a passo sobre como obter dados do SQL e MySQL Servidor usando AngularJS.

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

Passo 1) Pegue dados de um MySQL banco de dados
O primeiro passo é garantir que a página PHP receba os dados de um MySQL banco de dados e exibe os dados 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 é “Descriptíon".

<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 é o Assíncrono JavaScript e XML.
Nós demos uma olhada no que REPOUSANTE arquitetura é, que nada mais é do que uma funcionalidade exposta por aplicativos da web baseados 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.

Você pode gostar: