Як отримати доступ до служб з RESTful API на моїй сторінці angularjs?


Відповіді:


145

Варіант 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: Служба ресурсів $

Зверніть увагу , що є ще одна служба в 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 . Дивіться документацію щодо використання. В основному, це набагато декларативніше і абстрагує більшу частину деталей від вас.


1
Чи можете ви допомогти мені тут? Я не здогадуюсь. stackoverflow.com/questions/16463456/… . Я не можу завантажити службу з REST API. отримання порожнього масиву. Дякую
anilCSE

@GoloRoden я бачив, як хтось використовує $ http.defaults.useXDomain = true в angular при роботі з CORS. Чи справді це потрібно робити? тому що я просто встановив laravel та angular в іншому домені. я вдарив контролер laravel із запитом http від angular. Це просто чудово працює, незалежно від того, чи використовую я $ http.defaults.useXDomain чи ні. Чи є цьому логічне пояснення?
under5hell

13

$ HTTP сервіс може бути використаний для загального призначення AJAX. Якщо у вас є належний RESTful API, вам слід поглянути на ngResource .

Ви також можете поглянути на Restangular , яка є сторонньою бібліотекою для простої роботи з REST API.


10

Ласкаво просимо в чудовий світ 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

Удачі !

Майк


10
Чому ви заохочуєте когось повністю відкрити свої веб-служби для Інтернету? Це Access-Control-Allow-Originніколи не повинно бути підстановочним знаком, якщо ви не користуєтесь API для всіх ...
Дейв Макінтош,

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

1
.success () та .error () припинено. вам слід використовувати замість .then () та .catch ()
Derber Alter

0

Наприклад, ваш json виглядає так: {"id": 1, "content": "Привіт, Світ!"}

Ви можете отримати доступ до цього через 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>

Сподіваюся, це допомагає.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.