получить данные из Википедии и показать их с помощью angularjs

Я новичок в angularjs. Я пытаюсь получить данные из википедии и показать ее в интерфейсе. Я retrived данные из вики, используя следующий код PHPполучить данные из Википедии и показать их с помощью angularjs

$url = 'http://en.wikipedia.org/w/api.php?action=query&prop=extracts|info&exintro&titles=Sachin_Tendulkar&format=json&explaintext&redirects&inprop=url&indexpageids'; 
$json = file_get_contents($url); 
echo json_encode($json);

следующий мой контроллер

var demoApp = angular.module('demoApp',['ngRoute']); 
demoApp.controller('SimpleController',function ($scope,$http){ 
    $http.post('server/view1.php').success(function(data){ 
     $scope.info = data; 
    }); 
});

мой HTML выглядит следующим образом

<html ng-app="demoApp"> 
<head> 
    <title> AngularJS Sample</title> 
    <script type="text/javascript" src="js/angular.min.js"></script> 
    <script type="text/javascript" src="js/angular-route.min.js"></script> 
    <script type="text/javascript" src="js/script.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap-combined.min.css"> 
</head> 
<body> 
    <div ng-controller="SimpleController"> 
     {{info.query}} // I dont know if this is right 
    </div> 
</body> 
</html>

Я хочу, чтобы отобразить весь контент, который извлекается в интерфейсе, но не отображается. Я не знаю, что я сделал неправильно. Я новичок в angularjs.

источник

2013-11-19 MdN

Наконец-то я нашел свой ответ.

HTML

<html ng-app="demoApp"> 
    <head> 
     <title> AngularJS Sample</title> 
     <script type="text/javascript" src="js/angular.min.js"></script> 
     <script type="text/javascript" src="js/angular-route.min.js"></script> 
     <script src="http://code.angularjs.org/1.2.1/angular-sanitize.min.js"></script> 
     <script type="text/javascript" src="js/script.js"></script> 
    </head> 
    <body> 
     <div ng-controller="SimpleController"> 
      <div ng-bind-html='info'></div> 
     </div> 
    </body> 
</html>

Контроллер

var demoApp = angular.module('demoApp',['ngSanitize']); 
demoApp.controller('SimpleController',function ($scope,$http){ 
    $http.post('server/view1.php').success(function(data){ 
     $scope.info = data; 
    }); 
});

PHP

$url = 'http://en.wikipedia.org/w/api.php?action=query&prop=extracts&titles=Sachin_Tendulkar&format=json&redirects&inprop=url&indexpageids'; 
$jsonString = json_decode(file_get_contents($url),true); 
$pageData = $jsonString['query']['pages'][57570]['extract']; 
echo $pageData;

источник

2013-11-20 08:28:32 MdN

Это действительно работает как решение.Однако кажется, что должен быть способ сделать это, не создавая скрипт php. – RevNoah

С заданным URL вы получаете ответ в формате JSON. Почему вы кодируете JSON для JSON? Это не нужно, поэтому пропустите эту часть.

<?php 
$url ='http://en.wikipedia.org/w/api.php?action=query&prop=extracts|info&exintro&titles=Sachin_Tendulkar&format=json&explaintext&redirects&inprop=url&indexpageids'; 
$json = file_get_contents($url); 
echo json; 
?>

Только что открыто the url, вы можете увидеть ответ.

В вашем примере ваш php-код довольно бесполезен. Возможно, вы можете использовать API непосредственно в своем контроллере:

$http.get('http://en.wikipedia.org/w/api.php?[....]').success(function(data){ 
    $scope.info = data; 
});

источник

2013-11-19 10:38:34

Спасибо за это. Но все же данные не отображаются в передней части. Я думаю, что я делаю что-то неправильно в html-коде. но не знаю, что. – MdN

Посмотрите на свою консоль в своем браузере (F12 в Chrome). Это даст вам полезную информацию о сообщениях/получении запросов и ошибках на стороне клиента (js). –

Ошибка в консоли – MdN

Пропустить PHP часть и использовать угловую JSON P со следующими параметрами:

format=json 
callback=JSON_CALLBACK

Так Угловая можно понять и разобрать Wiki Ответ:

$http({ 
    url: 'http://de.wikipedia.org/w/api.php?action=query&list=random&rnlimit=1&rawcontinue&format=json&callback=JSON_CALLBACK', 
    method: 'jsonp' 
}).success(function(response) { 
    console.log(response); 
    $scope.response = response; 
});

Это также работает с action=parse, чтобы получить статью.

Если вы хотите отобразить необработанный ответ JSON на странице, используйте JSon фильтр:

<pre>{{ response | json }}</pre>

источник

2015-01-26 15:40:24 paul

получить данные из Википедии и показать их с помощью angularjs

ответ

Смежные вопросы