Question

我只是通过将AngularJS构建推送到Heroku来测试水域，但它没有在双花括号中显示我想要的内容。不确定是什么问题，因为我的srcs似乎是正确的。这是我的index.ejs文件：

<!DOCTYPE html>
<html ng-app="rantList" >
<head>

<!--<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">    </script>

<!--<link rel = "stylesheet" type = "text/css" href = "/node_modules/bootstrap/dist/css/bootstrap.min.css"/>-->
</head>
<body >
</div>
<div ng-controller = "RantController as rantList" >
<h1> {{rantList.piece.name}}</h1>
<p> {{rantList.piece.paragraph}} </p>

</div>


<!--    <script type = "text/javascript" src =     "/node_modules/angular/angular.min.js"></script>-->
<script src=     "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type = "text/javascript" src = "/../app.js"> </script>
<!--<script src = "https://code.angularjs.org/1.4.3/angular-route.js"> </script>-->
<p>{{"Hello"}}</p>
</body>
</html>

这是我的app.js文件：

(function(){
var app = angular.module('rantList', []);

app.controller('RantController', function(){
  this.piece = rant;
});

var rant = {
  name: 'First User',
  paragraph: '....',
}
})();

这是我的server.js文件：

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

// set the port of our application
// process.env.PORT lets the port be set by Heroku
var port = process.env.PORT || 8080;

// set the view engine to ejs
app.set('view engine', 'ejs');

// make express look in the public directory for assets (css/js/img)
app.use(express.static(__dirname + '/public'));

// set the home page route
app.get('/', function(req, res) {

// ejs render automatically looks in the views folder
res.render('index');
});

app.listen(port, function() {
console.log('Our app is running on http://localhost:' + port);
});

在双花括号中，它显示rantList.piece.name而不是First User（第一个示例），在第二个示例中，它显示{{＆＃34; Hello World＆＃34;}}而不是Hello World。感谢您的时间，我对此很新，并感谢任何帮助。

Answer 1

对于任何此类问题，您应该首先检查浏览器控制台是否存在错误。

根据您的说法判断，您可能正在使用Heroku域名。 Heroku域只能通过https访问，Chrome不会在https网址上加载非https资源，因此您需要确保所有资源都是https。

在您的情况下，您的angular和boostrap库不包含在https中。幸运的是，这些CDN支持https，因此您只需将URL更改为：

Mixed Content: The page at 'xxx' was loaded over HTTPS, but requested an insecure script 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'. This request has been blocked; the content must be served over HTTPS.

您的浏览器控制台可能会报告如下内容：

app.js

这就是为什么你应该经常检查你的控制台是否有错误。大多数时候，它会告诉你究竟是什么问题。

此外，您的/../app.js路径看起来有误。 <script type="text/javascript" src="app.js"></script>不是有效的网址。在没有看到你的文件结构的情况下，很难说这实际上应该是什么，但如果角度种子项目是任何东西，它应该是这样的：

 $.ajax({
   type: 'get',
   url: eventsListPath,
   dataType : "json",
   data: {},
   success: function (data) {
       $('#eventInformation').html(data.table);
       alert(data.table);
   }
});

同样，如果您的网址不正确，控制台会告诉您。

双卷曲的支持不显示我想要的东西

1 个答案: