angular js is not rendering in jade (with node.js)

Question

I facing a problem that my Angularjs is not rendering or load in my Jade layout. Somehow the stylus is working perfectly with. I counldn't find out the reason why. I'm still the beginner in learing jade, stylus and angularjs

Below are my codes:

index.jade

!!! 5
html(ng-app='ng-app')
head
    script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js')
    script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js')
    script(src='https://cdn.firebase.com/v0/firebase.js')
    script(src='http://firebase.github.io/angularFire/angularFire.js')
    script(type='text/javascript', src='angular.js')
    link(rel='stylesheet', href='style.css')
  body
    .addressBook(ng-controller='addressBook')
      h1 Address Book
      table(width='710px', border='0', cellspacing='0', cellpadding='0')
        tr.title(height='35px', align='left')
          td(width='130') Name
          td(width='180') Email
          td(width='210') Address
          td(width='80') Mobile
        tr.details(ng-repeat='contact in contacts')
          td {{contact.name}}
          td {{contact.email}}
          td(style='padding-bottom: 30px;') {{contact.address}}
          td {{contact.mobile}}

angular.js

function addressBook($scope)
{
    $scope.contacts =
    [
        {name:'Peter', email:'john_peter@asd.co', address:'No.123, Road 12/20, Street Army, 58200 KL, Malaysia', mobile:'601231231234' },
        {name:'Lim', email:'Amy@asd.co', address:'54, 13/15, Happy Garden, 58200 KL, Malaysia', mobile:'60123473534' }

    ];
}

app.js

var jade = require('jade')
 , express = require('express')
 , http = require('http')
 , app = express();
 var stylus = require('stylus');
 require('./angular.js');

app.configure(function(){
    console.log('Configuring views....');
    app.set('port', 1234);
    app.set('views', './');
    app.use(express.bodyParser());
    app.use(express.static( __dirname + '/'));
    app.set('view engine', 'jade');
});

app.get('/test', function(req,res){
    res.render('index.jade');
});

server = http.createServer(app);
server.listen(app.get('port'), function(){
}).on('error', function(err) {
   throw err;
});

thank you in advanced for everyone who helps

Answer 1

I suspect the issue you are having is that the path to your views that you have specified is wrong and you are serving them up statically.

For example, if you have your views in a sub-directory of the base directory, and you have set the base directory to be served up as static content, it will serve up the jade as static content.

What you should do is put your views in a different folder to the static content so that is a sibling not a child and this should work. If you want to post your directory structure I can have a look.