0

I have Javascript code in my html file, but I also have a seperate AngularJS file.

How can I move my JS code into my AngularJS file? See comments in code below.

html + Javascript:

<div ng-app="app">
<div ng-controller="gettickersCtrl">

    <div class="row">
      <div class="col-sm-offset-1 col-sm-10">                     
        <div><canvas id="myChart" width="600" height="600"></canvas></div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

        <!-- --------------------------------------------------------------- -->
        <!-- How to move the following JS code into the AngularJS file below -->
        <!-- --------------------------------------------------------------- -->
        <script>
            var ctx = document.getElementById('myChart').getContext('2d');
            var chart = new Chart(ctx, {                            
            type: 'line',                           
            data: {
                labels: {!!  $dates !!} , 
                datasets: [{
                    label: 'Amount ' ,
                    data: {!!  $prices !!} 
                }]
            });  
        </script>


      </div>
    </div>

</div> <!-- ng-controller -->
</div> <!-- ng-app -->

AngularJS:

var app = angular.module('gettickers',[]);
app.controller('gettickersCtrl', ['$scope', '$http', '$location', function($scope, $http, $location){
var urlapigettickers = $location.protocol() + "://" + $location.host() + "/api/gettickers" ;

$http.get(urlapigettickers).success(function(data, status, headers, config) {
    $scope.gettickeritems = data.gettickers;
}).error(function(data, status, headers, config) {
    console.log("No data found..");
  });

  // -------------------------------------------------
  // Where/how can I insert the above JS code in here?
  // -------------------------------------------------

}]);    
user3489502
  • 3,451
  • 9
  • 38
  • 66
  • Start by putting your js code in its own file and using something like `` inside your `` tag to import it. Then will something like [this](https://stackoverflow.com/a/44817445/8230810) or [this](https://stackoverflow.com/a/950146/8230810) help? – James Whiteley May 10 '18 at 15:26
  • 1
    you have to keep the logic within angularjs controllers/services. To simplify it further use [`angular-chart`](http://jtblin.github.io/angular-chart.js/). Installation and guides are provided – Aleksey Solovey May 10 '18 at 15:26
  • I tried angular-chart and I can't even get their own bubble example [angular-chart examples](https://github.com/jtblin/angular-chart.js/tree/master/examples) to work in plunker: [https://plnkr.co/edit/EBzdScSdrfGfPryBSkk1](https://plnkr.co/edit/EBzdScSdrfGfPryBSkk1) . Module 'chart.js' is not available – user3489502 May 10 '18 at 15:40
  • Finally got it to work, was using the wrong CND file. The good one is https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js – user3489502 May 10 '18 at 16:41

0 Answers0