I’ve been struck with a strange problems from last few days, and all my tweaks resulted in vain, finally got to resolve it.

Since, I’m still not much adapted to the idea of writing jade and debugging, I thought why not simply write those codes in html and then convert it to jade later on ?
So I wrote a simple form which was using a form controller to bind data and accept the form data in json format.

My code was fully working with simple html, now it was time to convert it into jade, I used html2jade.com for converting my html code, there were few indentation bugs, but I managed to rectify them.

But the bigger problem, my code stopped working with jade while the same thing was working with HTML. After few minutes of retrospection I found that the compiled HTML code was not able to find JS file of angular and formController, I tried looking for different relative path location but it simply wasn’t able to fetch the various linked file.

Issue 1 : Express not able to find linked javascript/images/stylesheet
Solution : Turns out that beside urls EVERYTHING needs to be routed properly and that includes static files too which you’re linking within your source, when I had installed Express for the first time, I saw the public folder and I knew it was used to serve static content, but never realized that all your linked files also need to go there ! so angular.js , formController.js everything needs to go there !

To make it more simple you can keep javascript/images/stylesheet within different folders, however, you need to define routes for them to, since Express doesn’t do that recursively for each folder.

Edit app.js : and add these lines,

app.use(express.static(path.join(__dirname, ‘public’)));

app.use(express.static(path.join(__dirname, ‘public’)));

app.use(express.static(path.join(__dirname, ‘public’)));

Issue 2: Angular not working with Jade when using html2jade.com

Solution: However, my code was still not working properly, after getting struck for nearly a day, I went back to the Jade code, and woops ! my html code was initialized as html<ng-app> while Jade code was converted as html(ng-app=”ng-app”), and this was the root of all events ! I simply changed it to html(ng-app) !

I’m still not sure what caused this error, since ng-app=”ng-app” is technically correct and I even saw it being advocated for IE ( read somewhere that html would fail for IE, and we need to use html<ng-app=”ng-app”> ).

I’ll test it on IE and see for the results and possibly find some solution.