如何使用用户对象引导 Express / Angular 应用程序？答案

【问题标题】：How to bootstrap an Express / Angular app with a user object?如何使用用户对象引导 Express / Angular 应用程序？
【发布时间】：2015-05-24 10:59:09
【问题描述】：

在初始请求期间，如何在 Express 后端加载用户对象（或任何对象），然后在加载后立即填充 Angular 应用程序？我有一个要向其发送 JWT 令牌的应用程序。我已经成功验证了会话并加载了应用程序需要的初始数据（用户对象等）。我只是不知道如何使用 Angular 应用程序加载它。

【问题讨论】：

【解决方案1】：

将其嵌入服务器端的页面中，可能使用模板引擎。

【讨论】：

当然，我使用的是 Jade / Express，所以我可以在页面中添加任何内容。我的问题是我不知道如何将它从页面中取出并与 Angular 一起使用。
@G.Deward 如果你将它嵌入到页面中，你可以在 Angular 控制器/服务/任何东西中使用 Angular 将其从 dom 中解析出来：angular.element('#my-server-data-element').html() 或 .attr('some-field')。它很脏，如果您想对用户隐藏任何内容，我不会这样做，因为他们可以在页面源中轻松找到它。
@G.Deward 您可以按照 meanjs 采用的方法并将其声明为窗口范围内的变量。然后通过服务注入它。因此，如果您将它嵌入到您的页面中，例如 var user = {json}，您可以将 $window 注入到 Authentication 服务中，然后从那里返回 $window.user 作为属性。 github.com/meanjs/mean/blob/master/public/modules/users/…

【解决方案2】：

最简单的事情是将 JSON 对象作为全局对象嵌入到呈现的页面中。如果你使用 Jade，它看起来像这样

- hello = {"hello": 234}
script(type="text/javascript")
  != 'window.hello =' + JSON.stringify(hello) + ';'

所以现在该对象在window.hello 上全局可用，您可以通过<script src="..."></script> 内的角度代码访问它

注意：我强烈建议不要这样做，它可能导致意大利面条代码。即使听起来很美味，也很难维护。相反，我建议您将 Angular 应用程序与服务器端渲染完全分离。但是，如果您只是将这种技术用于用户信息，我想这还不错®。

编码愉快！

【讨论】：

【解决方案3】：

在您的模板（生成的服务器端）中，您可以添加与此类似的内容

<script>
angular.module('myConfig', [])
  .value('jwt', {...});
</script>

然后您可以将 myConfig 作为 Angular 应用程序的依赖项注入，并且您可以访问应用程序中的 jwt 值

angular.module('myApp', ['myConfig'])
  .factory('myFactory', function($http, jwt){
    return {};
    });

【讨论】：