Angular 页面未显示来自节点后端的 JSON 数据

Question

我对现代 Web 开发完全陌生，一直在通过在线教程学习 MEAN 堆栈。我只是在编写一个允许 CRUD 操作的简单待办事项应用程序。这是使用 MEAN 堆栈（Mongo 数据库通过 Mongolab）和 npm 和 bower 作为包管理器 - 没有脚手架工具或克隆现有应用程序。这是我第一次使用 Node 和 Angular.

我运行在使用 Angular 显示我的 HTML 页面时遇到了问题。以下是相关文件：

app.js 后端（仅包括相关部分）：

var express = require('express');
var path = require('path');
var app = express();
var morgan = require('morgan');
var db = require('./db');
var bodyParser = require('body-parser');

app.use(morgan('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({'extended' : 'true'}));

require('./backend/todo_rest')(app);

module.exports = app;

todo_rest.js:

var TodoSchema = require('./todo_schema');
var path = require('path');

module.exports = function(_app) {
    _app.get('/api/todos', function(req, res) {
         TodoSchema.find({}, function(err, todos) {
            console.log('API GET; data: ' + todos);
            if(err)
                return res.status(500).send("The todos could not be retrieved from the database!");
            return res.json(todos);
        });
    });

    _app.get('*', function(req, res){
         res.sendFile(path.resolve(__dirname + '/../client/views/index.html'));
     });
};

app.js为前端：

var app = angular.module('todosApp', []);

app.controller('todosController', function($scope, $http) {
    $scope.todos = {};

    $http({
        method: 'GET',
        url: '/api/todos'
    }).then(function (success) {
        console.log(success.data);
    }, function (error) {
        console.log('Angular GET error: ' + error.data);
    });
});

和index.html:

<!DOCTYPE html>
<html ng-app="todosApp">
<head>
    <meta charset="UTF-8">
    <title>Todos App</title>
    <script src="../../bower_components/jquery/dist/jquery.min.js"></script>
    <script src="../../bower_components/angular/angular.min.js"></script>
    <script src="../app.js"></script>     // <-- this is the frontend's app.js
</head>
<body ng-controller="todosController">
<div>
    <span>Total: {{todos.length}}</span>
    <ul ng-repeat="todo in todos">
        <li>Name: {{todo.title}}, {{todo.completed}}</li>
    </ul>
</div>
</body>
</html>

虽然我确实想支持完整的 CRUD，但现在我只想 HTML 显示数据库中的所有待办事项。以下是当前存在的问题：

当我通过 localhost:3000 启动页面时，我得到了 HTML，但是像 {{todos.length}} 这样的 Angular 元素按原样显示，而不是被评估的替换值。基本上，当我启动该页面时，我希望通过调用我在后端公开的 /api/todos 端点将所有待办事项显示为列表。我检查过前端 app.js 中的 console.log 没有被触发。
当我启动 localhost:3000/api/todos 时，JSON 结果显示在浏览器中，而不是任何 HTML。我是否需要在 Angular 中使用路由来为同一页面中的每个端点显示不同的视图？

Answer 1

您尚未配置 Express 服务器以提供静态内容，这就是您的浏览器无法加载的原因 app.js。因此，angular 应用未初始化。

使用express.static加载静态内容。

Answer 2

{{todos.length}} are displayed as is, instead of being replaced by the evaluated values.

如果您看到此信息，则表示您的 angularjs 应用未成功引导。在您的控制台上查看错误以进一步修复操作。

将 app.use(express.static(__dirname)); 添加到您的 app.js(nodejs) 以提供静态文件。

I want all the todos to be displayed as a list by calling the /api/todos

您必须将结果从 $http.get 设置为 $scope.todos

$http({
  method: 'GET',
  url: '/api/todos'
}).then(function (success) {
  console.log(success.data);
  $scope.todos = success.data;      // <-------- set result to $scope.todos
}, function (error) {
  console.log('Angular GET error: ' + error.data);
});

将ng-repeat移动到li

<ul>
    <li ng-repeat="todo in todos">Name: {{todo.title}}, {{todo.completed}}</li>
</ul>

When I launch localhost:3000/api/todos, the JSON result is displayed in the browser instead of any HTML. Do I need to use routing in Angular to display a different view for each end point in the same page?

您的意思是直接在您的浏览器上访问 localhost:3000/api/todos？您不必这样做，$http.get 将完成工作并检索结果。目前您不需要 routing，因为您只有一个简单的页面。

Angular 页面未显示来自节点后端的 JSON 数据

Angular page not showing JSON data from Node backend

javascript

json

node.js

angularjs

mean-stack