I'm currently experimenting with deploying an AngularJS build on Heroku, but I'm facing an issue where the content inside the double curly brackets is not displaying as expected. Despite ensuring that my sources are correct, I am unable to pinpoint the exact problem. Below is an excerpt from my index.ejs file:
<!DOCTYPE html>
<html ng-app="rantList" >
<head>
<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>
</head>
<body >
</div>
<div ng-controller = "RantController as rantList" >
<h1> {{rantList.piece.name}}</h1>
<p> {{rantList.piece.paragraph}} </p>
</div>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type = "text/javascript" src = "/../app.js"> </script>
<p>{{"Hello"}}</p>
</body>
</html>
This snippet showcases my app.js file:
(function(){
var app = angular.module('rantList', []);
app.controller('RantController', function(){
this.piece = rant;
});
var rant = {
name: 'First User',
paragraph: '....',
}
})();
And here is my server.js file:
var express = require('express');
var app = express();
// Set the port of our application
// process.env.PORT allows Heroku to set the port
var port = process.env.PORT || 8080;
// Set the view engine to ejs
app.set('view engine', 'ejs');
// Allow express to access assets in the public directory
app.use(express.static(__dirname + '/public'));
// Define the home page route
app.get('/', function(req, res) {
// Render the 'index' template using EJS
res.render('index');
});
app.listen(port, function() {
console.log('Our app is running on http://localhost:' + port);
});
In the curly brackets, instead of displaying the desired content like 'First User' and 'Hello World', it shows 'rantList.piece.name' and '{{"Hello World"}}'. Being relatively new to this, any assistance would be greatly appreciated.