0

真的不明白如何在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

角 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']);

    });

一些 Angular 控制器：

'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: {
                }
            });
        })
    ;

});

在我的角度控制器中，new Datamap(...) 说“ReferenceError: Datamap is not defined”

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

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

4

2 回答 2

0

angular除了在您的 RequireJS 模块（您问题中的第二个片段）中，我没有看到任何导入。您需要添加其他依赖项，例如datamap等。

于 2016-01-13T19:10:40.073 回答
-1

看起来像'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

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

 requirejs(["datamaps"], function () {
      // draw map here new Datamap({...})
 };
于 2016-01-15T13:51:41.973 回答