Question

我正在使用一个包含客户及其订单的简单应用程序来学习AngularJS。我有一个表格，显示客户的链接，导致他们的订单。点击View order，这是从主页查看客户订单的链接，我从Chrome的控制台收到内部服务器错误。我不确定路由是否有问题，虽然我所遵循的教程没有做任何额外的代码，除非我弄错了：

的index.html

<!doctype html>
<html ng-app="myApp">
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="https://code.angularjs.org/1.4.5/angular.js"></script>
        <script src="angular-route.js"></script>
        <script src="app/controllers/app.js"></script>
        <script src="app/controllers/customersController.js"></script>
        <script src="app/controllers/ordersController.js"></script>
        <script src="app/services/customersFactory.js"></script>
        <script src="app/services/values.js"></script>
    </head>
    <body>
        <header>
            <nav class="navbar navbar-default">
                <ul class="nav navbar-nav">
                    <li><a href="#/customers">Customers</a></li>
                    <li><a href="#/orders">Orders</a></li>
                </ul>
            </nav>

        </header>
        <div ng-view></div>

    </body>

</html>

app.js

angular.module('myApp', ['ngRoute'])
  .config(function ($routeProvider) {
    'use strict';
    $routeProvider
        .when('/', {
            controller: 'CustomersController',
            templateUrl: 'app/views/customers.html'
        })
        .when('/orders/:customerId', {
            controller: 'OrdersController',
            templateUrl: 'app/views/orders.html'
        })
        /*when('/orders/', {
            controller: 'AllOrdersController',
            templateUrl: 'app/views/allorders.html'
        })*/
        .otherwise( { redirectTo: '/' });
  });

customers.html客户

<h3> {{ appSettings.title }}</h3>
Filter: <input type="text" ng-model="customerFilter.name" />
<br/><br/>

<table>
    <tr>
        <th ng-click="doSort('name')">Name</th>
        <th ng-click="doSort('city')">City</th>
        <th ng-click="doSort('orderTotal')">Order Total</th>
        <th ng-click="doSort('joined')">Joined</th>
        <th>&nbsp;</th>
    </tr>
    <tr ng-repeat="cust in filtered = (customers | filter:customerFilter | orderBy:sortBy:reverse)">
        <td>{{ cust.name | uppercase }}</td>
        <td>{{ cust.city }}</td>
        <td>{{ cust.orderTotal | currency:'PLN' }}</td>
        <td>{{ cust.joined | date}}</td>
        <td><a href="#/orders/{{ cust.id }}">View Orders</a></td>
    </tr>
</table>

<span> Total customers: {{ filtered.length }} </span>
<br/>
<footer>Version: {{ appSettings.version }}</footer>

customersController.js

angular.module('myApp')
  .controller('CustomersController', function ($scope, customerFactory, appSettings) { 
    'use strict';

    $scope.sortBy = 'name';
    $scope.reverse = false;
    $scope.customers = [];
    $scope.appSettings = appSettings; 

    function init (){
        customerFactory.getCustomers()
            .success(function(customers) {
                $scope.customers = customers;
            })
            .error(function(data, status, headers, config) {
                //error handler
            });
    }

    init();

    $scope.doSort = function (propName) {
        $scope.sortBy = propName;
        $scope.reverse = !$scope.reverse;
    };
});

ordersController.js

angular.module('myApp')
  .controller('OrdersController', function ($scope, $routeParams, customerFactory) { 
    'use strict';

    var customerId = $routeParams.customerId;
    $scope.customer = null;

    function init() {
        //Search customers for customerId
        customerFactory.getCustomer(customerId)
            .success(function(customer) {
                $scope.customer = customer;
            })
            .error(function(data, status, headers, config) {
                //error handler
                //maybe pop up an alert, log it?
            });
    }

    init();

        /**
    $scope.doSort = function (propName) {
        $scope.sortBy = propName;
        $scope.reverse = !$scope.reverse;
    }; **/

});

orders.html

<h3>{{ customer.name }}'s Orders</h3>
<table>
    <tr>
        <th>Product</th>
        <th>Total</th>
    </tr>
    <tr ng-repeat="order in customer.orders">
        <td>{{ order.product }}</td>
        <td>{{ order.total | currency:'PLN' }}</td>
    </tr>
