Я дуже новачок у angularJS. Я шукаю доступ до послуг з RESTful API, але я не здогадався. Як я можу це зробити?
Відповіді:
AngularJS надає $http
послугу, яка робить саме те, що ви хочете: надсилання запитів AJAX до веб-служб та отримання даних від них за допомогою JSON (що ідеально підходить для спілкування із службами REST).
Для прикладу (взято з документації AngularJS та трохи адаптовано):
$http({ method: 'GET', url: '/foo' }).
success(function (data, status, headers, config) {
// ...
}).
error(function (data, status, headers, config) {
// ...
});
Зверніть увагу , що є ще одна служба в AngularJS, то $resource
служба , яка надає доступ до служб REST в більш високому рівні моди (наприклад , знову взяті з AngularJS документації):
var Users = $resource('/user/:userId', { userId: '@id' });
var user = Users.get({ userId: 123 }, function () {
user.abc = true;
user.$save();
});
Більше того, існують також сторонні рішення, такі як Restangular . Дивіться документацію щодо використання. В основному, це набагато декларативніше і абстрагує більшу частину деталей від вас.
$ HTTP сервіс може бути використаний для загального призначення 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 для всіх ...
Просто розгорнути $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
Наприклад, ваш 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>
Сподіваюся, це допомагає.