Using chart.js with angular-chart

[vaneshmali]

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.

How to implement dependancy between them?

main.js:

var base_url="http://localhost/ums/angular/js"; require.config({ paths: { 'angular': base_url+'/lib/angular.min', 'ngRoute': base_url+'/lib/angular-route.min', 'flash': base_url+'/lib/angular-flash', 'angular-loading-bar': base_url+'/lib/loading-bar.min', 'ngAnimate': base_url+'/lib/angular-animate.min', 'ui.bootstrap': base_url+'/lib/ui-bootstrap-tpls-0.12.0', 'uniqueField': base_url+'/admin/directives/angular-unique', 'input_match': base_url+'/admin/directives/angular-input-match', 'uniqueEdit': base_url+'/admin/directives/angular-unique-edit', 'angularAMD': base_url+'/lib/angularAMD.min', 'chart.js': base_url+'/lib/Chart.min', 'angular-chart': base_url+'/lib/angular-chart.min', 'app': base_url+'/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);

});

[vaneshmali]

I tried to change module ID name from chart.js to chartjs and for the same doing change in angular-chart code, NOT WORKING.

[marcoslin]

Please take a look at RequireJS documentation on how to set baseUrl:

http://requirejs.org/docs/api.html#jsfiles

Please provide more detail than NOT WORKING as it doesn't really tell me anything.

[vaneshmali]

(I have corrected , setting baseUrl,Thanks) I found that requirejs not supports chart.js, because of that the module ID name ends with .js. So I moved to Google charts. If is there anyway to use chart.js with requirejs in angular,let me know.