Как получить доступ к службам из 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. Если у вас есть правильный RESTful 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>

Надеюсь это поможет.