AngularJS $http.get not retrieving the backend data
Question
i am new to the "Angularjs and Nodejs" combination and i am trying to make a simple crud app. The problem is, when i use $http.get in angular, it doesnt go to the backend.
Here are my codes:
server.js (nodejs)
var connection = util.getDBConnection();
app.use(express.static(__dirname + "/public"));
app.use(bodyParser.json());
//routes = require('./routes/routes')(app, connection);
app.get('/', function(req, res) {
console.log("Backend");
connection.query("SELECT * FROM user_info;", function(err, rows){
if(err){
res.redirect('/error');
console.log("Error in the database: " + err);
}
res.end(JSON.stringify(rows));
console.log("Connected to the Database!");
});
});
angularmodule.js
var app = angular.module('two_way', ['ngRoute']);
app.controller('two_way_control', function($scope, $http){
$scope.message = "Hello from controller";
$http.get('/').success(function(data){
console.log("http get");
console.log(data);
$scope.profile_pictures = data;
});
});
and console.log(data) returns the whole index.html
index.html
<body>
<div id="container" ng-app="two_way" ng-controller="two_way_control">
<div class="row" ng-repeat="data in profile_pictures">
{{message}}
<div class=".col-sm-6 .col-md-5 .col-lg-6">
<h4>User Say's</h4><hr>
<p>
This is a Demo feed. It is developed to demonstrate Two way data binding.
</p>
{{ data.profile_picture }}
<img src="{{data.profile_picture}}">
</div>
</div>
</div>
</body>
But this code returns the mysql data in json format:
app.get('/load', function(req, res) {
console.log("Backend");
connection.query("SELECT * FROM user_info;", function(err, rows){
if(err){
res.redirect('/error');
console.log("Error in the database: " + err);
}
res.end(JSON.stringify(rows));
console.log("Connected to the Database!");
});
});
Please help. Thanks in advance and sorry for the bad english.
4 answers
solution1
2 2015-05-03 03:35:29
In Express, you need to respond with a request. Use something such as res.send and send data down.
http://expressjs.com/api.html#res.send
Sends the HTTP response.
The body parameter can be a Buffer object, a String, an object, or an Array. For example:
res.send(new Buffer('whoop')); res.send({ some: 'json' }); res.send('<p>some html</p>'); res.status(404).send('Sorry, we cannot find that!'); res.status(500).send({ error: 'something blew up' });This method performs many useful tasks for simple non-streaming responses: For example, it automatically assigns the Content-Length HTTP response header field (unless previously defined) and provides automatic HEAD and HTTP cache freshness support.
When the parameter is a Buffer object, the method sets the Content-Type response header field to “application/octet-stream”, unless previously defined as shown below:
res.set('Content-Type', 'text/html'); res.send(new Buffer('<p>some html</p>'));When the parameter is a String, the method sets the Content-Type to “text/html”:
res.send('<p>some html</p>');When the parameter is an Array or Object, Express responds with the JSON representation:
res.send({ user: 'tobi' }); res.send([1,2,3]);
http://expressjs.com/api.html#res.end
Ends the response process. Inherited from Node's
http.ServerResponse.Use to quickly end the response without any data. If you need to respond with data, instead use methods such as
res.send()andres.json().res.end(); res.status(404).end();
solution2
2 ACCPTED 2015-05-03 13:01:34
For fix the error in the chrome console
"GET http://localhost:8000/%7B%7Bdatas.profile_picture%7D%7D 404 (Not Found)"
i suggest you to use the ngSrc directive, so instead of
<img src="{{datas.profile_picture}}">
use
<img ngSrc="{{datas.profile_picture}}">
As described in the doc
Hope this help
solution3
1 2015-05-03 08:14:22
I got the answer, i just need to initiate the http function
var app = angular.module('two_way', []);
app.controller('two_way_control', function($scope, $http){
$scope.message = "Hello from controller";
$scope.load = function(){
$http.get('/LoadAll').success(function(data){
console.log("http get");
$scope.profile_pictures = data;
});
};
$scope.load();
});
but i still get an error in the chrome console
"GET http://localhost:8000/%7B%7Bdatas.profile_picture%7D%7D 404 (Not Found)"
in <img src="{{datas.profile_picture}}">
solution4
0 2015-05-03 08:28:14
Change
<img src="{{datas.profile_picture}}">
to
<img src="{{data.profile_picture}}">
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.