Как использовать инъекцию зависимости, используя ocLazyLoad

Question

Я использую ocLazyLoad, и у меня есть некоторые внешние угловые библиотеки (например, Chart.js и pascalprecht.translate), и мне нужно ленить загружать их на некоторых маршрутах, как вы знаете, для обычной инъекции зависимости углового модуля быть как:

var angularApp = angular.module('myApp', 
    ['oc.lazyLoad', 'pascalprecht.translate', 'chart.js']); 

Теперь мне просто нужно отложенной загрузки pascalprecht.translate в одном из моих controllers, а также отложенной загрузки chart.js, в другом controller, но мне еще нужно добавить вводить их в myApp модуля, но я не знаю, как вводить и я не использую $stateProvider

Я попробовал это мой контроллер, который мне нужен chart.js:

//Load here. 
//$ocLazyLoad.load('./panel/dist/test.js'); 
angular.module('myApp', ['chart.js', [ 
'./panel/dist/static/chart.min.js', 
'./panel/dist/static/angular-chart.min.js' 
]]); 

$ocLazyLoad.load('./panel/dist/static/chart.min.js'); 
$ocLazyLoad.load('./panel/dist/static/angular-chart.min.js'); 

Но я получил эта ошибка:

angular-chart.min.js:10Uncaught Error: Chart.js library needs to included, see http://jtblin.github.io/angular-chart.js/

Answer 1

во-первых, вам не нужно вводить chart.js в год наша инъекция зависимости, то это должна быть ваш модулем:

var angularApp = angular.module('myApp', [ 'oc.lazyLoad' ]); 

Теперь вы хотите иметь доступ к некоторым библиотекам из различных контроллеров (скажем, маршруты), как вы сказали, что вы не используете $stateProvider, что означает вы не используете ui-router(это сторонняя библиотека для работы с маршрутами и URL-адресами).

Это мое предложение (только простое решение):

angularApp.config(function ($routeProvider, $locationProvider) { 
    $routeProvider.when('/home', { 
     templateUrl: 'views/home.html', 
     controller: 'HomeController', 
     resolve: { 
      store: function ($ocLazyLoad) { 
       return $ocLazyLoad.load(
        { 
         serie: true, 
         name: "chart.js", 
         files: [ 
          "./static/chart.min.js", 
          "./static/chart-angular.min.js", 
         ] 
        } 
       ); 
      } 
     } 
    }); 

     $routeProvider.when('/needs-translate', { 
     templateUrl: 'views/needs-translate.html', 
     controller: 'translateController', 
     resolve: { 
      store: function ($ocLazyLoad) { 
       return $ocLazyLoad.load(
        { 
         serie: true, 
         name: "pascalprecht.translate", 
         files: [ 
          "./static/translate.js" 
         ] 
        } 
       ); 
      } 
     } 
    }); 

    $routeProvider.otherwise({ 
     redirectTo: '/home' 
    }); 

    // use the HTML5 History API 
    $locationProvider.hashPrefix = '!'; 
    $locationProvider.html5Mode(true); 
}); 

Кстати, если вы используете ui.router, это Github issue было бы полезно для вас