CODEWITHSUNDEEP
angularjsangular-ui-routerangular-ui-router-extras
looneytunes
looneytunes

Reputation: 731

ui-router states with oclazyload does not load a new module to the app

I am trying to load a new module "testlazy" into the app when defining the states in the app.config using oclazyload and ui-router

Will i need require.js hooked up to load the new module with the existing app? I thought oclazyload will actually reference the new module added into the app. Please correct me if i am on the wrong path

Here is my new module which is placed under 

 /js/testlazy

  module.js
  testlazyController.js

i have a module.js file and testlazyController.js.

in my index.html

  <head>
      <script type="text/javascript" src="../../dist/ocLazyLoad.js">               </script>
         <script type="text/javascript" src="js/app.js"></script>

   </head>



<body class="container">
    <h1 class="page-header">$ocLazyLoad</h1>
    <div ui-view="lazyLoadView"></div>
</body>

My app.js 

 var aModule = angular.module('dApp', ['ui.router','oc.lazyLoad']);


  aModule.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', '$httpProvider', '$ocLazyLoadProvider', function ($locationProvider, $stateProvider, $urlRouterProvider, $httpProvider, $ocLazyLoadProvider) {

$stateProvider
    .state('testlazyload', {
        parent: 'authenticated',
        url: '^/testlazyload',
        templateUrl: 'html/templates/header.html',
        controller: "testlazyController",
        resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
          loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
            // you can lazy load files for an existing module
            return $ocLazyLoad.load('js/testlazy/testlazyController.js');
          }]
        }
    });

    $urlRouterProvider.otherwise('/login');
  }]);

My testlazyController.js

 angular.module('testlazy').controller('testlazyController', ['$scope', '$q', 'ModalService', '$state', '$filter', '$ocLazyLoad',
function ($scope, $q, ModalService, $state, $filter, $ocLazyLoad) {
    console.log("lazyloading complete");
}]);

My module.js

   angular.module('testlazy', []);

I keep getting Error: $injector:nomod Module Unavailable error in my console.

Once i refrence the js files in my index.html using script tags it works but then i am no longer using teh lazy loading correct?

Upvotes: 3

Views: 1950

Answers (1)

Oleksandr Papchenko
Oleksandr Papchenko

Reputation: 2221

I am not quety familiar with ocLazyload and am not sure if this actually will help but try to use this:

loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
        // you can lazy load files for an existing module
        return $ocLazyLoad.load({ name:'testlazy', files: 'js/testlazy/testlazyController.js'});
      }]

or you must configure $ocLazyLoadProvider

$ocLazyLoadProvider.config({
modules: [{
    name: 'testlazy',
    files: ['js/testlazy/testlazyController.js']
}]

}); After configuration you should be able to load the module like this:

loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
        // you can lazy load files for an existing module
        return $ocLazyLoad.load('testlazy');
      }]

Upvotes: 0

Related Questions