Accessing OSGi config data in app.config in AngularJS

Question

I have a jsp file which is getting data from OSGi configuration in AEM, like below

<c:set var="myParam" value="${myConfig.myParam}" scope="request"/>

Now in my JS file, I am initalising my angular app like below:

var app = angular.module('myapp', []);

app.provider("$provider1", [function () {
    // Default configuration
    var config = {
        key1:   'value'
      };
    return {
        configure: function (params) {
            angular.extend(config, params);
        },
        $get: ['$rootScope', function ($rootScope) {
            return {
                config: config
            };
        }]
    };
}]);

app.config(['$authProvider', function($authProvider) {

    $authProvider.configure({
        key1:               'myCustomDataFromJSP'
    })
}]);

How can I retrieve this myCustomDataFromJSP from my JSP file? In config phase we can't access scope.

Thanks

Answer 1

I would do it in next way:

1. Add your variable as a data attribute somewhere on your page, like this:

<div id="config" data-jspvar="${myParam}"> </div>

2. Now register a constant in your angularjs app

Like this:

app.constant('myCustomDataFromJSP', (function() {

  // Define your variable
  var myCustomDataFromJSP = ...; //you can use smth like this 
  //window.document.getElementById('config').dataset.jspvar

  return myCustomDataFromJSP;
})());

3. Now you can inject this constant into your config block.

Answer 2

The above answer is good one, But it is good to have a hidden input there rather than a div in the DOM

<input type='hidden' id="config" data-jspvar="${myParam}"> </input >

app.constant('myCustomDataFromJSP', (function() { var myCustomDataFromJSP = //get the value here return myCustomDataFromJSP; })());