• Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.
  • The forums have been upgraded with support for dark mode. By default it will follow the setting on your system/browser. You may override it by scrolling to the end of the page and clicking the gears icon.

Nodejs single page application

Joined
May 27, 2008
Messages
3,629 (0.58/day)
System Name Ultra 64
Processor NEC VR4300 (MIPS R4300i)
Motherboard proprietary design
Cooling Fanless aircooled
Memory 4.5MB 250 MHz RDRAM
Video Card(s) 62.5 MHz Reality Coprocessor
Storage 32 - 512 Mbit ROM Cartridge
Display(s) 720x576
Case Clear Blue Funtastic
Audio Device(s) 16-bit CD quality
Power Supply proprietary design
Mouse N64 mouse for use with N64DD
Keyboard N64 keyboard for use with N64DD
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:

Code:
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:

Code:
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:

Code:
//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.
 
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.
 
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.
 
Back
Top