$http service angular not working
Question
I'm utilising Angular's $http service in controller to make an HTTP request to web server to fetch the data in the app/phones/phones.json file.But the list of phones will not get displayed via index.html.
app/js/controllers.js:
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
/////////// index.html:
<html ng-app="phonecatApp" ng-controller="PhoneListCtrl">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery:{{query}}</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body >
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search:<input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<div class="col-md-10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones| filter:query|orderBy:orderProp">
<span> {{phone.name}} </span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
<div style="padding:100px">
Additional
<p> Total number of phones:{{phones.length}}</p>
<p>Hello,{{name}}!</p>
<table>
<tr><th>row number</th></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i + 1}}</td><td>{{i + 1}}</td><td>{{i + 1}}</td><td>{{i + 1}}</td><td>{{i + 1}}</td><td>{{i + 1}}</td><td>{{i + 1}}</td><td>{{i + 1}}</td></tr>
</table>
</div>
</body>
</html>
///////////////////////
here's the json file:
[
{
"age": 0,
"id": "motorola-xoom-with-wi-fi",
"imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg",
"name": "Motorola XOOM\u2122 with Wi-Fi",
"snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
},
{
"age": 1,
"id": "motorola-xoom",
"imageUrl": "img/phones/motorola-xoom.0.jpg",
"name": "MOTOROLA XOOM\u2122",
"snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 3,
"id": "dell-streak-7",
"imageUrl": "img/phones/dell-streak-7.0.jpg",
"name": "Dell Streak 7",
"snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around."
}]
2 answers
solution1
1 2014-09-17 11:07:43
Your problem could be that you have to allow loading of json files in your web.config:
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
I've had a similar problem and solved it with this. Hope it helps. :)
solution2
1 ACCPTED 2014-09-17 11:12:53
Please see here http://plnkr.co/edit/17K7bH7IQ1RgwY6JZMiN?p=preview
change you get call to which allows you to see why $get is not working
$http.get('phones.json').then(function(response) {
$scope.phones = response.data;
},
//failed $get call
function(a, b, c) {
alert("can't get data")
console.log(a);
console.log(b);
console.log(c);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.