I'm currently following a tutorial on creating single page applications using the MEAN stack. So far, I have successfully rendered the index.jade view. However, I encountered an issue when trying to route to a partial view as the DOM of the page does not render the view. Maybe providing the code will help clarify the problem
server.js
var express = require("express");
var stylus = require("stylus");
var logger = require("morgan");
var bodyParser = require('body-parser');
var env = process.env.NODE_ENV = process.env.NODE_ENV || "development";
var app = express();
function compile(str, path) {
return stylus(str).set('filename', path);
}
app.set('views', __dirname + '/server/views');
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(bodyParser());
app.use(stylus.middleware ({
src: __dirname + "/public",
compile: compile
}
));
app.use(express.static(__dirname, 'public'));
app.get('/partials/:partialPath', function (req, res) {
res.render('partials/'+ req.params.partialPath);
})
app.get('*', function (req, res) {
res.render('index');
});
var port = 3030;
app.listen(port);
console.log("Listening on port number " + port);
layout.jade
doctype
html
head
link(href="/favicon.ico", rel="shortcut icon", type="image/x-icon")
link(rel="stylesheet", href="/css/bootstrap.css")
link(rel="stylesheet", href="/vendor/toastr/toastr.css")
link(rel="stylesheet", href="/css/site.css")
body(ng-app='app')
h1 Layout
block content
include scripts
index.jade
extends ../includes/layout
block content
section.content
div(ng-view)
h2 index.jade
app.js
angular.module("app", ["ngResource", "ngRoute"]);
angular.module('app').config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/partials/main',
controller: 'mainCtrl'
})
});
angular.module('app').controller('mainCtrl', function ($scope) {
$scope.myVar = "Hello Anglularz";
});
main.jade
extends ../../includes/layout
block content
section.partial
h1 This is a partial
h2 {{ myVar }}
I am unsure about what's causing the issue. It seems like there might be a problem with the routing setup. If possible, could someone provide an explanation of how the templateUrl and app.get routing work together?