কীভাবে আমার কৌণিক পৃষ্ঠাতে RESTful API থেকে পরিষেবাগুলি অ্যাক্সেস করবেন?


88

আমি কৌনিক জেএসে খুব নতুন new আমি RESTful API থেকে পরিষেবাগুলি অ্যাক্সেসের জন্য অনুসন্ধান করছি, তবে আমি কোনও ধারণা পাইনি। আমি এটা কিভাবে করবো?

উত্তর:


145

বিকল্প 1: $ HTTP পরিষেবা

অ্যাঙ্গুলারজেএস সেই $httpপরিষেবা সরবরাহ করে যা আপনি যা চান ঠিক তেমন করে : ওয়েব সার্ভিসে আজেএক্স অনুরোধ পাঠানো এবং জেএসএন ব্যবহার করে (যা REST পরিষেবাদির সাথে কথা বলার জন্য উপযুক্ত) is

একটি উদাহরণ দিতে (AngularJS ডকুমেন্টেশন থেকে নেওয়া এবং কিছুটা অভিযোজিত):

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

বিকল্প 2: $ সংস্থান পরিষেবা

অনুগ্রহ করে নোট করুন যে AngularJS- তে আরও একটি পরিষেবা রয়েছে, $resourceপরিষেবাটি আরও উচ্চ-স্তরের ফ্যাশনে আরইএসটি পরিষেবাগুলিতে অ্যাক্সেস সরবরাহ করে (উদাহরণস্বরূপ আবার অ্যাংুলারজেএস ডকুমেন্টেশন থেকে নেওয়া):

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

বিকল্প 3: রেকাঙ্গুলার

তদুপরি, তৃতীয় পক্ষের সমাধানগুলিও রয়েছে যেমন রেষ্টাঙ্গুলার । এটি কীভাবে ব্যবহার করতে হয় তার ডকুমেন্টেশন দেখুন । মূলত, এটি আরও ঘোষণামূলক এবং আপনার থেকে দূরে থাকা বিশদগুলিকে বিমূর্ত করে।


4
আপনি কি আমাকে এখানে সাহায্য করতে পারেন? আমি কোন ধারণা পাচ্ছি। stackoverflow.com/questions/16463456/… । আমি REST এপিআই থেকে পরিষেবাটি লোড করতে অক্ষম। একটি খালি অ্যারে পেয়ে। আপনাকে ধন্যবাদ
anilCSE

@ গোলোরোডেন আমি কাউকে সিওআরএসের সাথে ডিল করার সময় কৌণিক ক্ষেত্রে $ http.defaults.useXDomain = সত্য ব্যবহার করতে দেখেছি। আসলেই কি তা করা দরকার? কারণ আমি সবেমাত্র বিভিন্ন ডোমেনে লারাভেল এবং কৌণিক সেটআপ করেছি। আমি কৌণিক থেকে http অনুরোধের সাথে লারাভেল কন্ট্রোলারটিকে আঘাত করি। এটি ঠিক কাজ করে, আমি i http.defaults.useXDomain ব্যবহার করি কিনা। এর কোন যৌক্তিক ব্যাখ্যা আছে কি?
আন্ডারহেল

13

$ HTTP সেবা সাধারণ কাজের AJAX এর জন্য ব্যবহার করা যেতে পারে। আপনার যদি যথাযথ আরএসএসএফুল এপিআই থাকে তবে আপনার এনজিআরসোর্সটি একবার দেখা উচিত ।

আপনি রেস্টাঙ্গুলারটিও একবার দেখে নিতে পারেন যা REST এপিআইগুলিকে সহজভাবে পরিচালনা করতে একটি তৃতীয় পক্ষের লাইব্রেরি।


10

কৌণিকের দুর্দান্ত পৃথিবীতে আপনাকে স্বাগতম !!

আমি কৌনিক জেএসে খুব নতুন new আমি RESTful API থেকে পরিষেবাগুলি অ্যাক্সেসের জন্য অনুসন্ধান করছি কিন্তু আমি কোনও ধারণা পাইনি। দয়া করে আমাকে এটি করতে সহায়তা করুন। ধন্যবাদ

আপনি যদি বর্তমানে 'জিইটি' পরিষেবাদি ব্যবহার করেন তবে আপনার প্রথম কৌনিক স্ক্রিপ্টগুলি লেখার জন্য দুটি (খুব বড়) বাধা রয়েছে।

প্রথমত, আপনার পরিষেবাদিগুলিকে অবশ্যই "অ্যাক্সেস-কন্ট্রোল-অরিজিন-অরিজিন" সম্পত্তিটি প্রয়োগ করতে হবে, অন্যথায় পরিষেবাগুলি কোনও ওয়েব ব্রাউজারের কাছ থেকে ডাকলে, বলা হয়, তবে কৌনিক থেকে আহ্বান জানানোয় খারাপভাবে ব্যর্থ হয়।

সুতরাং, আপনাকে আপনার ওয়েব.কমফিগ ফাইলে কয়েকটি লাইন যুক্ত করতে হবে:

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

এর পরে, অ্যাংগুলারকে 'জিইটি' ওয়েব পরিষেবাগুলিতে কল করতে বাধ্য করার জন্য আপনাকে আপনার এইচটিএমএল ফাইলটিতে কিছুটা কোড যুক্ত করতে হবে:

// 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 এপিআই কল করা সত্যই সোজা is

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

আপনি এই ওয়েবপৃষ্ঠায় এই পদক্ষেপগুলির একটি সত্যই স্পষ্ট ওয়াকথ্রু খুঁজে পেতে পারেন:

জেএসওএন ডেটা সহ কৌণিক ব্যবহার

শুভকামনা!

মাইক


10
আপনি কাউকে ইন্টারনেটে সম্পূর্ণরূপে তাদের ওয়েব পরিষেবা খুলতে উত্সাহিত করবেন? Access-Control-Allow-Originএকটি বন্য-কার্ড কখনো হওয়া উচিত যদি না আপনি একটি সর্বজনীন এপিআই মুখোমুখি ... করছি
ডেভ ম্যাকিন্টস

7

$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

4
.success () এবং .error () অবচয় করা হয়েছে। আপনার পরিবর্তে। (() এবং। ক্যাচ () ব্যবহার করা উচিত
ডারবার অল্টার

0

উদাহরণস্বরূপ আপনার জসন এর মতো দেখাচ্ছে: {"আইডি": 1, "সামগ্রী": "হ্যালো, ওয়ার্ল্ড!"}

আপনি এই মত কৌণিকটি ব্যবহার করতে পারেন:

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

তারপরে আপনার এইচটিএমএল এ আপনি এটি এইভাবে করবেন:

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

আপনি সিডিএন এগুলি কৌনিক সংক্রান্ত জন্য কল করে যদি আপনি সেগুলি ডাউনলোড করতে চান না।

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

আশাকরি এটা সাহায্য করবে.

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.