如何使用 requirejs 将 chart.js 与 angular-chart 一起使用 [英] how to use chart.js with angular-chart using requirejs

问题描述

尝试使用 requirejs 实现延迟加载.当我不使用图表时一切都很好.但是当我想使用图表(角度图表)时，不会成功！使用 chart.js 和 角度图表.

Trying to implement lazy load using requirejs. Everything is fine when I am not using charts. But when I want to use charts(angular charts), not going to sucseed! Using chart.js with 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);

});

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

How to implement dependancy between them? Any suggestions? any examples?

推荐答案

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

如果模块 ID 具有以下特征之一，则该 ID 将不通过baseUrl + paths"配置传递，只是被将其视为与文档相关的常规 URL:
• 以.js"结尾.
• 以/"开头.
• 包含 URL 协议，例如http:"或https:".

If a module ID has one of the following characteristics, the ID will not be passed through the "baseUrl + paths" configuration, and just be treated like a regular URL that is relative to the document:
• Ends in ".js".
• Starts with a "/".
• Contains an URL protocol, like "http:" or "https:".

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

This will kick in for your chart.js module and RequireJS will attempt to load chart.js from the directory that contains the HTML page running RequireJS

注意 - 您应该能够在开发者工具">网络"选项卡中看到这一点.请注意，对chart.js 的请求没有转到您期望的路径.

Note - you should be able to see this in your Developer Tools > Network tab. Note that the request for chart.js doesn't go to the path that you expect.

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

This seems like a bug (with angular-chart) - see a similar issue for typeahead.js - https://github.com/twitter/typeahead.js/issues/1211

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

There are a couple of ways to fix / workaround this

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

1. Modify angular-chart code to make the expected module ID as something without a dot - say chartjs. Then change chart.js in your above configuration to chartjs. This would be correct way.

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

Rename you chart.min.js file to chart.js and put it in the same folder as your html file running RequireJS. This would at best be a very very temporary fix.

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

Set nodeIDCompat to true - this will make module ID something.js equivalent to something. Then change the module ID in your configuration to chart. So something like

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

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

If you are using r.js to compress / consolidate, you might want to just test that too before settling on this workaround.

这篇关于如何使用 requirejs 将 chart.js 与 angular-chart 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！