Я очень новичок в angularJS. Я ищу доступ к службам из RESTful API, но я понятия не имел. Как я могу это сделать?
Как получить доступ к службам из RESTful API на моей странице angularjs?
Ответы (5)
Вариант 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
Обратите внимание, что в 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. См. его документацию о том, как его использовать. По сути, это более декларативно и абстрагирует от вас больше деталей.
Служба http://docs.angularjs.org/api/ng.%24http может использоваться для AJAX общего назначения. Если у вас есть правильный RESTful API, вам следует взглянуть на ngResource.
Вы также можете взглянуть на Restangular, стороннюю библиотеку для простой работы с REST API.
Добро пожаловать в чудесный мир 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
Удачи !
Майк
Access-Control-Allow-Origin
никогда не должен быть подстановочным знаком, если вы не являетесь общедоступным API...
- person Dave Mackintosh; 20.05.2014
Просто чтобы расширить $http
(методы быстрого доступа) здесь: http://docs.angularjs.org/api/ng.%24http
// Фрагмент со страницы
$http.get('/someUrl').success(successCallback);
$http.post('/someUrl', data).success(successCallback);
//доступные методы быстрого доступа
$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
Например, ваш 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>
Надеюсь это поможет.