Bagaimana cara mengakses layanan dari RESTful API di halaman angularjs saya?

Saya sangat baru mengenal angularJS. Saya sedang mencari untuk mengakses layanan dari RESTful API, tapi saya tidak tahu. Bagaimana saya bisa melakukan itu?

Opsi 1: layanan $ http

AngularJS menyediakan $httplayanan yang melakukan apa yang Anda inginkan: Mengirim permintaan AJAX ke layanan web dan menerima data dari mereka, menggunakan JSON (yang sangat cocok untuk berbicara dengan layanan REST).

Sebagai contoh (diambil dari dokumentasi AngularJS dan sedikit diadaptasi):

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

Opsi 2: $ resource service

Harap dicatat bahwa ada juga layanan lain di AngularJS, $resourcelayanan yang menyediakan akses ke layanan REST dengan cara yang lebih tinggi (contoh lagi diambil dari dokumentasi AngularJS):

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

Opsi 3: Restangular

Apalagi, ada juga solusi pihak ketiga, seperti Restangular . Lihat dokumentasinya tentang cara menggunakannya. Pada dasarnya, ini jauh lebih deklaratif dan mengabstraksi lebih banyak detail dari Anda.

Layanan $ http dapat digunakan untuk tujuan umum AJAX. Jika Anda memiliki RESTful API yang tepat, Anda harus melihat ngResource .

Anda juga dapat melihat Restangular , yang merupakan pustaka pihak ketiga untuk menangani REST API dengan mudah.

Selamat datang di dunia Angular !!

Saya sangat baru di angularJS. Saya mencari untuk mengakses layanan dari RESTful API tetapi saya tidak tahu apa-apa. tolong bantu saya untuk melakukan itu. Terima kasih

Ada dua rintangan (sangat besar) untuk menulis skrip Angular pertama Anda, jika saat ini Anda menggunakan layanan 'GET'.

Pertama, layanan Anda harus mengimplementasikan properti "Access-Control-Allow-Origin", jika tidak, layanan akan bekerja saat dipanggil dari, katakanlah, browser web, tetapi gagal total saat dipanggil dari Angular.

Jadi, Anda perlu menambahkan beberapa baris ke file web.config Anda :

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

Selanjutnya, Anda perlu menambahkan sedikit kode ke file HTML Anda, untuk memaksa Angular memanggil layanan 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'];
}]);

Setelah Anda melakukan perbaikan ini, sebenarnya memanggil API RESTful sangatlah mudah.

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

Anda dapat menemukan panduan yang sangat jelas tentang langkah-langkah ini di halaman web ini:

Menggunakan Angular, dengan data JSON

Semoga berhasil !

Mike

Hanya untuk memperluas $http(metode pintas) di sini: http://docs.angularjs.org/api/ng.$http

// Cuplikan dari halaman

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

// metode pintasan yang tersedia

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

Misalnya json Anda terlihat seperti ini: {"id": 1, "content": "Hello, World!"}

Anda dapat mengakses ini melalui angularjs seperti:

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

Kemudian di html Anda, Anda akan melakukannya seperti ini:

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

Ini memanggil CDN untuk angularjs jika Anda tidak ingin mendownloadnya.

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

Semoga ini membantu.