angular-图表不支持 requirejs

Question

我正在尝试使用 angular-chart，但我不知道如何正确添加依赖项。我收到以下错误 未捕获类型错误：无法读取未定义的属性 'defaults' 在 angular-chart.js

(function (factory) {
  'use strict';
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
      define(['angular', 'chart.js'], factory);
  } else if (typeof exports === 'object') {
    // Node/CommonJS
      module.exports = factory(require('angular'), require('chart.js'));
  } else {
    // Browser globals
    factory(angular, Chart);
  }
}(function (angular, Chart) {
  'use strict';

  Chart.defaults.global.responsive = true;
  ....

因为 angular 和 chart 都未定义。

我需要的配置是

'use strict';
require.config({
    baseUrl: '/',
    paths: {
  'angular': '/scripts/angular',
  'angular-route': '/scripts/angular-route',
  'ui-bootstrap': '/scripts/ui-bootstrap-tpls-0.13.0.min',
  'angular-animate': '/scripts/angular-animate.min',

  'chart': '/scripts/chart',
  'angular-chart': '/scripts/angular-chart',
  
  'data-utils': '/common/data-utils',
  'string-utils': '/common/string-utils',

        'app': '/config/app',
        'routes': '/config/routes'
    },
 shim: {
  'app': {
      deps: ['angular', 'angular-route', 'ui-bootstrap', 'data-utils', 'string-utils', 'angular-chart']
  },
  
  'angular-route': {
   deps: ['angular']
  },
  'ui-bootstrap': {
      deps: ['angular', 'angular-animate']
  },
  'angular-animate': {
      deps: ['angular']
  },
  'angular-chart': {
      deps: ['angular', 'chart']
  }
 }
});

require
(
    ['app'],
    function(app)
    {
        angular.bootstrap(document, ['ngAnimate', 'ui.bootstrap', 'app']);
    }
);

我的控制器是

define(['app'], function(app)
{
 app.controller('homeController',
    [
        '$scope',
        function($scope)
        {
            $scope.page =
            {
                title: 'Welcome to Easy Stitch'
            };

            $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
            $scope.series = ['Series A', 'Series B'];

            $scope.data = [
              [65, 59, 80, 81, 56, 55, 40],
              [28, 48, 40, 19, 86, 27, 90]
            ];
        }
    ]);
});

除此之外，其他所有依赖项都工作正常。如果有人可以提供帮助，请。

Answer 1

似乎 angular-chart 期望调用 Chart.js 模块 "chart.js":

if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['angular', 'chart.js'], factory);
} ...

Chart.js本身使用的是匿名define(ref)，所以就看你怎么命名了。您将其命名为 "chart":

require.config({
    paths: {
        ...
        'chart': '/scripts/chart', 
        ...

所以，在 paths 配置中调用它 'chart.js' 即可！

Answer 2

我想我必须更正我的 require 配置文件中的依赖关系，然后它就可以正常工作了。

require
(
    ['app'],
    function(app)
    {
        angular.bootstrap(document, ['ngAnimate', 'ui.bootstrap', 'chart.js', 'app']);
    }
);

Answer 3

你可以修改angular-chart.js:

chart.js => 图表，

(function (factory) {
  'use strict';
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module
    define(['angular', 'chart'], factory);
  } else if (typeof exports === 'object') {
    // Node/CommonJS
    module.exports = factory(require('angular'), require('chart'));
  } else {
    // Browser globals
    factory(angular, Chart);
  }

Answer 4

用 bower 安装 angular-chart 后，我不得不更改

define(['angular', 'chart'], factory);

进入

define(['angular', 'Chart'], factory)

因为 Charts.js 将导出图表而不是图表。

angular-图表不支持 requirejs

angular-charts not working with requirejs

requirejs

angularjs

angular-chart