¿Cómo acceder a los servicios de la API RESTful en mi página de angularjs?

Respuestas:

145

Opción 1: servicio $ http

AngularJS proporciona el $httpservicio que hace exactamente lo que usted desea: enviar solicitudes AJAX a servicios web y recibir datos de ellos, usando JSON (que es perfecto para hablar con servicios REST).

Para dar un ejemplo (tomado de la documentación de AngularJS y ligeramente adaptado):

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

Opción 2: $ servicio de recursos

Tenga en cuenta que también hay otro servicio en AngularJS, el $resourceservicio que proporciona acceso a los servicios REST de una manera más de alto nivel (ejemplo nuevamente tomado de la documentación de AngularJS):

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

Opción 3: Restangular

Además, también existen soluciones de terceros, como Restangular . Consulte su documentación sobre cómo usarlo. Básicamente, es mucho más declarativo y abstrae más detalles de ti.

Golo Roden
fuente
1
¿Puedes ayudarme aquí? No tengo ni idea. stackoverflow.com/questions/16463456/… . No puedo cargar el servicio desde la API REST. obteniendo una matriz vacía. Gracias
anilCSE
@GoloRoden vi a alguien usando $ http.defaults.useXDomain = true en angular cuando se trata de CORS. ¿Es realmente necesario hacer eso? porque acabo de configurar laravel y angular en un dominio diferente. presioné el controlador laravel con una solicitud http de angular. Simplemente funciona bien, ya sea que use $ http.defaults.useXDomain o no. ¿Existe alguna explicación lógica para esto?
under5hell
13

El servicio $ http se puede utilizar para AJAX de propósito general. Si tiene una API RESTful adecuada, debería echar un vistazo a ngResource .

También puede echar un vistazo a Restangular , que es una biblioteca de terceros para manejar API REST fácilmente.

Aleksander Blomskøld
fuente
10

¡Bienvenido al maravilloso mundo de Angular!

Soy muy nuevo en angularJS. Estoy buscando acceder a servicios desde la API RESTful pero no tengo ni idea. por favor ayúdame a hacer eso. Gracias

Hay dos obstáculos (muy grandes) para escribir sus primeros scripts angulares, si actualmente está utilizando los servicios 'GET'.

Primero, sus servicios deben implementar la propiedad "Access-Control-Allow-Origin"; de lo contrario, los servicios funcionarán de maravilla cuando se llamen desde, digamos, un navegador web, pero fallarán miserablemente cuando se llamen desde Angular.

Por lo tanto, deberá agregar algunas líneas a su archivo 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>

A continuación, debe agregar un poco de código a su archivo HTML, para obligar a Angular a llamar a los servicios 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'];
}]);

Una vez que tenga estas correcciones en su lugar, llamar a una API RESTful es realmente sencillo.

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

Puede encontrar un tutorial muy claro de estos pasos en esta página web:

Usando Angular, con datos JSON

Buena suerte !

Miguel

Mike Gledhill
fuente
10
¿Por qué animaría a alguien a abrir totalmente sus servicios web a Internet? El Access-Control-Allow-Originnunca debe ser un comodín de menos que seas un público frente API ...
Dave Mackintosh
7

Solo para expandir $http(métodos de acceso directo) aquí: http://docs.angularjs.org/api/ng.$http

// Fragmento de la página

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

// métodos de acceso directo disponibles

$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
CKuharski
fuente
1
.success () y .error () está obsoleto. debe usar .then () y .catch () en su lugar
Derber Alter
0

Por ejemplo, su json se ve así: {"id": 1, "content": "Hello, World!"}

Puede acceder a esto a través de angularjs así:

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

Luego, en tu html lo harías así:

<!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>

Esto llama a la CDN para angularjs en caso de que no desee descargarlos.

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

Espero que esto ayude.

PinoyDev
fuente