Como acessar os serviços da API RESTful na minha página angularjs?

Eu sou muito novo no angularJS. Procuro acessar serviços da API RESTful, mas não tenho ideia. Como eu posso fazer isso?

Opção 1: serviço $ http

O AngularJS oferece o $httpserviço que faz exatamente o que você deseja: Enviar requisições AJAX para serviços web e receber dados deles, usando JSON (que é perfeito para falar com serviços REST).

Para dar um exemplo (retirado da documentação AngularJS e ligeiramente adaptado):

$http({ method: 'GET', url: '/foo' }).
  success(function (data, status, headers, config) {
    // ...
  }).
  error(function (data, status, headers, config) {
    // ...
  });

Opção 2: serviço $ resource

Observe que também há outro serviço no AngularJS, o $resourceserviço que fornece acesso aos serviços REST de uma forma mais de alto nível (exemplo novamente retirado da documentação do AngularJS):

var Users = $resource('/user/:userId', { userId: '@id' });
var user = Users.get({ userId: 123 }, function () {
  user.abc = true;
  user.$save();
});

Opção 3: Retangular

Além disso, também existem soluções de terceiros, como Restangular . Veja sua documentação sobre como usá-lo. Basicamente, é muito mais declarativo e abstrai mais detalhes de você.

O serviço $ http pode ser usado para AJAX de propósito geral. Se você tiver uma API RESTful adequada, deve dar uma olhada em ngResource .

Você também pode dar uma olhada no Restangular , que é uma biblioteca de terceiros para lidar com APIs REST facilmente.

Bem-vindo ao maravilhoso mundo do Angular !!

Eu sou muito novo no angularJS. Estou pesquisando para acessar serviços da API RESTful, mas não tenho a menor idéia. por favor me ajude a fazer isso. Obrigado

Existem dois (muito grandes) obstáculos para escrever seus primeiros scripts Angular, se você estiver usando os serviços 'GET'.

Primeiro, seus serviços devem implementar a propriedade "Access-Control-Allow-Origin", caso contrário, os serviços funcionarão muito bem quando chamados de, digamos, um navegador da web, mas falharão terrivelmente quando chamados do Angular.

Portanto, você precisará adicionar algumas linhas ao seu arquivo web.config :

<configuration>
  ... 
  <system.webServer>
    <httpErrors errorMode="Detailed"/>
    <validation validateIntegratedModeConfiguration="false"/>
    <!-- We need the following 6 lines, to let AngularJS call our REST web services -->
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*"/>
            <add name="Access-Control-Allow-Headers" value="Content-Type"/>
        </customHeaders>
    </httpProtocol>
  </system.webServer>
  ... 
</configuration>

Em seguida, você precisa adicionar um pouco de código ao seu arquivo HTML para forçar o Angular a chamar os serviços da web 'GET':

// Make sure AngularJS calls our WCF Service as a "GET", rather than as an "OPTION"
var myApp = angular.module('myApp', []);
myApp.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);

Depois de fazer essas correções, chamar uma API RESTful é realmente simples.

function YourAngularController($scope, $http) 
{
    $http.get('http://www.iNorthwind.com/Service1.svc/getAllCustomers')
        .success(function (data) {
        //  
        //  Do something with the data !
        //  
    });
}

Você pode encontrar um passo a passo realmente claro dessas etapas nesta página da web:

Usando Angular, com dados JSON

Boa sorte !

Mike

Apenas para expandir $http(métodos de atalho) aqui: http://docs.angularjs.org/api/ng.$http

// Snippet da página

$http.get('/someUrl').success(successCallback);
$http.post('/someUrl', data).success(successCallback);

// métodos de atalho disponíveis

$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp

Por exemplo, seu json se parece com isto: {"id": 1, "content": "Hello, World!"}

Você pode acessar este através do angularjs assim:

angular.module('app', [])
    .controller('myApp', function($scope, $http) {
        $http.get('http://yourapp/api').
            then(function(response) {
                $scope.datafromapi = response.data;
            });
    });

Então, em seu html, você faria assim:

<!doctype html>
<html ng-app="myApp">
    <head>
        <title>Hello AngularJS</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
        <script src="hello.js"></script>
    </head>

    <body>
        <div ng-controller="myApp">
            <p>The ID is {{datafromapi.id}}</p>
            <p>The content is {{datafromapi.content}}</p>
        </div>
    </body>
</html>

Isso chama o CDN para angularjs, caso você não queira baixá-los.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="hello.js"></script>

Espero que isto ajude.