I am using angular and express for an app, but I can't get the client routing to render a partial... My app structure is:
-project
-public
-javascripts
-app.js ( angular app module )
-controllers
-LoginCtrl.js
-server.js
-views
-index.ejs
-partials
-login.ejs
In my server.js file, I handle the routing which loads my index file:
app.get('/', function(req, res){
res.render('index');
});
// This callback from router produces the error
app.get('/partials/:name', function (req, res) {
var name = req.params.name;
res.render('partials/' + name);
});
The client side routing is handled:
var app = angular.module('myApp', ['ngRoute']).
config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/login", { templateUrl: "partials/login.ejs", controller: "LoginCtrl" })
.otherwise({ redirectTo: "/login" });
}
]);
My index.ejs file has all the necessary includes, are the includes not ordered properly?
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div ng-view></div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="javascripts/app.js"></script>
<script src="javascripts/services.js"></script>
<script src="javascripts/controllers.js"></script>
<script src="javascripts/filters.js"></script>
<script src="javascripts/directives.js"></script>
<script src="javascripts/controllers/LoginCtrl.js"></script>
</body>
</html>
Is the app not configured properly?
app.configure(function() {
// set up our express application
app.use(express.logger('dev')); // log every request to the console
app.use(express.cookieParser()); // read cookies (needed for auth)
app.use(express.bodyParser()); // get information from html forms
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});
I have tried with and without the html5Mode set, but neither seem to work. I get this error both ways:
GET http://localhost:5000/partials/login.ejs 500 (Internal Server Error) angular.js:8495
(anonymous function) angular.js:8495
sendReq angular.js:8291
$http.serverRequest angular.js:8025
wrappedCallback angular.js:11498
wrappedCallback angular.js:11498
(anonymous function) angular.js:11584
Scope.$eval angular.js:12608
Scope.$digest angular.js:12420
Scope.$apply angular.js:12712
(anonymous function) angular.js:1419
invoke angular.js:3918
doBootstrap angular.js:1417
bootstrap angular.js:1431
angularInit angular.js:1344
(anonymous function) angular.js:21817
trigger angular.js:2550
(anonymous function) angular.js:2823
forEach angular.js:325
eventHandler