使用Angular UI路由解決方案加載requirejs模塊

我試圖使用require.js來延遲加載一些我的依賴關係的角度，我有幾個問題。使用Angular UI路由解決方案加載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

我個人用戶UI路由器與$ 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

使用Angular UI路由解決方案加載requirejs模塊

回答

相關問題