Angularjs sayfamdaki RESTful API'den hizmetlere nasıl erişebilirim?

AngularJS'de çok yeniyim. RESTful API'den hizmetlere erişmek için arıyorum, ancak hiçbir fikrim olmadı. Bunu nasıl yapabilirim?

1. Seçenek: $ http hizmeti

AngularJS, tam olarak istediğiniz şeyi yapan $httphizmeti sağlar : JSON kullanarak web hizmetlerine AJAX istekleri gönderme ve bunlardan veri alma (bu, REST hizmetleriyle konuşmak için mükemmeldir).

Bir örnek vermek gerekirse (AngularJS belgelerinden alınmıştır ve biraz uyarlanmıştır):

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

2. Seçenek: $ kaynak hizmeti

Ayrıca angularjs başka hizmet olduğunu not edin $resourceservisi (örnek yine angularjs belgelerine alınan) bir daha üst düzey moda DİNLENME hizmetlerine erişim sağlar:

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

3. Seçenek: Yeniden açılı

Dahası, Restangular gibi üçüncü taraf çözümler de var . Nasıl kullanılacağına ilişkin belgelerine bakın . Temel olarak, çok daha açıklayıcı ve sizden daha fazla ayrıntıyı özetliyor.

$ Http hizmet genel amaçlı AJAX için kullanılabilir. Uygun bir RESTful API'ye sahipseniz, ngResource'a bir göz atmalısınız .

Ayrıca , REST API'lerini kolayca işlemek için üçüncü taraf bir kitaplık olan Restangular'a da göz atabilirsiniz .

Angular'ın harika dünyasına hoş geldiniz !!

AngularJS'de çok yeniyim. RESTful API'den hizmetlere erişmek için arıyorum ama hiçbir fikrim olmadı. lütfen bunu yapmama yardım et. teşekkür ederim

Şu anda 'GET' hizmetlerini kullanıyorsanız, ilk Angular komut dosyalarınızı yazmanın iki (çok büyük) engeli vardır.

İlk olarak, hizmetlerinizin "Erişim-Kontrol-İzin Ver-Menşei" özelliğini uygulaması gerekir, aksi takdirde hizmetler, örneğin bir web tarayıcısından çağrıldığında bir tedavi olarak çalışır, ancak Angular'dan çağrıldığında perişan bir şekilde başarısız olur.

Bu nedenle, web.config dosyanıza birkaç satır eklemeniz gerekir :

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

Ardından, Angular'ı 'GET' web hizmetlerini çağırmaya zorlamak için HTML dosyanıza biraz kod eklemeniz gerekir:

// 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'];
}]);

Bu düzeltmeleri yerine getirdikten sonra, aslında bir RESTful API çağırmak gerçekten basittir.

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

Bu web sayfasında bu adımların gerçekten net bir açıklamasını bulabilirsiniz:

JSON verileriyle Angular'ı kullanma

İyi şanslar !

Mike

Sadece $httpburada (kısayol yöntemleri) genişletmek için : http://docs.angularjs.org/api/ng.$http

// Sayfadan pasaj

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

// kullanılabilir kısayol yöntemleri

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

Örneğin json'unuz şuna benzer: {"id": 1, "content": "Merhaba, Dünya!"}

Buna angularjs aracılığıyla şu şekilde erişebilirsiniz:

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

Sonra html'nizde bunu şöyle yaparsınız:

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

Bu, CDN'yi indirmek istememeniz durumunda angularj'ler için çağırır.

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

Bu yardımcı olur umarım.