Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs – 如何使用带有角度图的chart.js使用requirejs大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
尝试使用requirejs实现延迟加载.当我不使用图表时,一切都很好.但是,当我想使用图表(角度图表),而不是成功!使用 chart.jsangular-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','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);

});

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

从文档 – http://requirejs.org/docs/api.html

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

注意 – 您应该可以在开发者工具>中看到这一点.网络选项卡.请注意,对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更改为图表.所以像

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

如果您使用r.js进行压缩/合并,您可能只想测试它,然后再解决此变通方法.

大佬总结

以上是大佬教程为你收集整理的angularjs – 如何使用带有角度图的chart.js使用requirejs全部内容,希望文章能够帮你解决angularjs – 如何使用带有角度图的chart.js使用requirejs所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。