AngularJS $http.get 不检索后端数据答案

【问题标题】：AngularJS $http.get not retrieving the backend dataAngularJS $http.get 不检索后端数据
【发布时间】：2015-07-12 15:26:31
【问题描述】：

我是“Angularjs 和 Nodejs”组合的新手，我正在尝试制作一个简单的 crud 应用程序。问题是，当我在 Angular 中使用 $http.get 时，它不会进入后端。

这是我的代码：

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;
    });
});

console.log(data) 返回整个 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>

但是这段代码返回的是json格式的mysql数据：

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!");
        });
    });

请帮忙。在此先感谢，抱歉英语不好。

【问题讨论】：

标签： javascript mysql angularjs node.js

【解决方案1】：

在 Express 中，您需要响应请求。使用诸如res.send 之类的东西并向下发送数据。

http://expressjs.com/api.html#res.send

发送 HTTP 响应。

body 参数可以是 Buffer 对象、String、对象或大批。例如：
res.send(new Buffer('whoop'));
res.send({ some: 'json' });
res.send('some html');
res.status(404).send('Sorry, we cannot find that!');
res.status(500).send({ error: 'something blew up' });
此方法对简单的非流式响应执行许多有用的任务：例如，它自动分配 Content-Length HTTP 响应头字段（除非之前定义）并提供自动 HEAD 和 HTTP 缓存新鲜度支持。

当参数为Buffer对象时，该方法将Content-Type响应头域设置为“application/octet-stream”，除非之前定义如下：
res.set('Content-Type', 'text/html');
res.send(new Buffer('some html'));
当参数为String时，该方法将Content-Type设置为“text/html”：
res.send('some html');
当参数为数组或对象时，Express 以 JSON 表示形式响应：
res.send({ user: 'tobi' });
res.send([1,2,3]);

http://expressjs.com/api.html#res.end

结束响应过程。继承自 Node 的http.ServerResponse。

用于在没有任何数据的情况下快速结束响应。如果需要数据响应，请改用res.send()和res.json()等方法。
res.end();
res.status(404).end();

【讨论】：

我已经尝试过 res.json、res.end、res.send 但这些都不起作用。问题是 $http.get 不会发送到 express app.get。甚至 console.log("Backend");没有被执行。
您可以打开网络选项卡，查看 $http 请求在哪里触发。我怀疑您的快递在不同的端口上，并且您没有将其包含在 $http.get 的 URL 中。

【解决方案2】：

我得到了答案，我只需要启动http函数

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();
});

但我仍然在 chrome 控制台中遇到错误

"GET http://localhost:8000/%7B%7Bdatas.profile_picture%7D%7D 404 (Not Found)"

在<img src="{{datas.profile_picture}}">

【讨论】：

【解决方案3】：

改变

<img src="{{datas.profile_picture}}">

到

<img src="{{data.profile_picture}}">

【讨论】：

【解决方案4】：

用于修复 chrome 控制台中的错误

"GET http://localhost:8000/%7B%7Bdatas.profile_picture%7D%7D 404 (Not Found)"

我建议你使用 ngSrc 指令，所以不要使用

<img src="{{datas.profile_picture}}">

使用

<img ngSrc="{{datas.profile_picture}}">

如doc中所述

希望有帮助

【讨论】：

感谢@JonathanLeijendekker，如果您认为我的回答有用，请考虑支持我的回答