AngularJS中的ExpressJS变量 - 平均堆栈

Posted

技术标签:

【中文标题】AngularJS中的ExpressJS变量 - 平均堆栈【英文标题】:ExpressJS variables in AngularJS - Mean Stack 【发布时间】:2014-02-19 09:22:46 【问题描述】:

我正在构建一个 MEAN 应用程序,我遇到的一个问题是我想让我的用户对所使用的路由进行某种控制。所以我希望我的服务器端代码(expressJS)在我的客户端代码中设置一些变量。

基本上我希望能够从我的服务器端代码生成我的客户端 JS。

例如,在 php 中我可能会做一些类似的事情

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

我不是在谈论绑定,变量只需要在初始应用程序加载时设置。

以最简洁的方式完成与 MEAN 的这种集成的最佳方式是什么...

【问题讨论】:

您可以编写一个对象服务器端,然后以静态方式请求它。对不起,我现在正忙于做一个工作示例,只是这个想法^^ 就像用 ajax 抓取它一样? 不,你像静态文件一样通过express加载它,你写的js文件比你在jade模板中请求它 看看***.com/questions/8698534/…这不是我的主意,但是.. 我打开另一个线程***.com/questions/21401998/… 【参考方案1】:

只是另一种方法

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

比在角度上你可以做到

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

【讨论】:

也许你应该设置res.set('Content-Type', 'text/javascript');【参考方案2】:

选项 1

首先编写一个将返回您的配置的 api 端点。

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

然后对该端点执行$http.get 并检索角度app.run 上的配置对象并将此配置存储在服务/$rootScope/config 中。

app.run 是最接近 main() 函数的 Angular 函数,将在应用程序启动时运行一次。

选项 2

使用grunt。

如果您的解决方案不需要从服务器端显式获取变量,并且在您部署应用程序时这些变量是已知的,您可以使用 grunt 进行 javascript 编译和注入配置。

这就是我个人处理这种情况的方式。

【讨论】:

【参考方案3】:

我的方法是完全分离客户端和服务器端。

一个演示插件:http://plnkr.co/edit/5cFLo3wLfbL0bUnifJe5?p=preview

服务器应该只关心资源:

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

  var setup = // something

  res.json(setup);
)

客户端可以在获取数据后延迟引导:

基于此答案: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']);

    )
);

然后你可以在你的模块中注入setup

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

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

如果您需要启动画面,请查看我的回答: Creating a splash screen using ng-cloak

【讨论】:

感谢 Ilan,当您说 setup 可以注入任何包括配置和/或运行块的地方时? 一个 value provider 可以被注入来运行块/控制器/指令/服务/等,但不能用于配置块。如果您需要将其注入到配置块中,请使用 constant provider 而不是 value provider。检查这个:docs.angularjs.org/api/AUTO.$provide#methods_constant 总而言之,我想知道是否有一种方法可以通过 Jade 编写配置,如 script=config 你确定在调用 ctrl 时已经准备好配置了吗? 是的,控制器不会在angular.bootstrap(document,['yourApp']); 之前被调用,此时我们已经将配置声明为服务。只是为了确保您必须省略 ngApp 指令。

以上是关于AngularJS中的ExpressJS变量 - 平均堆栈的主要内容,如果未能解决你的问题,请参考以下文章

使用 Expressjs + JWT + Angularjs 的回调问题

AngularJS、Node.js、ExpressJS 应用程序集成问题

从 angularjs 连接到 expressjs 应用程序

ExpressJS/AngularJS:将 JSON 对象转换为字符串

ExpressJS - 为通用 Nuxt 应用程序和 AngularJS SPA 提供服务

访问 ExpressJS/ConnectJS 中间件中的“app”变量?