web-dev-qa-db-ja.com

angular UI-Routerのテンプレートとコントローラーの遅延読み込み

UI-Router router.jsファイルにコントローラーとテンプレートを遅延ロードしようとしていますが、テンプレートに問題があります。

コントローラーは適切にロードされますが、ロードされた後、テンプレートをロードする必要があり、ここで問題が発生します。

OcLazyLoadがコントローラーをロードした後、Angular promiseも解決します。これは、templateProviderにも含まれています。問題は、ファイルのロード後にpromise（templateDeferred.promise）を返す代わりに、promiseです。オブジェクトとして返されます。

.state('log_in', {
    url: '/log-in',
    controller: 'controllerJsFile',
    templateProvider: function($q, $http) { 
      var templateDeferred = $q.defer();

        lazyDeferred.promise.then(function(templateUrl) {
        $http.get(templateUrl)
        .success(function(data, status, headers, config) {
            templateDeferred.resolve(data);
        }).
        error(function(data, status, headers, config) {
            templateDeferred.resolve(data);
        });
  });
  return templateDeferred.promise;
 },
 resolve: {
    load: function($templateCache, $ocLazyLoad, $q) {
        lazyDeferred = $q.defer();

        var lazyLoader = $ocLazyLoad.load ({
          files: ['src/controllerJsFile']
        }).then(function() {
          return lazyDeferred.resolve('src/htmlTemplateFile');
        });
        return lazyLoader;
    }
 },
 data: {
  public: true
 }
})
angularjsrequirejslazy-loadingangular-ui-router
13
Rjdlee

わかりました、応答をありがとう、しかし私はそれを理解しました。

.state('log_in', {
url: '/log-in',
controller: 'controllerJsFile',
templateProvider: function() { return lazyDeferred.promise; },
resolve: {
    load: function($templateCache, $ocLazyLoad, $q, $http) {
        lazyDeferred = $q.defer();

        return $ocLazyLoad.load ({
          name: 'app.logIn',
          files: ['src/controllerJsFile.js']
        }).then(function() {
          return $http.get('src/htmlTemplateFile.tpl.html')
            .success(function(data, status, headers, config) {
              return lazyDeferred.resolve(data);
            }).
            error(function(data, status, headers, config) {
              return lazyDeferred.resolve(data);
            });
        });
    }
},
data: {
  public: true
}

}）

だから、もう少し読んだ後、私は自分の約束に問題があることに気づきました。 lazyDeferredという名前のテンプレートを作成します。これは、templateProviderに返され、グローバル変数として宣言されます。 templateProviderは、promiseが満たされるのを待ちます。

コントローラーを読み込んだ後、XHR/$ httpリクエストを作成してテンプレートファイルを取得します。 $ http.getはプロミスなので、それを返すことができます。$ ocLazyLoad.loadもプロミスなので、それを返すこともできます。最後に、lazyDeferredの1つを解決する必要があるだけであり、promiseを拡張してすべてを解決すると思います。

これがあまり明確でない場合はお詫び申し上げます。これがどのように機能するかは100％わかりません。

11
Rjdlee

コントローラを遅延ロードする場合は、以下の詳細な回答に従うことをお勧めします。

HTMLテンプレートを動的にロードする必要がある場合は、はるかに簡単です。このQ＆Aの例があります

（ working plunker ）

$stateProvider
  .state('home', {
    url: '/home',
    //templateUrl: 'index5templateA.html',   (THIS WORKS)
    templateProvider: function(CONFIG, $http, $templateCache) {
        console.log('in templateUrl ' + CONFIG.codeCampType);

        var templateName = 'index5templateB.html';

        if (CONFIG.codeCampType === "svcc") {
             templateName = 'index5templateA.html';
        } 
        var tpl = $templateCache.get(templateName);

        if(tpl){
          return tpl;
        }

        return $http
           .get(templateName)
           .then(function(response){
              tpl = response.data
              $templateCache.put(templateName, tpl);
              return tpl;
          });
    },

これらもチェックできます：

4
Radim Köhler