Question

首先让我说明我从未构建过自己的应用并将其部署到Heroku。现在我正在尝试，我已经调试了一些问题，但现在似乎我的应用程序正在加载没有任何错误（根据控制台），但我的角度应用程序主页是完全空白。

在<ui-view></ui-view>标记之外添加一些非角度代码后，加载纯HTML（<h1>Working?</h1>），但不加载角度。

<html>
  <head>
    <title>EDGE !</title>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="/bower_components/angular-trello/dist/angular-trello.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
    <script src="/javascripts/angularApp.js"></script>
        <script src="https://api.trello.com/1/client.js?key=87b220f4687be5f86544b866eef24b3e"></script>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/0.1.0/ng-google-chart.js" type="text/javascript"></script>

        <link rel="stylesheet" href="/stylesheets/style.css">
  </head>

  <body ng-app="EDGE-Trello">
        <h1>Working?</h1>
        <ui-view></ui-view>
  </body>
</html>

我缺少部署的内容吗？当我在Chrome DevTools中查看网络时，看起来好像所有内容都加载了一个项目，当我输入heroku logs时显示此错误：

at=error code=H12 desc="Request timeout" method=GET path="/diseases" host=edge-trello.herokuapp.com request_id=4b16315c-b87e-4ef7-b412-5345881df031 fwd="172.85.41.122" dyno=web.1 connect=0ms service=30008ms status=503 bytes=0

...此资产在本地加载没有问题，我不知道为什么现在出现问题。

以下是导致此问题的路线：

var mongoose = require('mongoose');
var express = require('express');
var router = express.Router();
var Disease = mongoose.model('Disease');

router.post('/diseases', function(req, res, next) {
  var disease = new Disease(req.body);

  disease.save(function(err, diseases){
    if(err){ return next(err); }

    res.json(diseases);
  });
});

...和我的disease工厂：

app.factory('diseases', [
    '$http',
    function($http){

        var o = {
            diseases: []
        };

        o.show = function(disease) {
            return $http.get('/diseases/', {id : disease._id})
                .success(function(data) {
                    console.log(disease.name);
            });
        };

        o.create = function(diseases) {
            return $http.post('/diseases', diseases).success(function(data){
                o.diseases.push(data);
                console.log(data);
            });
        };

        o.getAll = function() {
            return $http.get('/diseases').success(function(data){
                angular.copy(data, o.diseases);
//              console.log(data);
            });
        };

        o.destroy = function(disease) {
            return $http.delete('diseases/' + disease._id).success(function(data){
                console.log("Disease " + disease.name + " has been removed!");
                o.getAll();
            });
        };

        return o;
    }
]);

..和我的配置功能：

app.config([
    'TrelloApiProvider', 
    '$stateProvider',
    '$urlRouterProvider',
    function(TrelloApiProvider, $stateProvider, $urlRouterProvider) {

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: '/javascripts/home/_home.html',
            controller: 'MainCtrl',
            resolve: {
                diseasePromise: ['diseases', function(diseases){
                    return diseases.getAll();
                }]
            }
        })

非常感谢任何部署方面的帮助！

Answer 1

检查您的网络控制台，您呼叫/diseases，返回500服务器错误。阅读你的代码，你应该为这个电话提供一些id。

AngularJS + Node：部署到Heroku时的空白页面

1 个答案: