Integrating AngularJS with JSP Page

Question

Currently we are migrating our application from JSP to AngularJS. The organization decided to do it one module at a time. One of the challenge that we are encountering is passing of the user data from JSP to AngularJS (e.g. index.html).

We want that if the AngularJS module is invoked, the system will re-route to the index.html which is being managed by AngularJS.

My question is what are the possible ways that we could do to transfer the user data (e.g. username) from the JSP to index.html.

Possible scenario:

1. User login to the system
2. User go to Angular manage module.
3. System will redirect the user to index.html (AngularJS)
4. index.html will have the user credential (e.g. username and password)
5. AngularJS will manage user's action in index.html and request to a RESTful service using the user's credential.

TIA

Answer 1

Ideally I wouldn't recommend injecting username and password into index.html for angularjs controller/services to use. If the user is already authenticated by the time you load angular managed page then either inject a authorization token or setup a cookie that would be sent by the browser automatically (assuming jsp app and angular app are on the same domain)

Now talking about injecting data for angularjs to use there are two ways that I can think of (I recommend the 2nd approach as it doesn't pollute the global scope)

1. Inject it as a global and access via $window. For eg. have your server side .jsp render a script tag with a global var like

   <script type="type/javascript">
      var pass = 'whatevervalue';
   </script>
   

and access it in your controller with $window

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

2. You can use angular-preloaded to inject your variables in a script tag of type="text/preloaded" and have it available to your controller via $preloaded service.

Have your jsp output stuff like below

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

and get it in your controller like below

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

Remember to put your preloaded script before you controller script for this to work. From docs

NOTE: Your script tags must run before anything using $preloaded, so I suggest putting them in your document's head.