WebDynpro HTMLIsland integration with AngularJS

[former_member39002]

Hi all,

I have been trying to integrate (embedd) some nice looking component in AngularJs into an WebDynpro HTMLIsland, but it seems that the way that SAP WebDynpro App loads the resources does not really work with Angular.

I am loading all the libraries in a correct order (as it is done locally) but I am getting the error that some module ('MyApp' for example) is not found which actually is the name of the app that should work with the controll ( <div ng-app="MyApp" ng-controller="Ctrl"> ) and that I am separately instantiating in a js code after everything is loaded.

I have successfully integrated things done in JQuery and thought that Angular shouldn't be much different.

Has anyone successfully managed to integrate Angular with HTMLIsland?

Any idea is welcome.

Thanks in advance,

Ilina

[former_member39002 · Accepted solution]

Hi all,

After some digging in the Angular documentation I found the way how to make it initialize the App correctly so that it can work with the HTMLIsland from SAP.

I did it with manual initialization and without adding the ng-app tag in the HTML on the initial loading and initializing the app in the document.ready event.

angular.element(document).ready(function() {
  angular.bootstrap(document, ['myApp']);
   });

If you have the same requirements have a look here: https://docs.angularjs.org/guide/bootstrap.

Hope this helps someone.

I would still like to hear it from others which approach they used.

Regards,

Ilina