AngularJS RouteProvider and ExpressJS sendfile

Question

In my Angular app, I'm trying to render partials that load into the index page when a user clicks a link. It worked fine before with the following code:

//app.js in Angular
angular.module('myApp', [
  'ngSanitize',
  'ngRoute',
  ...
]).
config(['$routeProvider', '$locationProvider', '$sceDelegateProvider', function($routeProvider, $locationProvider, $sceDelegateProvider) {
  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MainController'});
  $routeProvider.when('/File/:fileID', {templateUrl: 'partials/currentFile.html', controller: 'FileController', controllerAs: 'file'});
  $routeProvider.otherwise({redirectTo: '/view1'});
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://www.url.com/**']);
  $locationProvider.html5Mode(true);
}]);

But when I add Express, it doesn't work:

var express = require("express");
var logfmt = require("logfmt");
var app = express();

app.use(logfmt.requestLogger());

app.use(express.static(__dirname + '/app'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));

app.get('*', function(req, res) {
  res.sendfile('./app/index.html');
});

This works fine if I just want to display the index page. When I add the following code though, it displays the plain HTML (of the partial), but without the CSS or Javascript.

app.get('/partials/currentFile.html', function(req, res) {
    res.render('./app/partials/currentFile.html');
});

How do I go about rendering a partial with Express in a way that works with Angular? I've tried looking at the Express api for get(), render and sendfile, but they weren't that helpful in my situation. Other users have asked a similar question on here before, but they usually involve another file that Express routes to and I'm wondering if I can do it without adding any extra files since it's already an issue with adding just a file to include Express.

The currentFile.html doesn't load any CSS or Javascript itself. Before I added Express, it was a partial that was loaded in index.html, which loaded all the extras.

Any help is appreciated. Thank you

When I try to click a link that's supposed to render a partial, it doesn't render it. It just reloads the index page and I'm wondering how to make it work. — user2669464, May 31 '14 at 00:18
This might be a long shot, but I think it's because you're not rooting your templateUrl attribute: `partial/currentPage.html` should be `/partial/currentPage.html` in your app configuration. To me, your express configuration looks like it should work without the fix you're trying to put in place. — Mike Quinlan, May 31 '14 at 00:23

score 0 · Accepted Answer · answered May 31 '14 at 05:09

I didn't fix the problem directly, but I worked around it. The problem was that I wanted to render a partial onto the index page. The overarching goal of the app is a single-page application, so in the end, it's just one page that matters.

It would have been nice to have different partials to render for testing, but alas nobody seems to know either what I'm asking or I'm complicating the issue. Either way, I've found a way around it by just getting rid of all the other partials and just redirecting all URL requests to the single page app.

config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MainVideoController'});
  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
  $routeProvider.when('/file', {templateUrl: 'partials/currentFile.html', controller: 'FileController', controllerAs: 'file'});
  $routeProvider.otherwise({redirectTo: '/file'});
...

Note that the partials view1 and view2 DO NOT work when trying to visit domain.com/view1 or /view2.

AngularJS RouteProvider and ExpressJS sendfile

1 Answers1