Double curly backets not displaying what I want

Question

I'm just testing the waters by pushing an AngularJS build onto Heroku but it's not displaying what I want in the double curly brackets. Not sure what the issue is, as my srcs seem to be correct. This is my index.ejs file:

<!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>

This is my app.js file:

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

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

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

And this is my server.js file:

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);
});

In the double curly brackets, it displays rantList.piece.name rather than First User (first example), and in the second example it displays {{"Hello World"}} rather than Hello World. Thanks for your time, I'm rather new with this and would appreciate any help.

use ng-bind in place of {{scopeVariable}}.. and yes it will show {{"hello"}} rather than --: hello as its it is not a $scope variable but a string. — Sheelpriy, Aug 10 '15 at 07:21
Ok, that's what I did. However, now nothing shows up. There should be no difference though should there? For the $scope variables at least because I'm not loading much at all, so there should be no delay for the {{ }} to display the variable — user5209962, Aug 10 '15 at 20:33

Christian · Accepted Answer · 2015-08-10T07:05:26.470

The very first thing you should do with any issue like this is to check your browser console for errors.

Judging by what you've said, you're probably using a Heroku domain name. Heroku domains are only accessible via https, and Chrome won't load non-https resources on https urls, so you need to make sure all your resources are https.

In your case, your angular and boostrap libraries are not being included via https. Luckily for you, these CDNs support https, so you just need to change your URLs to this:

<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>

Chances are your browser console is reporting something like this:

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.

Which is why you should always check your console for errors. Most of the time, it'll tell you exactly what the issue is.

Also, your app.js path looks wrong. /../app.js is not a valid URL. Without seeing your file structure, it's hard to say what this should actually be, but if the angular seed project is anything to go by, it should just be something like this:

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

Again, if your URL is incorrect, the console will tell you.

Ok, I changed my URLs to https. Right, I've been checking the console for errors. I've been getting two, a 404 error for app.js, and an Uncaught Error: [$injector:modulerr] for angular.min.js. Should I be putting my app.js file inside the views folder along with the index for ease of access? I've been trying out different paths and they're not working. As for the uncaught error I have no clue how to fix it. I've tried including ng-route and loading it as a dependent module, but to no avail. — user5209962, Aug 10 '15 at 20:10
@user5209962 You can put the `app.js` file wherever you like, you just need to make sure your src is correct. If you've created a `js` folder, then the src would be `"js/app.js"`. If it's in the root (like angular-seed), then it's just `"app.js"`. I don't know where you got `"/../app.js"` from but it's certainly not a valid path. In regards to your other problem, this Stack Overflow answer might help: https://stackoverflow.com/questions/21045416/angular-js-uncaught-error-injectormodulerr — Christian, Aug 11 '15 at 02:10

Double curly backets not displaying what I want

1 Answers1