Nodejs single page application

[ste2425]

Hi all,

I suggest you get a brew before reading this it might be a big one

Right ive made a deployment utility for work using nodejs. It's all running grand but id like to make full use of socket.io, toast etc which i can't the way i am and implement real time information.

It's currently build using express v3, and jade templates server side with angular client side.

At the moment i have urls or routes for every page and use an anchor tag to hit them.

My app or server.js (most common names) looks like this:

var app = express()

//All various app.use() etc

//many app.get's for every page
app.get('/page1', function(req, res){
  res.render('page1');
});

//some app.post's to send data and retrieve data
app.post('./getdata'), function(req,res){
  res.send(data);
});

My jade templates are organsied with a single master page called layout.jade then various partial pages which extend the layout page which contain all the data for each site page.

the layout.jade looks like this:

doctype html
html
    head
        script(src="#")
        //all my scripts

body
      div(id="menu")
          a(href="/page1") go to page 1
          //My menu

      block content
//this block content is where each partial thats loaded extends the layout

then my partials of which there is one for each page:

//fileName: page1.jade thats res.render() knows which jade file to render
extends layout

block content
    div
          p page content

Within my partials i include all my javascript files needed for that specific page like angularjs controllers services etc.

This set-up works great except every time i hit a url it not only renders the partial but re renders the layout. Which is not what i want. Im after a way i can render the layout once when the page first loads then dynamically render each partial to extend the layout. With each partials angularjs controller working etc.

I know ill probably need to perform ajax calls and ill set up an angular controller within the layout and its scope purely being in the menu div to deal with requesting the partials and rendering them but how would i accomplish this? I hope this all makes sense and ive explained it properly. If not please ask me to expand on anything.

 

[Maelstrom]

I've never used Angular.js before, but if it is anything like Backbone.js, it should have some sort of router. You should be able to map functions to your routes to display the appropriate partials when the user goes to various urls.

 

[ste2425]

I've never used Angular.js before, but if it is anything like Backbone.js, it should have some sort of router. You should be able to map functions to your routes to display the appropriate partials when the user goes to various urls.

Spot on, used angularjs's '$routeProvider' to render the returned template into the ng-view directive which ive placed into the layout to replace the block content part. I currently can't include any page specific javascript within the template. If i include it all at the start in the layout.jade then everything works great and all the partials angularjs controllers are instantiated.

Thanks easier then i expected.