在Angular.js項目

Question

使用Require.js如何加載第三方庫實在不明白如何加載使用Require.js第三方庫在Angular.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']); 

    }); 

一些角控制器：

'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庫也是如此。

我在WebJars上運行了Scala和SBT之上的Angular項目，所以Require.js是如何加載所有這些東西的唯一方法。

Answer 1

在您的RequireJS模塊（您的問題中的第二個代碼段）中，除了angular之外，我沒有看到任何進口。您需要添加其他依賴，如datamap等

Answer 2

看起來像「數據地圖」對象不初始化，行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({...}) 
};