I will explain the issue in as much detail as possible.
I am attempting to use AngularJS with Express and am running into trouble. I wish to display HTML files (not using a templating engine). These HTML files will have AngularJS directives.
However, I am not able to display a simple HTML file itself!
The directory structure is as follows:
Root
---->public
-------->js
------------>app.js
------------>controllers.js
---->views
-------->index.html
-------->partials
------------>test.html
---->app.js
The contents of public/js/app.js
is:
angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl: 'partials/test.html', controller: IndexCtrl});
$routeProvider.otherwise({redirectTo: '/'});
}]);
The contents of public/js/controllers/js
is:
function IndexCtrl() {
}
The contents of the body tag in views/index.html
is:
<div ng-view></div>
That's it. The expectation is that AngularJS will substitute the above view with test.html - views/partials/test.html
whose contents are:
This is the test page!
enclosed within the paragraph tags. That's it!
Finally, the contents of ROOT/app.js
file is:
var express = require('express');
var app = module.exports = express();
// Configuration
app.configure(function(){
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.static(__dirname + '/public'));
app.use(app.router);
});
app.configure('development', function(){
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});
app.configure('production', function(){
app.use(express.errorHandler());
});
// routes
app.get('/', function(request, response) {
response.render('index.html');
});
// Start server
app.listen(3000, function(){
console.log("Express server listening on port %d in %s mode", this.address().port, app.settings.env);
});
Now, when I do $node app.js
in the root folder, the server starts without any error. However if I go to localhost:3000
in the browser, the URL changes to localhost:3000/#/
and the page gets stuck / freezes. I can't even check the console log in Chrome!
This is the problem that I am facing. Any clue about what I am doing wrong?
Finally figured it out - after many intense moments of hair pulling!!
The reason why the page freezes is because (explained step by step):
However, you can see that express or rather app.js does not have a handler for this GET request. That is, the following code is missing:
app.get('partials/:name', function(request, response) {
var name = request.params.name;
response.render('partials/' + name);
});
inside app.js
of the ROOT directory. Once I add this code, the page renders as expected.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With