3

I am building a MEAN application, one issue I have is that I want to give my users some sort of control over the routes used. So I want my server side code (expressJS) to set some variables in my client side code.

Essentially I want to be able to generate my client side JS from my server side code.

for example, in PHP I would probably do something along the lines of

<?php
echo <script>
echo  var test = $test
echo </script>
 ?>

I am not talking about binding, the variables only need to be set at the initial application load.

What would be the best way to accomplish this kind of integration with MEAN, in the cleanest way possible...

howrad
  • 1,066
  • 2
  • 12
  • 32
Melbourne2991
  • 11,707
  • 12
  • 44
  • 82
  • You could write an object server side and than request it in the static way.Sorry I'm busy at moment to do a working example just the idea ^^ – Whisher Jan 28 '14 at 08:07
  • as in grab it with ajax? – Melbourne2991 Jan 28 '14 at 08:16
  • No, you load it by express like a static file, you write the js file than you request it in the jade template – Whisher Jan 28 '14 at 08:19
  • take a look http://stackoverflow.com/questions/8698534/how-to-pass-variable-from-jade-template-file-to-a-script-file it's not my idea but .. – Whisher Jan 28 '14 at 08:37
  • I open an other thread http://stackoverflow.com/questions/21401998/jade-how-to-write-script-tag-with-server-side-value – Whisher Jan 28 '14 at 09:46

3 Answers3

4

Just an other approch

router.js
app.get('/myconfig', function(req, res){
    var config = {prop1:1,myarray:[1,2,3]};
    var json = JSON.stringify(config);
    res.end('var config='+json);
});
jade
script(type='text/javascript', src='/myconfig')

than in angular you can do

angular.module('yourApp').constant('setup', config)
Whisher
  • 31,320
  • 32
  • 120
  • 201
3

Option 1

First write an api endpoint that will return your configurations.

app.get('/conf', function(req, res) {
    res.send(200, {
        foo: "bar"
    });
});

Then do a $http.get to this endpoint and retrieve the configuration object on angular app.run and store this configuration in a service/$rootScope/config.

app.run is the closest thing in angular to a main() function and will run once when the application starts.

Option 2

Use grunt.

If your solution does not need to explicitly get the variables from server side, and if they are known at the time you deploy the application, you can do a javascript compile and inject the configurations using grunt.

This is how I have personally handled this situation.

ncabral
  • 2,512
  • 1
  • 19
  • 20
1

My approach is a complete separation between client & server side.

A demo plunker: http://plnkr.co/edit/5cFLo3wLfbL0bUnifJe5?p=preview

The server should only be concerned with resources:

app.get('/api/setup', function(req,res){

  var setup = // something

  res.json(setup);
})

The client can defer bootstrap after fetching data:

Based on this answer: Using angular services before manual bootstrap

angular.bootstrap().invoke(function($http){ 

    $http.get('/api/setup').then(function(res){

        // providing the fetched data to the module:
        angular.module('yourApp').constant('setup', res.data)

        // manual bootstraping
        angular.bootstrap(document,['yourApp']);

    })
});

Then you can inject setup inside your module:

app.config(function(setup){
  // constants can be injected to config blocks
})

app.controller('ctrl',function(setup){
   // do what you need
})

If you need a splash screen check my answer: Creating a splash screen using ng-cloak

Community
  • 1
  • 1
Ilan Frumer
  • 32,059
  • 8
  • 70
  • 84
  • Thanks Ilan, when you say setup can be injected anywhere does that include config and/or run blocks in angular? – Melbourne2991 Jan 28 '14 at 09:02
  • a **value provider** can be injected to run blocks/controllers/directives/services/etc but not to config blocks. If you need to inject it to config blocks then use a **constant provider** instead of a **value provider**. Check this: http://docs.angularjs.org/api/AUTO.$provide#methods_constant – Ilan Frumer Jan 28 '14 at 09:06
  • All in all I'm wondering if there is a way to write the config by jade doing like script= config – Whisher Jan 28 '14 at 09:36
  • Are you sure to have the config ready when the ctrl is called ? – Whisher Jan 28 '14 at 12:48
  • Yes, the controller would not be called before `angular.bootstrap(document,['yourApp']);` and at that point we have already declared the config as a service. just to be sure you must omit `ngApp` directive. – Ilan Frumer Jan 28 '14 at 12:52