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

Question

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

Например определяется «topojson», но 'datamap' в этом случае не определен.

Datamap здесь https://github.com/markmarkoh/datamaps/blob/master/dist/datamaps.world.js

Topojson здесь 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: Datam ap не определено '

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

Я бегу Угловой проект поверх 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({...}) 
};