Question

尝试使用 requirejs 实现延迟加载。 当我不使用图表时，一切都很好。但是当我想使用图表（角度图表）时，不会成功！将chart.js与angular-chart一起使用。

这是main.js：

final AtomicInteger total

这是app.js：

 require.config({ 
baseUrl: "http://localhost/ums/angular/js",
    paths: {
        'angular': 'lib/angular.min',
        'ngRoute': 'lib/angular-route.min',
        'flash': 'lib/angular-flash',
        'angular-loading-bar': 'lib/loading-bar.min',
        'ngAnimate': 'lib/angular-animate.min',
        'ui.bootstrap': 'lib/ui-bootstrap-tpls-0.12.0',
        'uniqueField': 'admin/directives/angular-unique',
        'input_match': 'admin/directives/angular-input-match',
        'uniqueEdit': 'admin/directives/angular-unique-edit',
        'angularAMD': 'lib/angularAMD.min',
        'chart.js': 'lib/Chart.min', 
        'angular-chart':'lib/angular-chart.min',   
        'app': 'admin/app',
        },
        waitSeconds: 0,
         shim: { 
         'angular': { exports: 'angular'},
        'angularAMD': { deps: ['angular']},
        'angular-chart': { deps: ['angular','chart.js']},
        'ngRoute':{ deps: ['angular']},
        'angular-loading-bar':{ deps:['angular'] },
        'ngAnimate': { deps:['angular'] } ,
        'ui.bootstrap': {deps: ['angular'] },
        'uniqueField': {deps: ['angular'] },
        'input_match': {deps: ['angular'] },
        'uniqueEdit': {deps: ['angular'] },
        'flash': {deps: ['angular'] },
        },
        deps: ['app']
    });

如何实现它们之间的依赖？ 有什么建议？任何例子？

Answer 1

来自文档 - http://requirejs.org/docs/api.html

如果模块ID具有以下特征之一，则ID将为   不通过＆＃34; baseUrl +路径＆＃34;配置，只是   被视为与文档相关的常规URL：
  •结束＆＃34; .js＆＃34;。
  •以＆＃34; /＆＃34;开始   •包含URL协议，例如＆＃34; http：＆＃34;或＆＃34; https：＆＃34;。

这将启动你的chart.js模块，RequireJS将尝试从包含运行RequireJS的HTML页面的目录中加载chart.js

注意 - 您应该可以在开发者工具＆gt;中看到这一点。网络选项卡。请注意，对chart.js的请求不会转到您期望的路径。

这似乎是一个错误（使用角度图表） - 请参阅typeahead.js的类似问题 - https://github.com/twitter/typeahead.js/issues/1211

有几种方法可以修复/解决此问题

修改角度图表代码，使预期的模块ID成为没有点的东西 - 比如chartjs。然后将上面配置中的chart.js更改为chartjs。这是正确的方式。
将chart.min.js文件重命名为chart.js，并将其放在与运行RequireJS的html文件相同的文件夹中。这最多只是一个非常临时的修复。
将nodeIDCompat设置为true - 这将使模块ID something.js 等同于某事。然后将配置中的模块ID更改为chart。像
这样的东西
```
require.config({
    nodeIdCompat: true,
    paths: {
        'chart': base_url + '/lib/Chart.min',
         ...
```

如果您使用r.js进行压缩/合并，您可能只想在解决此变通方法之前进行测试。

如何使用requirejs使用带角度图的chart.js

1 个答案: