The controller loads in the DOM, but the view does not load and cannot find the controller - oclazyload with jade (pugjs)

Question

I am using angular 1.6 for my project and angular -ui-routing for routing using PugJ templates for HTML. I'm trying to implement Lazyload in my application, but somehow it doesn't work, possibly due to jade. code:

var app = angular.module('myApp',['ui.router','oc.lazyLoad']); app.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider { $ocLazyLoadProvider.config({ debug: true, modules: [{ name: 'js', files: ['js/*'] }] }); }]); .state("exampleState", { url: '/example', templateUrl: '/example', controller:'exampleCtrl', resolve: { deps: ['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load({ files: ['/js/exampleCtrl.js'] }) }] } }) 

Controller:

 app.controller('exampleCtrl',function($scope){ console.log('controller loaded'); }); 

and in the frontend I use node to convert these jades to HTML, so when "templateUrl" gets access through routing services, it will be redirected to this code:

 app.get('/example', function(req, res) { res.render('/example'); }); 

loads the example.jade example. I get it in the console

[$ controller: ctrlreg] A controller named 'exampleCtrl' is not registered.

Even after the controller file is loaded into the DOM, and viewing is not rendering. Any help regarding the issue is appreciated. thank you

Answer 1

After too much searching and trying to find a solution, the problem was a global variable for the module when building the controller. Instead of using

 app.controller('exampleCtrl',function($scope){ console.log('controller loaded'); }); 

I used angular.module('myApp').controller(,,,);

Link: ocLazyLoad problems

Answer 2

I think you should do it a little differently. Try the following:

 $stateProvider.state('exampleState', { url: "/example", views: { "exampleLazyLoadView": { controller: 'exampleCtrl', templateUrl: '/example.html' } }, resolve: { // Any property in resolve should return a promise and is executed before the view is loaded loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load('/js/exampleCtrl.js'); }] } });