Lazy контроллер загрузки из отдельного файла с помощью поставщика состояния

Question

Итак, я пытаюсь динамически загружать файл, который добавляет контроллер в мой основной модуль. Дело в том, что я не хочу ссылаться на сам файл в теге скрипта.

Чтобы уточнить, у меня есть два файла контроллера. Основной файл контроллера mainController.js ссылается на мой файл index.html. Любой контроллер, который я добавляю в этот файл, загружается без проблем.

Файл контроллера я хочу использовать для моей страницы входа login.js, содержит следующую информацию:

function LoginCtrl($http){ 
    console.log("Controller loaded"); 
}; 

angular 
    .module('inspinia') 
    .controller('LoginCtrl', LoginCtrl); 

Все мои файлы контроллеров находятся в той же папке, однако, вопреки mainController.js, файл login.js делает не отображаются в файле .html.

Мое намерение состояло в том, чтобы загрузить файл login.js динамически внутри моей stateProvider так:

$stateProvider 
... 
.state('logins', { 
      url: "/logins", 
      templateUrl: "views/login.html", 
      controller: LoginCtrl, 
      data: { pageTitle: 'Login', specialClass: 'gray-bg' }, 
      resolve: { 

       loadPlugin: function($ocLazyLoad) { 
        return $ocLazyLoad.load ({ 
        name: 'inspinia.LoginCtrl', 
         files: ['js/controllers/login.js'] 
        }); 
       } 
      } 
     }) 
... 

До тех пор пока я не пытаюсь динамически загружать файл login.js (так что добавление ссылки на файл в .html или добавление кода контроллера входа в файл mainController.js) все работает. Но как только я попытаюсь удалить ссылки, чтобы заставить stateProvider позаботиться о загрузке, я получаю Error: $injector:modulerr

Кто-нибудь знает, как правильно обращаться к lazyLoader, поэтому я могу загружать только свои .js-файлы, когда мне нужно их?

EDIT info: Что-то, о чем я забыл упомянуть: сама часть загрузки файлов работает. Если я не вызываю контроллер в любом месте и загружаю его. Я вижу, что файл контроллера загружается браузером. Но проблема, похоже, связана с временным вопросом. Если я упоминаю имя контроллера внутри .state(), угловые попытки получить к нему доступ, прежде чем он загрузится, и все это произойдет, прежде чем загружать файл.

Answer 1

Я рекомендую вам просмотреть ocLazyLoad, чтобы узнать, как объявлен контроллер и загружается с UI-маршрутизатор решительность госсобственности:

https://oclazyload.readme.io/docs/with-your-router

в принципе, я думаю, что не хватает в вашем подходе заключается в использовании декларации строка контроллера, а не одну функцию:

$stateProvider 
... 
.state('logins', { 
     url: '/logins', 
     templateUrl: 'views/login.html', 
     controller: 'LoginCtrl as login', 
     data: { 
      pageTitle: 'Login', 
      specialClass: 'gray-bg' 
     }, 
     resolve: { 
      loadPlugin: function($ocLazyLoad) { 
       return $ocLazyLoad.load('js/controllers/login.js'); 
      } 
     } 
    }) 
... 

Совет, который важен для использования: упрощает первую реализацию того, что вы раньше не использовали. В вашем примере показано множество параметров службы ocLazyLoad. Попробуйте загрузить первый необходимый вам элемент, постепенно добавляя один за другим после его успешного завершения, потому что иногда вы можете быть на правильном пути и что-то вроде этого, о котором вы не знаете, может привести вас к отладке loooooong рутина.

Кроме того, посмотрите на пример ниже:

https://github.com/ocombe/ocLazyLoad/tree/master/examples/complexExample

Он имеет государственную декларацию очень похож на ваш. Сравните друг друга и измените в соответствии с вашими потребностями.