46

フレームワークに似たプロジェクトに取り組んでおり、インストールできるアプリ/モジュールがいくつかあります。基本的なアプリストアまたは google.play ストアのように見てください。これは一種のイントラネット アプリケーションであり、すべてのモジュールをユーザー アカウントに追加できます。

フレームワークはすでに開発中ですが、現在、アプリケーション/モジュールのアイデアに頭を悩ませています。(開発中の概念実証へのリンクは、ここにあります)

アプリケーションはある程度スタンドアロンである必要があり、フレームワークからスクリプトを突然含めることはできません。これは、次のように個別のモジュールで構造化することで完全に可能です。

angular.module('myApp', []);

ただし、アプリにはテンプレート、スクリプト、css を含めることができ、別のサーバーで実行できるため、スクリプトと cssfile を取得してアプリに動的にロードする最良の方法を探しています。ユーザーがappフレームワーク内から in を開始したとき。

  • 現在、たとえばwww.framework.com/apps/myapp/views/app.html、メイン テンプレートがあるかのようにアプリを構成しています。簡単にするために、アプリケーションごとに 1 つのスクリプト ファイルにスクリプトをバンドルしているため、www.framework.com/apps/myapp/script.js含まれる もあります。

フレームワークには、アプリをロードするテンプレートとappController. テンプレートには次の部分が含まれています。

<div data-ng-controller="AppController" data-ng-include="app.appTemplate">
    <div>loading...</div>
</div>

これは基本的に$scope.app.appTemplate、すべてのスクリプトがロードされたときに更新される にバインドされるため、最初にロード テンプレートが表示され、後でスクリプトがページに含まれた後app.appTemplate、上記のアプリケーションのメイン テンプレートに更新されます。

最初のインデックス テンプレートの読み込みは機能しますが、このテンプレートは現在フレームワークから読み込まれているため、独自のスクリプトではなくフレームワークのAppControllerを使用しています。$scope

私はまだアプリの独自のAngularモジュールを何らかの形で開始し、フレームワークで何も実行せずにそれを「機能させる」必要があります

依存する JavaScript ファイルを最適にロードする方法をまだ考えています (おそらく requrejs またはその他の依存関係ローダーを使用します)。AppController

編集

目前の問題を示すために小さなデモ プロジェクトを作成しました。完全なコードは git-hubで見ることができます。このプロジェクトではいくつかのハード コードが行われています。コンセプトは正しく、フレームワーク内にアプリケーションをロードすることがすべてです。それが可能であれば、URL とアプリケーション名をどこから取得するかを考えることができます...

4

5 に答える 5

26

現在受け入れられている答えに反して、実際には可能です。

私は同様の問題に取り組んでいましたが、私の場合、提案された回答は受け入れられませんでした。以前は複数のアプリケーションを含むページを作成していましたが、それは数年前のことで、アプリケーションは互いに独立していました。基本的にやることは次の2つです。

  • 子要素を無視するようにメイン アプリケーションに指示します。
  • 子要素をブートストラップします。

AngularJS に要素を無視するように指示するだけのng-non-bindable属性があります。これで最初の問題が処理されます。

ただし、子要素をブートストラップしようとすると; AngularJS はエラーをスローし、既にブートストラップされていることを伝えます (少なくとも私にとっては、バージョン 1.2.13)。次のトリックは仕事をします：

<div ng-non-bindable data-$injector="">
  <div id="bootstrap-me">
    <script src="/path/to/app.js"></script>
    <div ng-include="'/path/to/app.html'"/>
  </div>
</div>

このソリューションは完璧ではありません。理想的には、ng-non-bindable 属性は必要な data-$injector 属性を要素に追加できます。私は機能を作成し、できれば AngularJS にプル リクエストを送ります。

プルリクエストをする機会がありませんでした。どうやら予想どおり、一部の内部構造が変更されましたが、ng-non-bindable は Ventzy Kunev のデモ コードを使用してバージョン 1.3.13 で動作しています (ありがとうございます。以下のリンクを参照してください)。

于 2014-03-05T15:57:19.797 に答える
4

各サブアプリが独自のモジュールにある場合は、 angular.bootstrap を使用してそのモジュールを動的にロードできます。特定のアプリの URL が読み込まれると、必要なスクリプトを取得できます。次に、promise が解決されると、次の行に沿って何かを実行できます。

// grab a reference to the element where you'll be loading the sub-app
var subapp = document.getElementById('subapp-id');

// assuming the script you get back contains an angular module declaration named
// 'subapp', manually start the sub-app
angular.bootstrap(angular.element(subapp), ['subapp']);

お役に立てれば

于 2013-08-19T13:42:51.197 に答える