双花括号不显示我想要的

Question

我只是通过将 AngularJS 构建推到 Heroku 上来试水，但它没有在双大括号中显示我想要的内容。不确定是什么问题，因为我的 src 似乎是正确的。这是我的 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（第一个示例），在第二个示例中它显示 {{"Hello World"}} 而不是 Hello World。感谢您抽出宝贵时间，我对此很陌生，非常感谢您的帮助。

Answer 1

对于此类问题，您应该做的第一件事就是检查您的浏览器控制台是否有错误。

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

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>

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

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 不是有效的 URL。没有看到你的文件结构，很难说这实际上应该是什么，但如果 angular 种子项目有什么可参考的，它应该是这样的：

<script type="text/javascript" src="app.js"></script>

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

双花括号不显示我想要的

Double curly backets not displaying what I want

javascript

heroku

ejs

angularjs