CODEWITHSUNDEEP
javascriptnode.jsangularjsexpressangular-routing
Harshit Laddha
Harshit Laddha

Reputation: 2124

Angular js Routes, 500 internal server error

I have a directory structure like this - 

-project
  -public
     -app
        -app.js ( angular app module )
  -server
     -server.js ( node root js file )   
     -includes 
        -layout.jade
        -scripts.jade
     -views
        -index.jade
        -partials
           -main
              -main.jade
              -about.jade
              -about-vid.jade
              footer_main.jade
           -account
              -login.jade

Now when i try and use partials all in one 'partials' directory everything works fine, but when i try to organize them in seperate directories i get internal server error . here is the normal relevant code - app.js - 

angular.module('app',['ngResource','ngRoute']);

angular.module('app').config(function($routeProvider,$locationProvider){
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/', { templateUrl: '/partials/main', controller: 'mainCtrl'});
});

server.js code - 

app.use(express.static(__dirname + '/public'));
app.get('/partials/:partialPath',function(req,res){
    res.render('partials/' + req.params.partialPath);
});

app.get('*',function(req,res){
    console.log(mongoMessage);
    res.render('index');
});

index.jade rendered by server.js - 

include ../includes/layout
.header-white.navbar.navbar-default.navbar-static-top
    .container
        .navbar-header
            button(data-target=".navbar-collapse",data-toggle="collapse",class="navbar-toggle btn navbar-btn")
                span.icon-bar
                span.icon-bar
                span.icon-bar
            a(href="/",class="navbar-brand")
                img(alt="CampuStop",id="logoimg",src="/img/logo_big.png",style="height:74px")
        div(ng-include="'/partials/login'")
block main-content
    div(ng-view)
div(ng-include="'/partials/footer_main'")

include ../includes/scripts

But if i try to organize them and make the following changes i get 500 internal server error in console for my login, app.js - change template url to /partials/main/main/

angular.module('app').config(function($routeProvider,$locationProvider){
        $locationProvider.html5Mode(true);
        $routeProvider
            .when('/', { templateUrl: '/partials/main/main', controller: 'mainCtrl'});
    });

index.jade - change the include urls to respective directories : 

div(ng-include="'/partials/account/login'")
div(ng-include="'/partials/main/footer_main'")

server.js - replace :partialParams by *

app.get('/partials/*',function(req,res){
        res.render('partials/' + req.params);
    });

Can any one tell me where i am going wrong or what other information should i provide?

Upvotes: 1

Views: 15067

Answers (2)

Harshit Laddha
Harshit Laddha

Reputation: 2124

I had to change the 

app.get('/partials/*',function(req,res){
        res.render('partials/' + req.params);
    });

to - 

app.get('/partials/*',function(req,res){
        res.render('partials/' + req.params['0']);
    });

as when i printed the req.params in console i found it returning a object instead of the path which actually created the routing and rendering the partials incorrectly

Upvotes: 1

cyberwombat
cyberwombat

Reputation: 40134

When Angular requests a template it sets the base path relative to the location of the tempalte file. Consequently any calls to partials are now being called from a different directory relative to the parent template. You will want to adjust your partial paths to account for this.

Perhaps something like:

div(ng-include="'../partials/account/login'")

You are getting the 500 error because Angular cannot find the partial - it's probably trying to get main/partials/account/login

Upvotes: 1

Related Questions