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

Question

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

这里是 main.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']
    });

这里是 app.js：

var base_url="http://localhost/ums/";
define(['angularAMD', 'ngRoute','flash','angular-loading-bar','ngAnimate','uniqueField','input_match','angular-chart'], function (angularAMD) {
var app = angular.module('angularapp', ['ngRoute','flash','angular-loading-bar','ngAnimate','uniqueField','input_match','angular-chart']);  
app.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/dashboard', angularAMD.route({
                title : 'Dashboard',
                controller : 'dashboardCtrl',
                templateUrl : base_url+'angular/partials/admin/dashboard.php',
                controllerUrl: base_url+'angular/js/admin/controllers/dashboardCtrl.js'
            }))

//.......................all routing ............//
 .otherwise({
            redirectTo : '/dashboard'
        });
}]);
app.run(['$rootScope', '$route', function($rootScope, $route) {
    $rootScope.$on('$routeChangeSuccess', function() {
        document.title = $route.current.title;
    });
}]);


  // Bootstrap Angular when DOM is ready
    return angularAMD.bootstrap(app);

});

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

Answer 1

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

如果模块 ID 具有以下特征之一，该 ID 将 不通过“baseUrl + 路径”配置，而只是 被视为相对于文档的常规 URL：
• 以“.js”结尾。
• 以“/”开头。
• 包含 URL 协议，例如“http:”或“https:”。

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

注意 - 您应该能够在“开发者工具”>“网络”选项卡中看到这一点。请注意，对 chart.js 的请求不会到达您期望的路径。

---

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

---

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

1. 修改 angular-chart 代码以使预期的模块 ID 不带点 - 例如 chartjs。然后将上述配置中的 chart.js 更改为 chartjs。这是正确的方式。

2. 将您的 chart.min.js 文件重命名为 chart.js，并将其放在与运行 RequireJS 的 html 文件相同的文件夹中。这充其量只是一个非常非常临时的修复。

3. 将 nodeIDCompat 设置为 true - 这将使模块 ID something.js 等同于 something。然后将配置中的模块 ID 更改为 chart。所以像

   require.config({
       nodeIdCompat: true,
       paths: {
           'chart': base_url + '/lib/Chart.min',
            ...
   

如果您使用 r.js 进行压缩/合并，您可能也想在确定此解决方法之前对其进行测试。