如何在Angular.js项目中使用Require.js加载第三方库

Question

我真的不了解如何在Angular.js项目中使用Require.js加载第三方库

例如，'topojson‘已定义，但'datamap’在本例中未定义。

此处的数据图https://github.com/markmarkoh/datamaps/blob/master/dist/datamaps.world.js

Topojson从这里https://github.com/mbostock/topojson/blob/master/topojson.js

Angular 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:未定义数据地图‘

这并不是唯一的情况。大多数外部JS库也是如此。

我使用WebJars在Scala和SBT之上运行Angular项目，所以Require.js是加载所有这些东西的唯一方法。

Answer 1

除了RequireJS模块(问题中的第二个代码片段)中的angular之外，我没有看到任何导入。您需要添加其他依赖项，如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;
  }

现在它对我起作用了。在define之后添加该行：

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

并在角度控制器中使用了require块：

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