2013-11-05 11 views
7

背景:あなたは100,000回のビュー(部分)を持っているとします。また、ビュースコープのコントローラ、およびビュースコープのサービスやフィルタを付随させているとします。 100,000種類の異なる小さなアプリケーションをホストする集約アプリケーションを想像してみてください。テンプレート(ビュー)内からAngularJSモジュールを動的にロード

問題:

$routeProvider.when('/app1', { 
     templateUrl: 'partials/view1.html', 
     controller: 'controller1' 
    }); 

コントローラは、通常経由のind​​ex.htmlからロードされる:あなたは添付のコントローラを必要とする「パーシャル」を持っている場合は、一般的なソリューションは、このような何かを行うことです

<script src="js/directives/Controller1.js"></script> 

このアプローチの問題は、拡大縮小しないことです。コントローラーを動的にロードするためのソリューションはありますが、さまざまな設定でタッチポイントを追加する必要があります。

理想的な解決策:数値が000である非常に小さなアプリケーションでは、コントローラを動的にロードすることができ、パーシャル自体からも理想的です。これにより、いくつかのファイルといくつかの設定タッチポイント(ネットワーク要求はもちろん)を管理する必要性が緩和され、それぞれの部分がきちんと整えられます。

それはこのようなものになります。ルータで

<h1>Currently hosting {{appId}}</h1><hr> 
<div class="ng-include: appUrl"></div> 
:HTML(アプリフレーム)を含むで

$routeProvider.when('/apps/:appId', { 
     templateUrl: 'partials/app-frame.html', 
     controller: 'AppCtrl' 
    }); 

は比較的異種の "ミニアプリ" が含ま

appUrlで部分的に解決された場合、コントローラマークアップを1つに定義します。

<script> 
    myApp.controller('controller1', ['$scope', function ($scope) { 
    $scope.foo = "bar"; 
    }]); 
</script> 


<div ng-controller="controller1"> 
    {{foo}} 
</div> 

このような場合は、コントローラーとビューの部分的なマッピングと1-1のマッピングが多い場合、開発効率とメンテナンスのために2つを結合することが理にかなっています。いくつかのファイルと追加の設定タッチポイントを使用するよりもはるかにクリーンです。

問題は、これは機能しません。これは、ディレクティブを適用する前にスクリプトを強制的に読み込むように簡単にすることはできますが、それを行う方法がわかりません。ここで

は、問題のいくつかの同様の説明です:

I see.. we looked into supporting script tags in jqlite, but what needs to be done to get a cross-browser support involves a lot of black magic. For this reason we decided that for now we are just going to recommend that users use jquery along with angular in this particular case. It doesn't make sense for us to rewrite one third of jquery to get this working in jqlite. 

しかし、私にはありません。

https://groups.google.com/forum/#!topic/angular/H4haaMePJU0

Loading Partial Page With Angular and Compile The Controller

イゴールはAngularJSチームから言います彼が何を意味するか知っている " jqueryを使用してください... JQueryはすでにindexからアプリケーションにロードされています。html(そしてangularjsの前)ですが、私は部分的にその中で具体的に何かをする必要があるように思えます。

+1

チェックアウト:http://weblogs.asp.net/dwahlin/archive/2013

あなたは、コントローラの前やPOSのブートストラップを追加できるようにする方法を、次の関数を登録し、元のコントローラをオーバーライドすることができます/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx – TheSharpieOne

+1

@ TheSharpieOne - ありがとう、これは良いアプローチですが、問題は解決しません。低レベルの問題の声明は次のとおりです。'を追加してください。それは、「角を使ってjqueryを使う」という意味です。 Angularはそのjqliteを使用する代わりにjQueryを使用します。それはすべての部分にある必要はなく、そのレベルでさえそれは遅すぎます。 Angularはすでにjqliteを使用することに決めました。 – TheSharpieOne

答えて

関連する問題