Serviço em AngularJS e serviços que se comunicam com o servidor
O conceito de Serviço no AngularJS são funções para realizar determinadas tarefas, personalizar entidades, código fácil de manter e testar, os serviços desempenham um papel muito importante em aplicações escritas em AngularJS. , já existem serviços disponíveis que o Angular nos forneceu, mas nós pode estendê-lo completamente criando um novo serviço. Aqui está uma lista de alguns dos serviços embutidos no AngularJS:
$anchorScroll $animate $cacheFactory $compile $controller $document $exceptionHandler $filter $http $httpBackend $interpolate $interval $locale $location $log $parse $q $rootElement $rootScope $sce $sceDelegate $templateCache $templateRequest $timeout $window $eventMục lục
Apresente alguns serviços populares ou use
$scope e $rootscope
Veja mais no escopo do artigo em AngularJS
$janela
Semelhante ao objeto window em javascript puro.
$evento
Semelhante ao objeto de evento em javascript puro, usado para capturar eventos
$localização
Representa o URL do navegador atual semelhante ao objeto de localização em javascript puro
$http
Para usar este serviço $http, precisamos entender a arquitetura da API REST, você pode ver mais no artigo Comunicação de serviços e conceito de API REST para obter mais conhecimento antes de começar.
Documentos: https://docs.angularjs.org/api/ng/service/$http
$http em angularJS é um serviço (negócio) em angularJS para se comunicar com o servidor através de métodos .get(), .post() para obter dados ou enviar dados através de Ajax(), retornar dados de mensagem como JSON, este mecanismo é um mecanismo assíncrono , o javascript envia uma requisição para o lado do servidor, o código fonte continua rodando sem esperar resposta, quando o servidor envia os dados de volta para o navegador, ele pega os dados de retorno e continua. Executa o código que o programador definiu para funcionar com os dados retornados, como dados de análise, atualização de HTML, etc. Métodos básicos de API REST como GET,POST,PUT,DELETE são definidos disponíveis no serviço $http .
Sintaxe:
$http({ method: 'GET', url: '/endpoint', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer APIKEY' } // optional }) .then( function (success) { // do something when success }, function (error) { // do something when error } );Além disso, também temos atalhos para 2 métodos, tornando a sintaxe mais concisa, podemos escolher o método certo para aplicarmos.
app.run(function($http) { $http.defaults.headers.common['Authorization'] = 'Basic APIKEY'; }); // optinal config header $http.get('/someUrl', config).then(successCallback, errorCallback); $http.post('/someUrl', data, config).then(successCallback, errorCallback);O serviço $http é uma função, recebe 1 parâmetro, este parâmetro é o objeto de configuração (objeto) para a requisição, este objeto define o estado para o método HTTP, o caminho da url, configura o cabeçalho para o método se sim, ou pode configurar corpo se o método for POST…
O objeto quando uma solicitação http é enviada ou retornada tem a seguinte estrutura:
- data : são os dados retornados do lado do servidor de acordo com um padrão, podem ser string ou texto
- status : código de status HTTP
- headers : consulte as informações do cabeçalho
- config : referência a um objeto de configuração de solicitação http
Quando um método HTTP é chamado, o objeto retornado é chamado de objeto de promessa. Esse objeto contém o método padrão .then(), significando que após o sinal de retorno bem-sucedido. , faça algo e capture a situação ao lidar com sucesso ou erro, os parâmetros na função then() são 2 funções de retorno de chamada com o parâmetro sendo uma variável de sucesso, que armazenará o objeto quando a solicitação for bem-sucedida. A variável de erro armazena o objeto quando a solicitação encontrar um erro. O significado pode ser entendido que se for bem sucedido, fará algo com os dados retornados na variável de sucesso, semelhante à variável de erro quando um erro for encontrado.
Aqui está um exemplo que usa o método get() do serviço $http para se comunicar com o servidor
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exmample Http method</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="listUserController"> <table> <tr> <th>Username</th> <th>Name</th> <th>Email</th> </tr> <tr ng-repeat="user in users"> <td>{{user.fields.username}}</td> <td>{{user.fields.fullname}}</td> <td>{{user.fields.phonenumber}}</td> </tr> </table> </div> </div> </body> <script> var app = angular.module('myApp', []); // app.run(function($http) { // $http.defaults.headers.common['Authorization'] = 'Basic keyMhcG4dscdHl3Nf'; // }); app.controller('listUserController', function ($scope, $http) { $scope.listUser = []; $scope.getListUser = $http({ url: "https://urlservcer", method: 'GET', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer APIKEY' } }).then( function (data) { $scope.users = data.data.records; }, function (error) { console.log(error); alert("get list Failed"); }); // $scope.getListUser(); }); </script> </html>Considerando o exemplo acima, estou enviando um método get para o servidor através do serviço $http, os dados após serem recuperados são retornados através do método .then(), este método possui 2 parâmetros passados: outra função, o primeiro parâmetro é a função de retorno de chamada ao enviar a solicitação com sucesso (200), o segundo parâmetro é a função chamada quando a solicitação relata um erro.
Desenvolvimento adicional, podemos implementar recursos CRUD que exibem uma lista de usuários, adicionar novos usuários no lado do servidor combinando métodos get e post
$recursos
Documentos: https://docs.angularjs.org/api/ngResource/service/$resource
O serviço $resource em angularJS nos permite acessar aplicativos REST, semelhantes a $http, mas o padrão de dados precisa atender ao padrão JSON, cumprir a estrutura correta, ou seja, $resource recebe dados do endpoint, os dados têm sua própria normalização que interage com os dados e os envia de volta, o que é bastante útil para o desenvolvimento de aplicativos CRUD. Em comparação, $http irá interagir com o servidor mais diversificado que $resource, mas com $resource, se os dados da camada do servidor forem normalizados, a operação será mais rápida.
$resource . exemplo de aplicação
Etapa 1: crie o arquivo index.html na pasta de recursos
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example resourece</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js"></script> --> <script src="https://code.angularjs.org/1.2.32/angular-resource.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="listUserController"> <table> <tr> <th>Username</th> <th>Name</th> <th>Email</th> </tr> <tr ng-repeat="user in users"> <td>{{user.fields.username}}</td> <td>{{user.fields.fullname}}</td> <td>{{user.fields.phonenumber}}</td> </tr> </table> </div> </div> </body> <script> var app = angular.module('myApp', ['ngResource']); // app.run(function($http) { // $http.defaults.headers.common['Authorization'] = 'Bearer keyMhcG4dscdHl3Nf'; // }); app.controller('listUserController', function ($scope, $resource) { $scope.users = []; $scope.getListUsers = $resource('http://localhost/resource/listuser.json').query(function(){ $scope.users = $scope.getListUsers; }); // console.log( $scope.getListUsers); }); </script> </html>Passo 2: crie o arquivo listuser.json no mesmo nível do arquivo de índice com o array de objetos da estrutura json:
[ { "id": "recFrt8MNiEg4jInj", "createdTime": "2022-04-22T09:19:18.000Z", "fields": { "password": "1234567", "phonenumber": "0911222333", "username": "toan1234", "fullname": "username 3" } }, { "id": "recT2YNM75XbD4E4T", "createdTime": "2022-04-27T13:15:49.000Z", "fields": { "phonenumber": "0932159215", "username": "to9an1134", "fullname": "Toan ngo vinh" } }, { "id": "recaE9soCIeZgyhVP", "createdTime": "2022-04-22T09:19:18.000Z", "fields": { "password": "1234567", "phonenumber": "0932321592", "username": "toanngo92", "fullname": "toan ngo" } }, { "id": "rectJwBmOAsWDWHnw", "createdTime": "2022-04-28T01:03:47.000Z", "fields": { "phonenumber": "0932159215", "username": "to9an1134", "fullname": "Toan ngo vinh" } }, { "id": "recvDBMvANFv5UiK8", "createdTime": "2022-04-22T09:19:18.000Z", "fields": { "password": "1234567", "phonenumber": "0782222567", "username": "toan123", "fullname": "username 2" } } ]Diferença entre $http e $resource quando acessado via API REST
$http serviço de mecanismo de processamento através de AJAX, e a maioria dos programadores usará em casos, através deste negócio, programadores irão criar GET,POST,DELETE… de sua estrutura complexa, menos código de amostra e os dados de retorno não são uma promessa, por isso é mais difícil de acessar para os recém-chegados.
Em um cenário RESTful, $resource abraça $http, o que significa que com um serviço Web RESTful, $resource é a opção a ser usada. Com $http, podemos enviar requisições para o servidor com outras estruturas, por exemplo, enviar uma requisição para um site que não segue a estrutura de dados da API e receber os dados retornados como todo o conteúdo html retornado da requisição. Quanto ao $resource, segue a estrutura do RESTful.
Retangular
Documentos:
Um serviço que pode acessar serviços REST é o Retangular, que é uma biblioteca de terceiros que é injetada no projeto por meio de injeção de dependência . Ele simplifica as solicitações HTTP reduzindo a quantidade de código para escrever, pode ser usado para fazer aplicativos interativos de API RESTful substituindo o $http padrão do angularJS, é claro que os métodos padrão estão completos.
Pontos fortes do Retangular:
- Suporta todos os métodos HTTP
- Não há necessidade de reescrever a URL muitas vezes, apenas defina o endpoint para recursos uma vez, a próxima vez seguirá a estrutura do endpoint para se comunicar
- Permitir configuração de método personalizado
Exemplo ao implementar o método GET com Retangular:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exmample Http method</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js"></script> <!-- bat buoc phai load lodash truoc khi load restangular --> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/restangular@1.6.1/src/restangular.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="listUserController"> <table> <tr> <th>Username</th> <th>Name</th> <th>Email</th> </tr> <tr ng-repeat="user in users"> <td>{{user.fields.username}}</td> <td>{{user.fields.fullname}}</td> <td>{{user.fields.phonenumber}}</td> </tr> </table> </div> </div> </body> <script> var app = angular.module('myApp', ['restangular']); app.config(function (RestangularProvider) { RestangularProvider.setBaseUrl('https://api.airtable.com/v0/apppcdfKQ5q5rch7A'); RestangularProvider.setDefaultHeaders({ 'Content-Type': 'application/json', Authorization: 'Bearer APIKEY' }); }); app.controller('listUserController', function ($scope, Restangular) { $scope.users = []; $scope.getListUsers = Restangular.all('user').doGET().then(function (result) { $scope.users = result.records; console.log($scope.users); }); console.log($scope.getListUsers); }); </script> </html>Tratamento de erros ao comunicar cliente-servidor
O tratamento de erros e o registro de exceções são muito importantes na comunicação, pois, na realidade, são muitas as situações que ocorrem, como problemas de conexão, falhas na infraestrutura do servidor, falhas no banco de dados, etc.
Usamos os blocos try, catch, finally para capturar essas exceções. No angularJS, existe uma forma de economizar tempo, pois existe um serviço $exceptionHandle usado para capturar exceções e não afetar a rota da aplicação, pois esses erros geralmente não estão relacionados à sintaxe
Exemplo de exceção em angularJS:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exmample Http method</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="listUserController"> <table> <tr> <th>Username</th> <th>Name</th> <th>Email</th> </tr> <tr ng-repeat="user in users"> <td>{{user.fields.username}}</td> <td>{{user.fields.fullname}}</td> <td>{{user.fields.phonenumber}}</td> </tr> </table> </div> </div> </body> <script> var app = angular.module('myApp', []); app.config(function($provide){ $provide.decorator('$exceptionHandler',function($delegate){ return function (exception,cause){ console.log(exception,cause); $delegate($exception,cause); } }); }); app.controller('listUserController', function ($scope, $http) { $scope.users = []; $http({ url: "https://api.airtable.com/v0/apppcdfKQ5q5rch7A/user", method: 'GET', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer APIKEY' } }).then( function (data) { console.log(data); $scope.users = data.data.records; console.log($scope.users); }, function (error) { console.log(error); alert("get list Failed"); }); // $scope.getListUser(); }); </script> </html> Bài viết liên quan:
Dịch vụ thiết kế Wesbite
