Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to dependency injection using ocLazyLoad #353

Closed
m98 opened this issue Oct 5, 2016 · 4 comments
Closed

How to dependency injection using ocLazyLoad #353

m98 opened this issue Oct 5, 2016 · 4 comments

Comments

@m98
Copy link

m98 commented Oct 5, 2016

This question asked on Stackoverflow but no one answered that, I was curious to know the answer, and I posted that here:

I'm using ocLazyLoad and I have some external angular libraries (Like Chart.js and pascalprecht.translate) and I need to lazy load them in some routes, as you know, for the common angular module dependency injection should be like:

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

Now, I just need to lazy loading pascalprecht.translate in one of my controllers and also lazy loading chart.js, in another controller, but I still need to add inject them to myApp module but I don't know how to inject and I do not use $stateProvider

I tried this my controller that I needed 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');

But I got this error:

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

@alo
Copy link

alo commented Oct 7, 2016

Hi!
In your module definition you don't have to inject "chart.js"

angular.module('myApp', [ 'ui.router', 'oc.lazyLoad' ]);

If you are using ui.router:

angular.module('myApp').config(
    ['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/access/signin');
      $stateProvider
        .state('chart', {
          url: '/chart-view',
          templateUrl: 'path/to/your/view',
          resolve: {
            store: function ($ocLazyLoad) {
              return $ocLazyLoad.load(
                {
                  serie: true,
                  name: "chart.js",
                  files: [
                    "path/to/Chart.min.js",
                    "path/to/anguar-chart.min.js",
                  ]
                }
              );
            }
          }
        });
      }
    ]
  );

@m98
Copy link
Author

m98 commented Oct 8, 2016

Thanks 👍

very useful, I also added an answer on Stackoverflow for users who are not using ui-router (of course not very different)

@alo
Copy link

alo commented Oct 9, 2016

cool! so you can close the issue!

@m98 m98 closed this as completed Oct 9, 2016
@ignivaravinderrikhi
Copy link

It actually works .... Hey can you explain me how it is injecting dependency ... TIA ...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants