集成AngularJS和JSP页面

Integrating AngularJS with JSP Page

本文关键字：页面 JSP AngularJS 集成      更新时间：2023-09-26

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

我们希望当AngularJS模块被调用时，系统会重新路由到由AngularJS管理的index.html。

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

可能的场景:

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

TIA

理想情况下，我不建议将username和password注入index.html以供angularjs控制器/服务使用。如果用户在加载angular托管页面时已经通过了身份验证，那么要么注入一个授权令牌，要么设置一个cookie，由浏览器自动发送(假设jsp应用和angular应用在同一域)

现在说到为angularjs注入数据，我能想到的有两种方法(我推荐第二种方法，因为它不会污染全局作用域)

  1. 作为全局注入，通过$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之前运行，所以我建议把它们放在文档的头部。

    • 相关文章：