Im doing a small tutorial online and basically I'm at the point where it wants me to display data using http get from the controller while the sample data is in the server file.I was able to pull the data from the controller.js file but when i try to do it using the .get it does work and doesn't show any data on the local hose. I think the issue is in my controller.js file but its been a few hours debugging.. not really seeing the issue.. which I'm sure its something stupid.
controller.js File
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
console.log("Hello World from controller");
$http.get('/savinglist').success(function(response){
console.log("got data");
$scope.savinglist = response;
});
}]);
server.js File
var express = require('express');
var app = express();
app.use(express.static(__dirname + "/public"));
app.get('/savinglist', function (res, req){
console.log("I recieved get request")
person1= {
name: 'Tim',
price: 'tim@gmail.com',
discount:'(571) 426-1433'
};
person2 = {
name:'Liam',
price:'neason@taken2.com',
discount: '(777) 777-7777'
};
person3={
name: 'Jessie',
price:'jessie@vma.com',
discount: '(684) 426-1232'
};
var savinglist = [person1, person2, person3];
res.json(savinglist);
});
app.listen(3000);
console.log("server running on post 3000");
index.html File
<!DOCTYPE>
<html ng-app="myApp">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css " integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
<title>How much are they saving</title>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>Saving $$$$?</h1>
<table class="table">
<thread>
<tr>
<th>Name</th>
<th>Price</th>
<th>Discount</th>
</tr>
</thread>
<tbody>
<tr ng-repeat="savings in savinglist">
<td>{{savings.name}}</td>
<td>{{savings.price}}</td>
<td>{{savings.discount}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"> </script>
<script src="controllers/controller.js"></script>
</body>
</html>
In your server.js file you have a typo. The callback function you provide here needs to have the request object as the first parameter, and the response second.
You wrote:
app.get('/savinglist', function (res, req){ console.log("I recieved get request")
...
res.json(savinglist); });
The first line should instead read: app.get('/savinglist', function (req, res){