Variables ExpressJS en AngularJS – Mean Stack

Estoy creando una aplicación MEAN, un problema que tengo es que quiero dar a mis usuarios algún tipo de control sobre las rutas utilizadas. Entonces quiero que mi código del lado del servidor (expressJS) establezca algunas variables en el código del lado de mi cliente.

Esencialmente quiero poder generar mi JS del lado del cliente desde el código del lado de mi servidor.

por ejemplo, en PHP probablemente haría algo en la línea de

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

No estoy hablando de vinculación, las variables solo necesitan establecerse en la carga inicial de la aplicación.

¿Cuál sería la mejor manera de lograr este tipo de integración con MEAN, de la forma más limpia posible …

Solo un otro enfoque

 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') 

que en angular puedes hacer

 angular.module('yourApp').constant('setup', config) 

Opción 1

Primero escribe un punto final de API que devolverá tus configuraciones.

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

Luego haga un $http.get para este punto final y recupere el objeto de configuración en angular app.run y almacene esta configuración en un servicio / $rootScope / config.

app.run es lo más parecido en una función angular a una función main() y se ejecutará una vez cuando se inicie la aplicación.

opcion 2

Utilice gruñido .

Si su solución no necesita obtener explícitamente las variables del lado del servidor, y si son conocidas en el momento de implementar la aplicación, puede hacer una comstackción de javascript e inyectar las configuraciones usando grunt.

Así es como he manejado personalmente esta situación.

Mi enfoque es una separación completa entre el lado del cliente y el servidor.

Un demoledor demoledor: http://plnkr.co/edit/5cFLo3wLfbL0bUnifJe5?p=preview

El servidor solo debe ocuparse de los recursos:

 app.get('/api/setup', function(req,res){ var setup = // something res.json(setup); }) 

El cliente puede diferir bootstrap después de obtener datos:

Basado en esta respuesta: uso de servicios angulares antes de bootstrap manual

 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']); }) }); 

Luego puedes inyectar la setup dentro de tu módulo:

 app.config(function(setup){ // constants can be injected to config blocks }) app.controller('ctrl',function(setup){ // do what you need }) 

Si necesita una pantalla de inicio, verifique mi respuesta: Crear una pantalla de inicio usando ng-cloak