मेरे angularjs पृष्ठ में RESTful API से सेवाएँ कैसे प्राप्त करें?

Question

मैं एंगुलरजेएस के लिए बहुत नया हूं। मैं RESTful API से सेवाओं तक पहुँचने के लिए खोज कर रहा हूँ, लेकिन मुझे कोई विचार नहीं आया। मैं उसे कैसे कर सकता हूँ?

Answer 1

विकल्प 1: $ http सेवा

AngularJS सेवा प्रदान करता है$http करता है जो आप वास्तव में चाहते हैं: AJAX वेब सेवाओं के लिए अनुरोध करता है और उनसे डेटा प्राप्त करता है, JSON (जो कि REST सेवाओं से बात करने के लिए पूरी तरह से है) का उपयोग करता है।

एक उदाहरण देने के लिए (AngularJS प्रलेखन और थोड़ा अनुकूलित से लिया गया):

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

विकल्प 2: $ संसाधन सेवा

कृपया ध्यान दें कि एंगुलरजेएस में एक और सेवा भी है, जो $resourceसेवा अधिक उच्च स्तर के फैशन में आरईएसटी सेवाओं तक पहुंच प्रदान करती है (उदाहरण के लिए फिर से एंगुलरजेएस प्रलेखन से लिया गया है):

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

विकल्प 3: पुनर्स्थापना

इसके अलावा, तीसरे पक्ष के समाधान भी हैं, जैसे रेस्टेंगुलर । इसका उपयोग कैसे करें, इसके प्रलेखन देखें । मूल रूप से, यह तरीका अधिक घोषणात्मक है और आप से अधिक विवरणों का सार है।

Comments

क्या आप कृपया यहाँ मेरी मदद कर सकते हैं। मुझे कोई पता नहीं चल रहा है। stackoverflow.com/questions/16463456/… । मैं सेवा को REST API से लोड करने में असमर्थ हूं। खाली सरणी मिल रही है। धन्यवाद

— anilCSE

@GoloRoden मैंने किसी को $ http.defaults.useXDomain का उपयोग करते हुए देखा = कोर्स से निपटने पर कोणीय में सच। क्या वास्तव में ऐसा करना आवश्यक है? क्योंकि मैं सिर्फ अलग डोमेन में लार्वा और कोणीय सेट करता हूं। मैं कोणीय से http अनुरोध के साथ लार्वा नियंत्रक मारा। यह सिर्फ ठीक काम करता है, चाहे मैं $ http.defaults.useXDomain का उपयोग करूं या नहीं। क्या इसके लिए कोई तार्किक व्याख्या है?

— 5

Answer 2

$ Http सेवा सामान्य प्रयोजन AJAX के लिए इस्तेमाल किया जा सकता है। यदि आपके पास उचित RESTful API है, तो आपको ngResource पर एक नज़र डालनी चाहिए ।

आप रेस्टेंगुलर पर भी नज़र डाल सकते हैं , जो REST एपीआई को आसान तरीके से संभालने के लिए एक थर्ड पार्टी लाइब्रेरी है।

Answer 3

अद्भुत दुनिया में आपका स्वागत है !!

मैं एंगुलरजेएस के लिए बहुत नया हूं। मैं Restful API से सेवाओं तक पहुँचने के लिए खोज कर रहा हूँ, लेकिन मुझे कोई विचार नहीं आया। कृपया मुझे ऐसा करने में मदद करें। धन्यवाद

यदि आप वर्तमान में 'GET' सेवाओं का उपयोग कर रहे हैं, तो आपकी पहली कोणीय स्क्रिप्ट लिखने में दो (बहुत बड़ी) बाधाएँ हैं।

सबसे पहले, आपकी सेवाओं को "एक्सेस-कंट्रोल-अलाउंस-ओरिजिन-ओरिजिन" प्रॉपर्टी को लागू करना होगा, अन्यथा सेवाएं वेब ब्राउजर से कॉल करने, कहने, कहने पर काम करेंगी, लेकिन एंगुलर से कॉल करने पर बुरी तरह से विफल हो जाती हैं।

इसलिए, आपको अपनी 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>

इसके बाद, आपको अपनी HTML फ़ाइल में थोड़ा सा कोड जोड़ने की जरूरत है, जिससे कोणीय को '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'];
}]);

एक बार जब आपके पास ये फ़िक्सेस होते हैं, तो वास्तव में एक RESTful API कॉल करना वास्तव में सीधा है।

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

आप इस वेबपेज पर इन चरणों का वास्तव में स्पष्ट पा सकते हैं:

JSON डेटा के साथ कोणीय का उपयोग करना

सौभाग्य !

माइक

Comments

आप किसी को अपनी वेब सेवाओं को पूरी तरह से इंटरनेट पर खोलने के लिए क्यों प्रोत्साहित करेंगे? Access-Control-Allow-Originएक जंगली कार्ड कभी नहीं होना चाहिए जब तक आप एक सार्वजनिक एपीआई का सामना करना पड़ ... कर रहे हैं

— डेव मैकिंतोश

Answer 4

बस $httpयहां (शॉर्टकट तरीकों पर) विस्तार करने के लिए : http://docs.angularjs.org/api/ng.$http

// पेज से स्निपेट

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

// उपलब्ध शॉर्टकट तरीके

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

Comments

.success () और .error () सही है। आपको .then () और (.catch) का उपयोग करना चाहिए

— Derber Alter

Answer 5

उदाहरण के लिए आपका जोंस इस तरह दिखता है: {"id": 1, "सामग्री": "हैलो, वर्ल्ड!"}

आप इस तरह से इस कोणीय को एक्सेस कर सकते हैं:

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

फिर अपने html पर आप इसे इस तरह करेंगे:

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

यदि आप उन्हें डाउनलोड नहीं करना चाहते हैं तो यह एंगुलरज के लिए CDN कहता है।

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

उम्मीद है की यह मदद करेगा।