จะเข้าถึงบริการจาก RESTful API ในหน้า angularjs ของฉันได้อย่างไร

Question 1

ฉันยังใหม่กับ angularJS มาก ฉันกำลังค้นหาการเข้าถึงบริการจาก RESTful API แต่ฉันไม่ได้รับความคิดใด ๆ ฉันจะทำเช่นนั้นได้อย่างไร?

Question 2

ตัวเลือกที่ 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 service

โปรดทราบว่ายังมีบริการอื่นใน AngularJS ซึ่งเป็น$resourceบริการที่ให้การเข้าถึงบริการ REST ในรูปแบบระดับสูงมากขึ้น (ตัวอย่างอีกครั้งนำมาจากเอกสาร AngularJS):

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

ตัวเลือกที่ 3: วางรูปสามเหลี่ยม

นอกจากนี้ยังมีการแก้ปัญหาของบุคคลที่สามเช่นRestangular ดูเอกสารวิธีการใช้งาน โดยพื้นฐานแล้วมันเป็นวิธีที่เปิดเผยและเป็นนามธรรมมากขึ้นของรายละเอียดที่อยู่ห่างจากคุณ

Question 3

บริการ$ httpสามารถใช้สำหรับ AJAX วัตถุประสงค์ทั่วไป หากคุณมีความสงบ API ที่เหมาะสมที่คุณควรจะดูที่ngResource

คุณอาจลองดูที่Restangularซึ่งเป็นไลบรารีของบุคคลที่สามที่จัดการ REST API ได้อย่างง่ายดาย

Question 4

ยินดีต้อนรับสู่โลกมหัศจรรย์ของ Angular !!

ฉันยังใหม่กับ angularJS มาก ฉันกำลังค้นหาการเข้าถึงบริการจาก RESTful API แต่ไม่ได้รับความคิดใด ๆ โปรดช่วยฉันทำอย่างนั้น ขอขอบคุณ

มีอุปสรรคสองประการ (ใหญ่มาก) ในการเขียนสคริปต์ Angular แรกของคุณหากคุณกำลังใช้บริการ 'GET' อยู่

ขั้นแรกบริการของคุณต้องใช้คุณสมบัติ "Access-Control-Allow-Origin" มิฉะนั้นบริการจะทำงานได้ดีเมื่อเรียกจากเช่นเว็บเบราว์เซอร์ แต่ล้มเหลวอย่างน่าสังเวชเมื่อเรียกจาก Angular

ดังนั้นคุณจะต้องเพิ่มสองสามบรรทัดในไฟล์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 เพื่อบังคับให้ Angular เรียกใช้บริการเว็บ "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 !
        //  
    });
}

คุณสามารถดูคำแนะนำที่ชัดเจนของขั้นตอนเหล่านี้ได้ในหน้าเว็บนี้:

ใช้ Angular กับข้อมูล JSON

โชคดี !

ไมค์

Question 5

เพียงเพื่อขยาย$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

Question 6

ตัวอย่างเช่น json ของคุณมีลักษณะดังนี้: {"id": 1, "content": "Hello, World!"}

คุณสามารถเข้าถึงผ่าน angularjs ได้ดังนี้:

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 สำหรับ angularjs ในกรณีที่คุณไม่ต้องการดาวน์โหลด

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

หวังว่านี่จะช่วยได้