使用browserify以角度延遲加載組件

Question

我正在概述基於角度的相當復雜的應用程序的體系結構。 所以我開始使用角度種子項目，這似乎是一個很好的起點。 困擾我的是，角度應用程序本質上涉及到前期加載所有內容。 使用腳本加載器，似乎沒有一個干凈的方法。

我來自backbone.js背景，在那里它很安靜直接使用require.js進行基於路由器回調的延遲加載。 角度路線在某種程度上定義如下：

// Declare app level module which depends on views, and components
angular.module('myApp', [
  'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.when({templateURL:'../tmpl.html',controller:'view1Ctrl'})
.when({templateURL:'../tmpl.html',controller:'view1Ctrl'})
.otherwise({redirectTo: '/view1'});
}]);

現在這里， $routeProvider.when({templateURL:'../tmpl.html',controller:'view1Ctrl'})我想懶洋洋地加載控制器和模板。 我很想使用類似的東西：

$routeProvider.when({templateURL:'../tmpl.html',controller:require('view1Ctrl'})

使用browserify，但它似乎並不干凈，甚至沒有要求。 我知道這個問題在某種程度上已被問過幾次，但我沒有找到一個有力的答案。

我的偏好是使用browserify，因為它支持瀏覽器中備受喜愛的cjs模塊。

Answer 1

我不確定如何使用Browserify，因為我自己從未嘗試過，但我強烈建議您查看ocLazyLoad 。

作為一個獨立的服務，它可以創建加載文件（json，css，js，模板 - 您的名字）並將其注入已經運行的角度應用程序中。

話雖如此，它更好地 （imo）與路由器（默認的角度或ui路由器）相結合。

有一些'種子項目'展示了如何使用ocLazyLoad和SystemJS來實現它。

• https://github.com/Swimlane/angular-systemjs-seed
• https://github.com/lookfirst/systemjs-seed
• https://github.com/lookfirst/ocLazyLoad-SystemJS-Router
• https://github.com/kasperlewau/ng-jspm-seed

---

但你甚至不需要那樣做。

如果你使用ui-router，ui-router-extras和ocLazyLoad，你可以把這樣的東西放到懶惰的負載狀態：

main.js

/** 
 * Inject the needed dependencies into our main module.
 */
var main = angular.module('main', [ 'ui.router', 'ct.ui.router.extras.future', 'oc.lazyLoad' ]);

/**
 * Define the lazy loaded states.
 */
main.constant('lazyLoadedStates', [
  {
    name: 'about',
    url:  '/about',
    type: 'lazy',
    src: [
      '/path/to/about.module.js',
      '/path/to/AboutController.js'
    ]
  }
]);

/**
 * Setup the behaviour for when we hit a futureState with the 'lazy'
 * type. 
 * 
 * 1. Setup a deferred object.
 * 2. Resolve the promise when every file defined in the futureState.src has been loaded.
 * 3. Return the promise.
 */
main.config(function ($futureStateProvider, lazyLoadedStates) {
  $futureStateProvider.stateFactory('lazy', function ($q, $ocLazyLoad, futureState) {
    var deferred = $q.defer();

    $ocLazyLoad.load(futureState.src).then(function () {
      deferred.resolve();
    });

    return deferred.promise;
  });

  lazyLoadedStates.forEach($futureStateProvider.futureState);
});

---

這就是“框架” - 現在你只需要繼續添加更多模塊，使用更多代碼，並將實際狀態定義與lazyLoadedStates常量中的虛擬定義相匹配。

about.module.js

/** 
 * Setup the _real_ '/about' state in this lazy loaded file.
 */
angular.module('about', []).config(function ($stateProvider) {
  $stateProvider.state('about', {
    url: '/about',
    controller: 'AboutController',
    template: 'some_template.html'
  });
});

AboutController.js

/** 
 * Register the AboutController in a lazy loaded file. This could be done in about.module.js aswell,
 * but we'll do it here to separate stuff and showcase loading of multiple files. 
 */
angular.module('about').controller('AboutController', function ($state) {
  console.log('Im on a lazy loaded state!', $state.current);
});

---

我希望這能讓您大致了解如何在Angular中設置延遲加載狀態。 我還沒有找到一種更簡單的方法來做到這一點，但我確定有關於如何將ui-router（或默認的角度路由器）與其他'lazy-loader'耦合的文章。

文檔鏈接：

• ocLazyLoad
• UI的路由器額外＃的未來