ExpressJS variables in AngularJS - Mean Stack

Question

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...

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
– Whisher, Commented Jan 28, 2014 at 8:07
No, you load it by express like a static file, you write the js file than you request it in the jade template — Whisher
– Whisher, Commented Jan 28, 2014 at 8:19
take a look stackoverflow.com/questions/8698534/… it's not my idea but .. — Whisher
– Whisher, Commented Jan 28, 2014 at 8:37
I open an other thread stackoverflow.com/questions/21401998/… — Whisher
– Whisher, Commented Jan 28, 2014 at 9:46

Whisher · Accepted Answer · 2014-01-28 11:00:38Z

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)

answered Jan 28, 2014 at 11:00

Whisher

32.9k34 gold badges129 silver badges204 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ilan Frumer Over a year ago

maybe you should set res.set('Content-Type', 'text/javascript');

ncabral · Accepted Answer · 2014-01-28 08:53:02Z

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.

Community · Accepted Answer · 2017-05-23 11:50:35Z

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

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Jan 28, 2014 at 8:58

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

5 Comments

Melbourne2991 Over a year ago

Thanks Ilan, when you say setup can be injected anywhere does that include config and/or run blocks in angular?

Ilan Frumer Over a year ago

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: docs.angularjs.org/api/AUTO.$provide#methods_constant

Whisher Over a year ago

All in all I'm wondering if there is a way to write the config by jade doing like script= config

Whisher Over a year ago

Are you sure to have the config ready when the ctrl is called ?

Ilan Frumer Over a year ago

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.

Collectives™ on Stack Overflow

ExpressJS variables in AngularJS - Mean Stack

3 Answers 3

1 Comment

Comments

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

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

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

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related