Оберните переменные библиотеки google-closure-library для углового проекта
Итак, продолжая этот вопрос
Теперь у меня есть модуль как в bower, так и в npm, я могу импортировать его в свой проект и объявить в app.module, даже попытавшись использовать его в своем контроллере:
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>
Но, конечно, все будет не так просто, проблема возникает из-за зависимостей webglearth2, это приложение сильно зависит от библиотеки google-closure-library, а angular это не нравится, я пробовал обернуть файл main.js, например:
(function () {
'use strict';
angular.module('web-gl-earth2', []).provider('webGlEarth');
Я добавил google-closure-library в свои bower_components и в app.module.js, но все равно получаю ужасное:
Uncaught ReferenceError: goog is not defined
Итак, у меня остался вопрос: есть ли автоматическая оболочка, которая поможет мне интегрировать этот модуль в angular, или я обречен переписывать весь исходный код, чтобы сделать его «привлекательным для angular»?
«обречены переписать весь первоисточник» - такая драма. Что ж, не поймите меня неправильно, я бы с радостью взялся за эту задачу, но мой архитектор вряд ли одобрил бы такое использование ресурсов. Спасибо за советы, обязательно попробую (в свое время)
Функция $scope.initializeMapWebGL должна быть перемещена в настраиваемая директива, а onload = "initialize()" должна быть перемещена в функцию построения поставщика webGlEarth.
Спасибо! Я имел в виду, что структура кода не идеальна, но я просто пытался проверить, будет ли приложение читать модуль, на самом деле AngularJS - это первый шаг, мне действительно нужно было бы затем переместить модуль в Typescript, чтобы я мог, наконец, интегрировать его в проект Angular (это 2+)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
«обречены переписать весь первоисточник» - такая драма. Если вам нужно иметь больший контроль над процессом инициализации, вы можете вместо этого использовать метод ручной начальной загрузки. Примеры того, когда вам нужно это сделать, включают использование загрузчиков скриптов или необходимость выполнить операцию до того, как AngularJS скомпилирует страницу. См. Руководство разработчика AngularJS - Начальная загрузка.