Использование Угловой ui-routing разрешает загружать модули requirejs

Я пытаюсь использовать require.js для ленивой загрузки некоторых из моих зависимостей в угловом режиме, и у меня есть несколько проблем.Использование Угловой ui-routing разрешает загружать модули requirejs

Я считаю, что следующий код должен пытаться загрузить контроллер регистра перед угловым neeeds него (с помощью углового-UI-маршрутизатор):

.state('register', { 
    url: '/register', 
    class: 'login', 
    title: 'Register', 
    templateUrl: 'app/security/register.view.html', 
    controller: 'RegisterController', 
    controllerAs: 'register', 
    resolve: { 
     require: function ($q) { 
     return $q(function (resolve, reject) { 
      console.log('security/register.controller loading') 
      require(['security/register.controller'], function() { 
      console.log('security/register.controller loaded') 
      resolve() 
      }) 
     }) 
     } 
    } 
    })

Но при переходе от состояния входа в состояние регистра, я получить следующий вывод в консоли:

RouteChanged Login 
security/register.controller loading 
security/register.controller loaded 
RouteChanged Register 
Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?p0=RegisterController&p1=not%20aNaNunction%2C%20got%20undefined

Так что даже если прогоны решимости, угловатый выдает ошибку о том, что не может найти RegisterController.

Here's a link to a plunker. Как вы можете видеть, контроллеры не загружаются при нажатии на ссылки, и сообщение об ошибке отображается в консоли.

источник

2017-02-15 Steve Johnstone

Я лично пользователю интерфейс маршрутизатора с провайдером $ ocLazyLoad https://github.com/ocombe/ocLazyLoad

Его более простым и прекрасно работает. Вот пример:

 .state('dashboards.dashboard_2', { 
       url: "/dashboard_2", 
       templateUrl: "views/dashboard_2.html", 
       data: { pageTitle: 'Dashboard 2' }, 
       resolve: { 
        loadPlugin: function ($ocLazyLoad) { 
         return $ocLazyLoad.load([ 
          { 
           serie: true, 
           name: 'angular-flot', 
           files: [ 'js/plugins/flot/jquery.flot.js', 'js/plugins/flot/jquery.flot.time.js', 'js/plugins/flot/jquery.flot.tooltip.min.js', 'js/plugins/flot/jquery.flot.spline.js', 'js/plugins/flot/jquery.flot.resize.js', 'js/plugins/flot/jquery.flot.pie.js', 'js/plugins/flot/curvedLines.js', 'js/plugins/flot/angular-flot.js', ] 
          }, 
          { 
           files: ['js/plugins/jvectormap/jquery-jvectormap-2.0.2.min.js', 'js/plugins/jvectormap/jquery-jvectormap-2.0.2.css'] 
          }, 
          { 
           files: ['js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js'] 
          }, 
          { 
           name: 'ui.checkbox', 
           files: ['js/bootstrap/angular-bootstrap-checkbox.js'] 
          } 
         ]); 
        } 
       } 
      })

источник

2017-02-16 17:48:03

Я обнаружил, что после того, как я отправил свой ответ, он выглядит очень полезным. Я проверю это, спасибо :) –

После изучения ocLazyLoad кажется, что он не обрабатывает зависимости, поэтому мне нужно вернуться к указанию всех имен файлов вручную. Это правда? –

Как так? Потому что в этом примере все эти скрипты являются зависимыми для работы модуля. –

Попробуйте это:

resolve: { 
     require: function ($q) { 
     //tell ui-router to wait 
     var deferred = $q.defer(); 
      console.log('security/register.controller loading') 

      require(['security/register.controller'], function() { 
      console.log('security/register.controller loaded') 
      deferred.resolve() 
      }); 
     return deferred.promise; 
     }

источник

2017-02-15 16:00:21 Valter

Я попробовал это и получил тот же результат. Интересно, что если я добавлю инструкцию require ранее в свой код, она также не загружается, поэтому я думаю, что это связано с тем, как я организую и загружаю свои модули. –

Как выглядит ваш контроллер? у вас есть требование как один из параметров ввода – Valter

Я пробовал это как с параметром ввода, так и без него. Он вызывает его в правильном порядке даже без параметра, но все равно не загружается должным образом. –

Оказывается, проблема была с неверным предположением, что вы могли бы добавить контроллер угловые после начальной загрузки, который, по-видимому вы можете, просто не так же, как и вы заранее самозагрузки. Если вы добавляете их после загрузки, вам необходимо кэшировать копию поставщика контроллера, а затем зарегистрировать контроллер с этим провайдером. Я добавил следующий код:

var app = angular.module('app', ['ui.router']) 

var cachedProviders = {} 
    app.config(['$controllerProvider', 
    function(controllerProvider) { 
     cachedProviders.$controllerProvider = controllerProvider; 
    } 
    ]); 
    $(function(){ 
    app.controller = function (name, controller) { 
     console.log('Loading (using post-boostrap loader):', name) 
     cachedProviders.$controllerProvider.register.apply(this, arguments) 
    } 
    })

К моему файлу модуля приложения и он начал работать. Я не совсем уверен, что у этого будут негативные побочные эффекты, но пока он делает то, что я хочу.

источник

2017-02-16 14:07:49

Использование Угловой ui-routing разрешает загружать модули requirejs

ответ

Смежные вопросы