Angular.js — Возможно ли брать данные из json файла по url?

Question

[studio7am]

Недавно начал изучать angular и, как и многие, начал с учебника на angular.ru. В учебнике шаг за шагом объясняют как вывести список телефонов с описанием в html из json файла. (PhonecatApp).

var phonecatApp = angular.module('phonecatApp', []);
                 phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
                $http.get('phones/phones.json').success(function(data) {
                $scope.phones = data;
              });
            $scope.orderProp = 'age';
             });

Этот код в контроллере с помощью сервиса $http извлекает title и body из json файла, который лежит рядом в папке phones/phones.json и выводит его в html.

Вопрос. Возможно ли брать данные из json файла который лежит не локально, а например по url?
Для эксперимента написал простую rails app которая генерирует json https://secret-coast-8851.herokuapp.com/phones.json

И попробовал так:

var phonecatApp = angular.module('phonecatApp', []);
                 phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
                $http.get('https://secret-coast-8851.herokuapp.com/phones.json ').success(function(data) {
                $scope.phones = data;
              });
            $scope.orderProp = 'age';
             });

Но ничего не получилось. По факту то и там и там json файл. Структура файла одинаковая. Почему не получается? Есть варианты. Подскажите - буду благодарен.

Answer 1

[buurz]

Как уже сказали необходимо использовать jsonp. И не забываем про JSON_CALLBACK
У меня в приложении используется во так:

$http.jsonp(url+'&callback=JSON_CALLBACK') # url = Ваш url
.success(data)->
 #some code
.error(data) ->
 #some code

Answer 2

[Денис Пушкарев]

Если бэкэнд ваш и домен отличается от того, по какому взят клиент - используйте jsonp. Angular с ним отлично работает.

Comments

[Денис Пушкарев]

$http.jsonp('https://secret-coast-8851.herokuapp.com/phones.jso...')

А на сервере отдаём не просто json, а json обернутый в коллбэк, переданный параметром jsonp, см. статью в вики.

Answer 3

[Сергей Протько]

Либо стартовать сервер статики с локалхоста, либо запускать браузер (хром) с --disable-web-security

Answer 4

[Руслан Лопатин]

У берите пробел в конце адреса 'https://secret-coast-8851.herokuapp.com/phones.json '