</table>

customersFactory.js

(function() {
    var customerFactory = function($http) {

            var factory = {};

            factory.getCustomers = function() {
               return $http.get('/customers');
            };

            factory.getCustomer = function(customerId) {
                return $http.get('/customers/' + customerId);
            };

            return factory;

    };
            customerFactory.$inject = ['$http'];
            angular.module('myApp').factory('customerFactory', customerFactory);
}());

server.js

var express = require('express'),
    app = express();

/* EXPRESS 3.0
app.configure(function () {
    app.use(express.static(__dirname, '/'));
});
*/

// EXPRESS 4.0
var env = process.env.NODE_ENV || 'development';
if ('development' == env) {
   // configure stuff here
    app.use(express.static(__dirname + '/'));
}

/*EXPRESS 3.0
app.get('/customers/:id', function(req, res) {
    var customerId = parseInt(req.params.id);
    var data = {};
    for (var i = 0, len = customers.length; i < len; i++) {
        if (customers[i].id === customerId) {
            data = customer[i];
            break;
        }
    }
    res.json(data)
});
*/

//EXPRESS 4.0
app.route('/customers/:id')
    .get(function(req, res) {
    var customerId = parseInt(req.params.id);
    var data = {};
    for (var i = 0, len = customers.length; i < len; i++) {
        if (customers[i].id === customerId) {
            data = customer[i];
            break;
        }
    }
    res.json(data)
    })

app.route('/orders/:id')
    .get(function(req, res) {
    var customerId = parseInt(req.params.id);
    var data = {};
    for (var i = 0, len = cutomers.length; i < len; i++) {
        if (customers[i].id === customerId) {
            data = customers[i][orders];
            break;
        }
    }
    res.json(data)
    })

/* EXPRESS 3.0
app.get('/customers', function(req, res) {
    res.json(customers);
});
*/

//EXPRESS 4.0
app.route('/customers')
    .get (function(req, res) {
    res.json(customers);
})


app.listen(3000);

console.log('Express listening on port 3000');


var customers = [
    { 
            id: 1,
            joined: '2005-09-07', 
            name: 'Mayweather', 
            city: 'Brooklyn', 
            orderTotal: '43.1299',
            orders: [
              {
                id: 1,
                product: 'Pencils',
                total: 9.9956
              }
            ]

          }, 
          {
            id: 2,
            joined: '2005-09-07', 
            name: 'Jason', 
            city: 'Cleveland', 
            orderTotal: '89.8933',
            orders: [
              {
                id: 1,
                product: 'iPad',
                total: 20.9956
              }
            ]  
          }, 
          {
            id: 3,
            joined: '1999-08-27', 
            name: 'Jade', 
            city: 'Wroclaw', 
            orderTotal: '77.0092',
            orders: [
              {
                id: 1,
                product: 'Pillows',
                total: 12.2311
              }
            ]
          }, 
          {
            id: 4,
            joined: '2015-09-01', 
            name: 'David', 
            city: 'Accra', 
            orderTotal: '13.8465',
            orders: [
              {
                id: 1,
                product: 'Serek',
                total: 11.4782
              }
            ]
          }, 
          {
            id: 5,
            joined: '2001-01-18', 
            name: 'Doyet',
            city: 'Paris',
            orderTotal: '23.9930',
            orders: [
              {
                id: 1,
                product: 'Serek',
                total: 11.4782
              }
            ]
          }];

如您所见，数据由json提供给客户的应用程序及其存储在数组中的订单。

从这些图片中，在浏览器中，我希望从customers中的server.js数组中获取用户名，以便它读取类似“Dave's Orders”的内容，然后实际显示订单但是这不会发生。

感谢任何人都可以提供帮助：D ...

Answer 1

好像你的服务器端有错误拼写的'客户'（缺少信件）：

for (var i = 0, len = cutomers.length; i < len; i++) {

此外，您还可以从未定义的变量中获取数据：

data = customer[i];

Answer 2

在server.js上，更改：

res.json(data);

要：

return res.json(data);

Answer 3

它肯定是服务器端错误....或者在http.get中放置确切的URL时可能会出现问题交叉检查你的java文件/服务器端源代码..什么是精确的URL和路径参数。

AngularJS route / ajax call / 500 Internal Server Error