将 AngularJS 与 JSP 页面集成答案

【问题标题】：Integrating AngularJS with JSP Page将 AngularJS 与 JSP 页面集成
【发布时间】：2015-08-12 04:01:43
【问题描述】：

目前我们正在将我们的应用程序从 JSP 迁移到 AngularJS。该组织决定一次只做一个模块。我们遇到的挑战之一是将用户数据从 JSP 传递到 AngularJS（例如 index.html）。

我们希望，如果调用 AngularJS 模块，系统将重新路由到由 AngularJS 管理的 index.html。

我的问题是我们可以采取哪些可能的方式将用户数据（例如用户名）从 JSP 传输到 index.html。

可能的情况：

用户登录系统
用户转到 Angular 管理模块。
系统会将用户重定向到 index.html (AngularJS)
index.html 将包含用户凭据（例如用户名和密码）
AngularJS 将在 index.html 中管理用户的操作，并使用用户的凭据向 RESTful 服务请求。

TIA

【问题讨论】：

你有机会检查我的答案吗？

标签： java javascript angularjs jsp rest

【解决方案1】：

理想情况下，我不建议将username 和password 注入index.html 以供angularjs 控制器/服务使用。如果在您加载 Angular 托管页面时用户已经通过身份验证，则注入授权令牌或设置将由浏览器自动发送的 cookie（假设 jsp 应用程序和 Angular 应用程序位于同一域中）

现在谈论为 angularjs 注入数据以使用，我可以想到两种方法（我推荐第二种方法，因为它不会污染全局范围）

将其作为全局注入并通过$window 访问。例如。让您的服务器端 .jsp 呈现一个带有全局变量的脚本标记，例如
```
<script type="type/javascript">
   var pass = 'whatevervalue';
</script>
```

并使用$window在您的控制器中访问它

    angular.module('yourapp').controller('YourCtrl', $window){
        console.log($window.pass);
    }

您可以使用angular-preloaded 将变量注入type="text/preloaded" 的脚本标记中，并通过$preloaded 服务将其提供给您的控制器。

让你的 jsp 输出如下内容

<script type="text/preloaded">
{
  "data": "point"
}
</script>

然后像下面这样在你的控制器中获取它

angular.module('app', ['gs.preloaded'])
.controller('SomeCtrl', function ($preloaded) {
    // do something with $preloaded.
    $preloaded; // => { data: "point", another: { point: "of data" } }
});

请记住将预加载的脚本放在控制器脚本之前，这样才能正常工作。来自文档

注意：您的脚本标签必须在使用 $preloaded 的任何内容之前运行，因此我建议将它们放在文档的头部。

【讨论】：