up vote 0 down vote favorite

I'm trying to lazy load a directive in my angular app, using ui.router and oc.lazyLoad. Here is my code :

menu : 

<ul>
      <li><a ui-sref="home">Home</a></li>
      <li><a ui-sref="demo">Demo</a></li>
      <li><a ui-sref="test">Test</a></li>
    </ul>
    <ui-view></ui-view>

route config :

angular.module('app', ['ui.router', 'oc.lazyLoad'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
        $stateProvider
          .state("demo", {
            url:'/demo',
            views: {
              'lazyLoadView' : {
                template: '<demo-directive></demo-directive>'
              }
            },
            resolve : {
              loadDemoModule : ['$ocLazyLoad', function($ocLazyLoad) {
                console.log('resolving demo lazy load');
                return $ocLazyLoad.load('demo.js');
              }]
            }
          })
          .state("home", {
            templateUrl : 'core/home.html',
            url : '/home'
          })
}])

and the directive :

angular.module('app').
directive('demoDirective', function() {

  return {
    restrict: 'E',
    scope: {},
    template: require('./demo-directive.html'),
    // templateUrl: 'demo-directive.html', 
    controllerAs: 'demo',
    controller : ['$timeout', function($timeout) {
      console.log('in directive controller');
    }]
  };

});

I have no errors, the console.log in resolve function is displayed, the demo.js file is loaded but then noting is happening, console form directive controller is not displayed. I'm trying to follow the first example from ocLazyLoad example

Thanks

share
up vote 1 down vote

How about lazy loading this way.

return $ocLazyLoad.load({
                        name: 'app.demo',
                        files: ['path/to/demo.js']
                    })
share
    
Thanks for the tip, unfortunately my directive is still not loaded. – magneto Mar 1 '16 at 10:10
    
since you app module and directive module name is different, isn't it necessary to inject your directive module name to main module – nabin Mar 1 '16 at 10:15
up vote 0 down vote

You have not declared the oc.lazyLoad module as a dependency.

angular.module('app.demo', ["oc.lazyLoad"])

See the quickstart - https://oclazyload.readme.io/docs/

You're also not closing your demo directive 

 template: '<demo-directive></demo-directive>'
share
    
I updated my code, my route config is attached to another module which includes the oclazyload dependency. I updated my post. I also added closing tag for directive, but still the same problem. – magneto Mar 1 '16 at 10:05
    
You're declaring two seperate modules. App and App.Demo, you need to connect them, add app.demo as a dependency for app. Just as an example, have a look at the modules section of this style guide by jon papa. github.com/johnpapa/angular-styleguide/blob/master/a1/… Another alternative is to keep them in the same module, so you would change this "angular.module('app.demo', [])" to "angular.module('app') " – Ashley Kurkowski Mar 1 '16 at 10:45
    
thanks, I didn't see this. I updated my code with "angular.module('app') " but still no luck. – magneto Mar 1 '16 at 12:46

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.