retrieve data from Wikipedia and show it using angularjs

angularjs, javascript, php, wikipedia, wikipedia-api

Solution

I finally found my answer.

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>

Controller

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;

Problem

I am new to angularjs. I am trying to get data from wikipedia and show it in the front end. I retrived the data from wiki using the following php code ``` $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); ``` following is my controller ``` var demoApp = angular.module('demoApp',['ngRoute']); demoApp.controller('SimpleController',function ($scope,$http){ $http.post('server/view1.php').success(function(data){ $scope.info = data; }); }); ``` my html is as follows ``` <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> ``` I want to display all the content that is retrieved in the front end but it is not showing up. I dont know what I have done wrong. I am a newbie to angularjs.

Original source