0

So, following on from this question

I now have my module both in bower and npm, I can import it fine to my project and declare it in app.module, even attempt to use it in my controller:

index.html:

<script src="bower_components/google-closure-library/closure/goog/base.js"></script>

app.module.js:

angular
        .module('drugQualityDataManagerApp', [
            'ngStorage',
            'ngResource',
            'ngCookies',
            'ngAria',
            'web-gl-earth2',

uploadData.controller.js:

$scope.initializeMapWebGL = function(){
                var earth = new webGlEarth.map('earth_div');
                webGlEarth.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(earth);

                var marker = webGlEarth.marker([51.5, -0.09]).addTo(earth);
                marker.bindPopup("<b>Hello world!</b><br>I am a popup.<br /><span style='font-size:10px;color:#999'>Tip: Another popup is hidden in Cairo..</span>", {maxWidth: 150, closeButton: true}).openPopup();

                var marker2 = webGlEarth.marker([30.058056, 31.228889]).addTo(earth);
                marker2.bindPopup("<b>Cairo</b><br>Yay, you found me!", {maxWidth: 120, closeButton: false});

                var markerCustom = webGlEarth.marker([50, -9], '/img/logo-webglearth-white-100.png', 100, 24).addTo(earth);

                earth.setView([51.505, 0], 6);
            };

uploadData.html:

<style>
    html, body{padding: 0; margin: 0; background-color: black;}
    #earth_div{top: 0; right: 0; bottom: 0; left: 0; position: absolute !important;}
</style>
<title>WebGL Earth API: Markers</title>
<body onload="initialize()">
<div id="earth_div"></div>
</body>

But, of course, that wasn't going to be quite that straight forward, the issue comes from the webglearth2's dependencies, this app relies strongly on google-closure-library, and angular doesn't like that, I've tried wrapping the main.js file like:

(function () {
    'use strict';
    angular.module('web-gl-earth2', []).provider('webGlEarth');

I added google-closure-library to my bower_components and to app.module.js, but I still get the dreaded: 

Uncaught ReferenceError: goog is not defined

So, I'm left with the question: Is there an automagic wrapper out there that will help me integrate this module in angular, or am I doomed to re-write the whole source code to make it "angular likeable"?

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Steven
  • 1,236
  • 1
  • 13
  • 37
  • "doomed to re-write the whole source" -- such drama. If you need to have more control over the initialization process, you can use a manual bootstrapping method instead. Examples of when you'd need to do this include using script loaders or the need to perform an operation before AngularJS compiles a page. See [AngularJS Developer Guide - Bootstrapping](https://docs.angularjs.org/guide/bootstrap). – georgeawg May 18 '18 at 14:58
  • "doomed to re-write the whole source" -- such drama. Well, don't get me wrong, it's a task I'd happily embark on, but quite difficultly would my architect approve that use of resources. Thanks for the tips, will defo have a go with it (in my own time that is) – Steven May 18 '18 at 15:08
  • The `$scope.initializeMapWebGL` function should be moved into a [custom directive](https://docs.angularjs.org/guide/directive) and `onload="initialize()"` should be moved into the `webGlEarth` provider construction function. – georgeawg May 18 '18 at 15:19
  • Thanks! I had in mind that the structure of the code wasn't perfect, but I was just trying to test if the app would read the module, matter of fact, AngularJS is the first step, I'd actually need to then move the module to Typescript so I can finally integrate it in an Angular (this is 2+) project – Steven May 18 '18 at 15:21

0 Answers0