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

consumir servicio rest angular 6

Question

Soy muy nuevo en angularJS. Estoy buscando acceder a los servicios de RESTful API, pero no tengo idea. ¿Cómo puedo hacer eso?

Answer 1

Opción 1: servicio $ http

AngularJS proporciona el servicio $http que hace exactamente lo que usted desea: enviar solicitudes AJAX a servicios web y recibir datos de ellos, utilizando 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 $ recurso

Tenga en cuenta que también hay otro servicio en AngularJS, el servicio $resource que proporciona acceso a los servicios REST de una manera más alta (ejemplo tomado nuevamente 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 hay soluciones de terceros, como Restangular . Vea su documentation sobre cómo usarlo. Básicamente, es mucho más declarativo y abstrae más detalles de usted.

Answer 2

Bienvenido al maravilloso mundo de Angular !!

Soy muy nuevo en angularJS. Estoy buscando acceso a los servicios de RESTful API, pero no tuve idea. por favor ayúdame a hacer eso. Gracias

Existen dos obstáculos (muy grandes) para escribir sus primeros guiones Angulares, si actualmente está usando los servicios ''OBTENER''.

En primer lugar, sus servicios deben implementar la propiedad "Control de acceso-Permitir-Origen"; de lo contrario, los servicios funcionarán como un regalo cuando se los llame desde, por ejemplo, un navegador web, pero fracasan miserablemente cuando se los llama 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, realmente 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 recorrido realmente claro de estos pasos en esta página web:

Usando Angular, con datos JSON

Buena suerte !

Micro

Answer 3

El servicio $http se puede usar para fines generales AJAX. 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 de manera sencilla.

Answer 4

Por ejemplo, tu json se ve así: {"id": 1, "contenido": "¡Hola, mundo!"}

Puedes 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 al 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.

Answer 5

Solo para expandir en $http (métodos de acceso directo) aquí: $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