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
我是angularjs的新手。我试图从*获取数据并在前端显示它。我使用以下php代码从wiki中重新获取数据
$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如下
<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.
我想显示在前端检索但未显示的所有内容。我不知道我做错了什么。我是angularjs的新手。
3 个解决方案
#1
5
Skip the PHP Part and use Angular JSONP with the following parameter:
跳过PHP部件并使用带有以下参数的Angular JSONP:
format=json
callback=JSON_CALLBACK
So Angular can understand and parse the Wiki Answer:
所以Angular可以理解和解析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;
});
This works also with action=parse to get an article.
这也适用于action = parse来获取文章。
If you want to display the raw json response on the page, use the json filter:
如果要在页面上显示原始json响应,请使用json过滤器:
<pre>{{ response | json }}</pre>
#2
1
With the given URL, you get a JSON-formatted response. Why do you encoding a JSON respons to JSON? That's not needed, so skip that part.
使用给定的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;
?>
Just open the url, you can see the reponse.
只需打开网址,即可看到响应。
In your example, your php code is pretty useless. Maybe you can use the API directly in your controller:
在你的例子中,你的PHP代码是没用的。也许您可以直接在控制器中使用API:
$http.get('http://en.wikipedia.org/w/api.php?[....]').success(function(data){
$scope.info = data;
});
#3
1
I finally found my answer.
我终于找到了答案。
HTML
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
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;
#1
5
Skip the PHP Part and use Angular JSONP with the following parameter:
跳过PHP部件并使用带有以下参数的Angular JSONP:
format=json
callback=JSON_CALLBACK
So Angular can understand and parse the Wiki Answer:
所以Angular可以理解和解析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;
});
This works also with action=parse to get an article.
这也适用于action = parse来获取文章。
If you want to display the raw json response on the page, use the json filter:
如果要在页面上显示原始json响应,请使用json过滤器:
<pre>{{ response | json }}</pre>
#2
1
With the given URL, you get a JSON-formatted response. Why do you encoding a JSON respons to JSON? That's not needed, so skip that part.
使用给定的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;
?>
Just open the url, you can see the reponse.
只需打开网址,即可看到响应。
In your example, your php code is pretty useless. Maybe you can use the API directly in your controller:
在你的例子中,你的PHP代码是没用的。也许您可以直接在控制器中使用API:
$http.get('http://en.wikipedia.org/w/api.php?[....]').success(function(data){
$scope.info = data;
});
#3
1
I finally found my answer.
我终于找到了答案。
HTML
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
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;