如何使用角度线图使用requirejs chart.js之 [英] how to use chart.js with angular-chart using requirejs

问题描述

尝试使用来实现延迟加载的 requirejs 。 的一切，当我不使用图表的罚款。的但是当我想用图表（角图表），不会sucseed！使用 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路径配置过去了，只是
  对待像一个普通的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将尝试从包含HTML页面运行RequireJS目录加载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. 修改角图code，使预期的模块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之，并把它放在同一文件夹中的HTML文件运行RequireJS。这充其量是一个非常非常临时的解决办法。

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 的等价的的东西的。然后在你的配置更改模块ID为图。因此，像

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对COM preSS /整合，你可能只想测试过之前解决此变通办法。

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之的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！