How to get partials to show when using ui-router with expressjs?

Question

I have a simple AngularJS app with a plunkr here .

I'd like to put the app into server running expressjs. Everything seems to be working except the partials don't render and there's no error displayed.

When I go to localhost:3000/views/base.html I see the correct page which means it's being served correctly by express. Clicking the links at the top of the page correctly changes the url. The thing that makes me think it's an AngularJS issue is that the {{teams}} binding in the layout is blank, like AngularJS isn't rendering it at all.

The express directory is:

server.js
views/
 |- layout.jade
public/
 |- javascripts
  |- angularApp.js
 |- views
  |- base.html
  |- check.html
routes/
 |- index.js

The contents of the individual files are below.

server.js

// includes

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');

var routes = require('./routes/index');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));


app.use('/', routes);

// error handlers
// this is all

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;

angularApp.js

var app = angular.module('myApp', ['ui.router'])
  .config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider){
      $stateProvider
        .state('home', {
          url: '/',
          templateUrl: "../views/base.html",
          controller: "MainCtrl"
        })
        .state('check', {
            url: '/check',
            templateUrl: "../views/check.html",
            controller: "CheckCtrl"
        });

      $urlRouterProvider.otherwise('/');

    }
  ])
  .controller('MainCtrl', ['$scope', function($scope){
    $scope.teams = "this is main";
  }])
  .controller('CheckCtrl', ['$scope', function($scope){
    $scope.teams = "this is check"
  }]);

layout.jade

doctype html(lang='en')
html
  //- linked stylesheets, works fine
  include ./partials/head.jade

  body(ng-app='myApp')
    nav#big-bar.navbar(role='navigation')
      .container-fluid
        .navbar-header
          a(ui-sref='home')
            p.brand.navbar-brand Site.com

        div
          ul.nav.navbar-nav                       
            li#check
              a(ui-sref='check') Check

    .mid
      p  title here? {{teams}}
      h2= title 

      div(ui-view)

    //- linked js, no missing stuff errors
    include ./partials/scripts.jade

index.js (routes)

var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
  res.render('layout', {title: 'Register or something'});
});

module.exports = router;

Answer 1

It has been a while since your original post, but I am answering in case someone else has this problem. I had a similar problem, although I am using ejs instead of jade. I moved my partials out of the views directory and into the public directory. That has resolved the issue.

Answer 2

template url should just start with "/" not "../" . Please try

templateUrl: "/views/base.html"

Answer 3

That answer is perfect.. with Express and Angular, move your rest of the code from views folder to public folder.. That works..

or the best way is add the following to your app.js

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