как использовать chart.js с угловой диаграммой, используя requirejs

Попытка реализовать ленивую загрузку с помощью requirejs. Все в порядке, когда я не использую диаграммы. Но когда я хочу использовать диаграммы (угловые диаграммы), мне это не удастся! Использование chart.js с угловая диаграмма.

Вот 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','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);

});

Как реализовать зависимость между ними? Есть предложения? есть примеры?


person VBMali    schedule 08.07.2015    source источник
comment
вы можете попробовать 2 вещи: добавить chart.js в блоке define() app.js и удалить или увеличить waitSecond: от 0 до 60 или что-то в этом роде.   -  person Linh Pham    schedule 10.07.2015
comment
waitSecond Настройка времени ожидания для requireJS для ожидания загрузки модуля JS. И если есть какой-либо модуль, для загрузки требуется больше 0. Это будет считаться неудачным.   -  person Linh Pham    schedule 10.07.2015
comment
requirejs.onError = function (err) { if (err.requireType === 'timeout') { console.error(Произошла ошибка из-за сетевого подключения. \nПожалуйста, перезагрузите страницу: \n\n +err); } else { console.error(Произошла ошибка из-за сетевого подключения. \nПожалуйста, перезагрузите страницу: \n\n +err); } };   -  person Linh Pham    schedule 10.07.2015
comment
Используйте приведенный выше код в своем main.js, это поможет выйти из системы из-за ошибки requireJS в консоли браузера.   -  person Linh Pham    schedule 10.07.2015
comment
@Linh Pham - waitSecond = 0 отключает тайм-аут.   -  person potatopeelings    schedule 10.07.2015
comment
@LinhPham: (может быть) это из-за этого идентификатора модуля chart.js . Итак, как я могу справиться с этим. Поскольку консоль браузера говорит chart.js not found, даже имя моего файла — Chart.min.js.   -  person VBMali    schedule 10.07.2015
comment
@SujVan вы добавили 'chart.js' в блок define () app.js?   -  person Linh Pham    schedule 10.07.2015
comment
@LinhPham: В блоке определения app.js есть angular-chart И я уже упоминал в shim, что angular-chart зависит от chart.js. Так что мне нужно также определить chart.js в блоке определения app.js. Нет, я так думаю.!   -  person VBMali    schedule 10.07.2015
comment
@SujVan, можете ли вы сказать мне, какую именно ошибку зарегистрировала консоль браузера? Какой URL вы там видели?   -  person Linh Pham    schedule 10.07.2015
comment
@SujVan и недавно обновленный ответ кажутся законными, избегайте использования .js, потому что это может каким-то образом сбить с толку requireJS (я никогда не знаю и не слышал, но лучше не использовать какой-либо чувствительный символ, например: '\' )   -  person Linh Pham    schedule 10.07.2015


Ответы (1)


Из документации - http://requirejs.org/docs/api.html

Если идентификатор модуля имеет одну из следующих характеристик, он не будет передаваться через конфигурацию "baseUrl + пути", а будет рассматриваться как обычный URL, относящийся к документу:
• Заканчивается на «.js».
• Начинается с «/».
• Содержит протокол URL, например «http:» или «https:».

Это сработает для вашего модуля chart.js, и RequireJS попытается загрузить chart.js из каталога, содержащего HTML-страницу, на которой работает RequireJS.

Примечание. Вы должны увидеть это на вкладке «Инструменты разработчика» > «Сеть». Обратите внимание, что запрос chart.js не идет по ожидаемому пути.


Это похоже на ошибку (с угловой диаграммой) — см. аналогичную проблему для typeahead.js — https://github.com/twitter/typeahead.js/issues/1211


Есть несколько способов исправить/обойти это

  1. Измените код угловой диаграммы, чтобы ожидаемый идентификатор модуля был без точки - скажем, chartjs. Затем измените chart.js в приведенной выше конфигурации на chartjs. Это был бы правильный путь.

  2. Переименуйте файл chart.min.js в chart.js и поместите его в ту же папку, что и ваш html-файл, на котором работает RequireJS. В лучшем случае это будет очень и очень временное исправление.

  3. Установите для nodeIDCompat значение true — это сделает идентификатор модуля something.js эквивалентным something. Затем измените идентификатор модуля в вашей конфигурации на chart. Так что-то вроде

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

Если вы используете r.js для сжатия / консолидации, вы можете просто протестировать это, прежде чем остановиться на этом обходном пути.

person potatopeelings    schedule 10.07.2015
comment
Прохладный! Это должно работать, если вы поместите chart.js в этот путь, или лучше было бы установить baseUrl - person potatopeelings; 10.07.2015
comment
Привет, теперь он не выдает никаких ошибок в консоли, не знаю, как эта ошибка исчезла.! Теперь графики не будут отображаться. Значит тег <canvas ... > не работает? - person VBMali; 10.07.2015
comment
Если Chart.js загрузился правильно, это может быть просто проблема с размером. Убедитесь, что у вас есть ширина и высота, установленные на элементе холста (напрямую - ширина = 300, высота = 200) - person potatopeelings; 10.07.2015
comment
Извините, это была моя ошибка. Ошибка все еще существует! И я выложил файл, где эта ошибка говорила. Все такой же. - person VBMali; 10.07.2015
comment
Его ошибка: "NetworkError: 404 Not Found - http://localhost/ums/admin/chart.js" Но имя моего файла Chart.min.js. И имя зависимости — chart.js. Вы можете просмотреть приведенный выше код, упомянутый в сообщении. - person VBMali; 10.07.2015
comment
Если вы говорите это в своем ответе, то как загружаются другие мои модули? только проблема с chart.js. Согласно вашему ответу, имя моего модуля не должно содержать .js. Итак, angular-chart использует этот модуль chart.js в своем js. Итак, как я могу справиться с ЭТИМ? - person VBMali; 10.07.2015
comment
Другие ваши модули не заканчиваются на .js. Минутку - обновление ответа. Ваше здоровье! - person potatopeelings; 10.07.2015
comment
Если я собираюсь удалить это окончание .js, какие еще изменения мне нужно сделать? И жду вашего обновленного ответа! - person VBMali; 10.07.2015
comment
Изменение кода угловой диаграммы влияет (дает ошибку ввода). Применяя 1, 2,3 gibes та же ошибка: Failed to instantiate module angularapp due to: [$injector:modulerr] - person VBMali; 10.07.2015
comment
ПРИМЕЧАНИЕ. Сообщение обновлено (* baseUrl: используется вместо использования глобальной переменной javascript.) - person VBMali; 10.07.2015
comment
Давайте продолжим это обсуждение в чате. - person potatopeelings; 10.07.2015