角度チャートjsが動作しません

Question

Angular chart.js期待どおりに動作しません。私はcodepenで試して、それが動作します：Link

私のプロジェクトでは動作しません。グラフはページに表示されません。私はgenerator-angularを使用しています。コンソールにエラーは表示されません。

app.js：

angular 
    .module('App', [ 
    'ngAnimate', 
    'ngCookies', 
    'ngResource', 
    'ngRoute', 
    'ngSanitize', 
    'ngTouch' 
    ]) 
    .config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl', 
     controllerAs: 'main' 
     }) 
     .when('/about', { 
     templateUrl: 'views/about.html', 
     controller: 'AboutCtrl', 
     controllerAs: 'about' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
    }); 

main.htmlと：

<canvas class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" chart-click="onClick"></canvas> 

main.js：私はindex.htmlの中に含まれている

angular.module('App', ['chart.js']) 
     .config(['ChartJsProvider', function (ChartJsProvider) { 
      // Configure all charts 
      ChartJsProvider.setOptions({ 
      chartColors: ['#FF5252', '#FF8A80'], 
      responsive: false 
      }); 
      // Configure all line charts 
      ChartJsProvider.setOptions('line', { 
      showLines: false 
      }); 
     }]) 
     .controller('MainCtrl', ['$scope', '$timeout', function ($scope, $timeout) { 
     $scope.labels = ["January", "February", "March", "April", "May", "June", "July"]; 
     $scope.series = ['Series A', 'Series B']; 
     $scope.data = [ 
      [65, 59, 80, 81, 56, 55, 40], 
      [28, 48, 40, 19, 86, 27, 90] 
     ]; 

     $scope.onClick = function (points, evt) { 
      console.log(points, evt); 
     }; 

     // Simulate async data update 
     $timeout(function() { 
      $scope.data = [ 
      [28, 48, 40, 19, 86, 27, 90], 
      [65, 59, 80, 81, 56, 55, 40] 
      ]; 
     }, 3000); 
}]); 

物事

：

ここに私です

<!-- build:js(.) scripts/vendor.js --> 
    <!-- bower:js --> 
    <script src="bower_components/jquery/dist/jquery.js"></script> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script> 
    <script src="bower_components/angular-animate/angular-animate.js"></script> 
    <script src="bower_components/angular-cookies/angular-cookies.js"></script> 
    <script src="bower_components/angular-resource/angular-resource.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> 
    <script src="bower_components/angular-touch/angular-touch.js"></script> 
    <script src="bower_components/socket.io-client/socket.io.js"></script> 
    <script src="bower_components/angular-socket-io/socket.js"></script> 
    <!-- endbower --> 
    <!-- endbuild --> 

     <!-- build:js({.tmp,app}) scripts/scripts.js --> 
     <script src="scripts/app.js"></script> 
     <script src="scripts/controllers/main.js"></script> 
     <script src="scripts/controllers/about.js"></script> 
     <script src="bower_components/chart.js/dist/Chart.bundle.js"></script> 
     <script src="bower_components/angular-chart.js/dist/angular-chart.js"></script> 
     <!-- endbuild --> 

Answer 1

main.jsのchartJs設定をapp.jsに移動し、app.jsに依存関係としてchart.jsを追加して解決しました。