Как загрузить сторонние библиотеки с помощью Require.js в проекте Angular.js

Question

Действительно не понимаю, как загружать сторонние библиотеки с помощью Require.js в проекте Angular.js

Например, "топойсон" определен, но "карта данных" в этом случае не определена.

Карта данных отсюда https://github.com/markmarkoh/datamaps/blob/master/dist/datamaps.world.js

Топойсон отсюда https://github.com/mbostock/topojson/blob/master/topojson.js

Угловой app.js:

'use strict';
requirejs.config({
    paths: {
        'angular': ['../lib/angularjs/angular'],
        'angular-route': ['../lib/angular-route/angular-route'],
        'angular-resource': ['../lib/angular-resource/angular-resource'],
        'angular-animate': ['../lib/angular-animate/angular-animate'],
        'datamap':['../app/dense/world-view/datamaps.world'],
        'topojson':['../app/dense/world-view/topojson'],
        'lodash': ['../lib/lodash/lodash'],
        'd3': ['../lib/d3js/d3']
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'angular-route': {
            deps: ['angular'],
            exports: 'angular'
        },
        'angular-resource': {
            deps: ['angular'],
            exports: 'angular'
        },
        'angular-animate': {
            deps: ['angular'],
            exports: 'angular'
        },
        'd3': {
            exports: 'd3'
        },
        'topojson': {
            deps: ['d3'],
            exports: 'topojson'
        },
        'datamaps': {
            deps: ['d3', 'topojson'],
            exports: 'datamaps'
        },
        'lodash': {
            exports: 'lodash'
        }
    }
});

require(
    [
        'angular',
        'topojson',
        'datamap',
        'angular-route',
        'angular-resource',
        'angular-animate',
        'lodash',
        'd3'
    ],
    function (angular, topojson, datamap) {

        console.log("topojson", topojson);
        console.log("datamap", datamap); // is undefined

        angular.module('myApp', [
            'myApp.graph',
            'myApp.node',
            'myApp.dense',
            'ngAnimate',
            'ngRoute'])
            .config(function ($routeProvider) {
                $routeProvider.otherwise({
                    redirectTo: '/login'
                });
            })
        ;

        angular.bootstrap(document.getElementById("myAppId"), ['myApp']);

    });

Некоторые из угловых контроллеров:

'use strict';

define(['angular'], function (angular) {

    angular
        .module('myApp.dense', ['ngRoute'])

        .config(['$routeProvider', function ($routeProvider) {
            $routeProvider.when('/dense', {
                templateUrl: 'assets/app/dense/dense.html',
                controller: 'DenseCtrl'
            });
        }])

        .controller('DenseCtrl', function ($scope) {

            var map = new Datamap({
                scope: 'world',
                element: document.getElementById("someId"),
                projection: 'mercator',
                height: 500,
                fills: {
                    defaultFill: '#f0af0a',
                    lt50: 'rgba(0,244,244,0.9)',
                    gt50: 'red'
                },

                data: {
                }
            });
        })
    ;

});

В моем угловом контроллере новый Datamap(...) говорит: "ReferenceError: Datamap не определен"

Это не единственный случай. То же самое для большинства внешних библиотек JS.

Я запускаю Angular-проект поверх Scala и SBT с WebJars, поэтому Require.js - единственный способ загрузить все это.

Answer 1

Я не вижу импорт, кроме angular в вашем модуле RequireJS (второй фрагмент вашего вопроса). Вам нужно добавить другие зависимости, такие как datamap, так далее.

Answer 2

Похоже, в "Datamap" объект не инициализируется, строка 12535:

https://github.com/markmarkoh/datamaps/blob/master/dist/datamaps.world.js#L12535

  // expose library
  if (typeof exports === 'object') {
    d3 = require('d3');
    topojson = require('topojson');
    module.exports = Datamap;
  }
  else if ( typeof define === "function" && define.amd ) {
    define( "datamaps", ["require", "d3", "topojson"], function(require) {
      d3 = require('d3');
      topojson = require('topojson');

      return Datamap;
    });
    // window.Datamap = window.Datamaps = Datamap;  // hack
  }
  else {
    window.Datamap = window.Datamaps = Datamap;
  }

Теперь это работает для меня. Добавил эту строку после определения:

window.Datamap = window.Datamaps = Datamap;  // hack

и используемый требуют блок внутри угловой контроллер:

 requirejs(["datamaps"], function () {
      // draw map here new Datamap({...})
 };