Как вставить код Javascript в AngularJS

У меня есть код Javascript в моем html-файле, но у меня также есть отдельный файл AngularJS.

Как мне переместить код JS в файл AngularJS? См. Комментарии в коде ниже.

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.info("No data found..");
  });

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

}]);    

Начните с того, что поместите свой js-код в отдельный файл и используйте что-то вроде <script src = "js/script.js"></script> внутри тега <head> для его импорта. Тогда что-нибудь вроде это или это поможет?

James Whiteley 10.05.2018 17:26

вы должны сохранить логику в контроллерах / службах angularjs. Для дальнейшего упрощения используйте angular-chart. Предоставляются инструкции по установке и

Aleksey Solovey 10.05.2018 17:26

Я пробовал angular-chart и даже не могу заставить их собственный пример пузыря примеры угловых диаграмм работать в plunker: https://plnkr.co/edit/EBzdScSdrfGfPryBSkk1. Модуль chart.js недоступен

user3489502 10.05.2018 17:40

Наконец-то он заработал, использовал неправильный файл CND. Хороший - cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js

user3489502 10.05.2018 18:41
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
53
0

Другие вопросы по теме