遅延読み込み(ocLazyLoad)機能(ngAnimate、ui-bootstrapなど)の依存関係を宣言するにはどうすればよいですか?

user2227400

特定のビューに対してのみangular-animateとangular-ui-bootstrapをロードしたいので、oc.lazyLoadを使用します。ほとんどの場合、正しく機能します。

次の例では、いくつかの問題があります(エラー:[$ injector:nomod]モジュール 'ngAnimate'は使用できません!):

それが私のモジュールです:

angular.module('myApp.whatEver', ['oc.lazyLoad', 'ngAnimate', 'ui.bootstrap'])

.controller('WhatEverController', ['$ocLazyLoad', function($ocLazyLoad) {
    $ocLazyLoad.load('icons_and_fonts');  // works
    $ocLazyLoad.load('angular-animate');  // does not work
    $ocLazyLoad.load('angular-ui-bootstrap'); // does not work
 }]);

問題は、依存関係( 'ngAnimate'と 'ui-bootstrap')を下のコントローラーに配置し、遅延ロードするため、依存関係を宣言するのは時期尚早です。

それを行う正しい方法は何ですか/どのようにですか?

次の例はエラーなしで実行され、ng-Animateとui-boostrapがロードされていますが、依存関係がないため、ビューでは使用できません。

angular.module('myApp.whatEver', ['oc.lazyLoad'])

.controller('WhatEverController', ['$ocLazyLoad', function($ocLazyLoad) {
    $ocLazyLoad.load('icons_and_fonts');  // works
    $ocLazyLoad.load('angular-animate');  // is loaded but not available
    $ocLazyLoad.load('angular-ui-bootstrap'); // is loaded but not available
 }]);

現在、スクリプトファイルを直接統合し(メインビュー-index.html)、遅延読み込みを行わない場合にのみ機能します(私の目的ではありません)。

抜粋:index.html

<script src="components/angular-ui-bootstrap/ui-bootstrap-tpls-0.14.1.min.js"></script>  
<script src="components/angular-animate/angular-animate.min.js"></script>

抜粋:Whatever.js

    angular.module('myApp.whatEver', ['oc.lazyLoad', 'ngAnimate', 'ui.bootstrap'])

.controller('WhatEverController', ['$ocLazyLoad', function($ocLazyLoad) {
    $ocLazyLoad.load('icons_and_fonts');  // works
 }]);

ocLazyLoadProvider.configに関するいくつかの追加情報(回答には必要ありませんが、完全を期すため)。

// LAZY LOAD
    $ocLazyLoadProvider.config(
        {
            modules: [
                {
                    name: 'icons_and_fonts',
                    files: [
                        'components/font-awesome/css/font-awesome.min.css',
                        'components/weather-icons/css/weather-icons.min.css'
                    ]
                },
                {
                    name: 'angular-ui-bootstrap',
                    files: [
                        'components/angular-ui-bootstrap/ui-bootstrap-tpls-0.14.1.min.js'
                    ]
                },
                {
                    name: 'angular-animate',
                    files: [
                        'components/angular-animate/angular-animate.min.js'
                    ]
                }
            ],
            debug: true,
            events: true
        }
    )
icfantv

いくつかのこと:

  1. Angular UI Bootstrapを追加する前に、コアAngularモジュールを最初にブロックに配置します。
  2. 遅延読み込みで何を達成しようとしていますか?

IMO、ここでの正しい解決策は、本当に遅延読み込みが必要な場合、CommonJS(できれば後者、CommonJS付きのES6)でAMDまたはES6インポート構文を使用することです。これは、設計上必要なことを実行し、サードパーティを必要としないためです。図書館。

最後に、この質問はAngularまたはAngular UIブートストラップとは関係ありませんが、一般的なJavascriptモジュールのロードとは関係ありません。2つを2つのランダムであるが関連するライブラリに置き換えることができ、同じソリューションが適用されます。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