如何使用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

首先，你不需要在y中注入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会为你

有用