Question

我对现代网络开发完全陌生，并且已经从在线教程中学习了MEAN堆栈。我只是写了一个允许CRUD操作的简单todo应用程序。这是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端点，将所有待办事项显示为列表。我已检查过前端console.log中的app.js是否已被触发。
当我启动localhost:3000/api/todos时，JSON结果将显示在浏览器中而不是任何HTML中。我是否需要在Angular中使用路由来为同一页面中的每个端点显示不同的视图？

Answer 1

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

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

Answer 2

{{todos.length}}按原样显示，而不是被评估值替换。

如果您看到这一点，则表示您的angularjs应用程序未成功启动。请参阅控制台上的错误以获取进一步的修复操作。

将import React, { PropTypes, Component } from 'react'; window.Highcharts = require('highcharts'); export default class Chartline extends React.Component { constructor(props) { super(props); this.state = { chart: '' }; } public componentDidUpdate() { // console.log(this.props.candidate, 'this.props.candidate') if (this.props.category) { const category = this.props.category ? this.props.category : {}; console.log('category', category); window.Highcharts.chart('jobcontainer_' + category._id, { title: { text: '' }, plotOptions: { series: { cursor: 'pointer' } }, chart: { defaultSeriesType: 'spline' }, xAxis: { // categories: candidate.dateArr, categories: ['Day1', 'Day2', 'Day3', 'Day4', 'Day5', 'Day6', 'Day7'], showEmpty: true }, labels: { style: { color: 'white', fontSize: '25px', fontFamily: 'SF UI Text' } }, series: [ { name: 'Low', color: '#9B260A', data: category.lowcount }, { name: 'High', color: '#0E5AAB', data: category.highcount }, { name: 'Average', color: '#12B499', data: category.averagecount } ] }); } } public render() { const category = this.props.category ? this.props.category : {}; console.log('render category', category); return <div id={'jobcontainer_' + category._id} style={{ maxWidth: '400px', height: '180px' }} />; } }添加到app.js（nodejs）以便提供静态文件。

我希望通过调用/ api / todos
将所有待办事项显示为列表

您必须将结果从app.use(express.static(__dirname));设置为$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

当我启动localhost：3000 / api / todos时，JSON结果显示在浏览器中而不是任何HTML中。我是否需要在Angular中使用路由来为同一页面中的每个端点显示不同的视图？

您的意思是直接在浏览器中访问<ul> <li ng-repeat="todo in todos">Name: {{todo.title}}, {{todo.completed}}</li> </ul>？你不必这样做，localhost:3000/api/todos将完成工作并检索结果。目前，由于您只有一个简单的页面，因此您不需要$http.get。

Angular页面未显示Node后端的JSON数据

2 个答案: