0

現在、Phonegap を使用した iPad 用のキッズ アプリケーション用に AngularJS を検討しています。CreateJS で作成されたアクティビティと小さなゲームがあります。ユーザーがメニューで選択したときに、これらのゲームやアクティビティを動的に含めたいと考えています。angularテンプレートにゲーム関連のJSファイルをロードするにはどうすればよいですか? ng-include はここで役立ちますか?

4

2 に答える 2

2

私の最初の本能は、あなたが考えているさまざまなゲームのng-viewルートを提案して作成することです. $routeProviderangular docs ( v1.1.5 )から適応した簡単なスニペットを次に示します。

angular.module('ngView', [], function($routeProvider, $locationProvider) {
  $routeProvider.when('/Game1', {
    templateUrl: 'Game1.html',
    controller: Game1Cntl,
    controllerAs: 'game1'
  });
  $routeProvider.when('/Game2', {
    templateUrl: 'Game2.html',
    controller: Game2Cntl,
    controllerAs: 'game2'
  });

  // configure html5 to get links working on jsfiddle
  $locationProvider.html5Mode(true);
});

で指定されたコンテンツはオンデマンドで読み込まれますが、これは、ユーザーがメニューにアクセスしてアプリケーションのルートを変更する前に、コントローラー (この例では) が既に読み込まれてtemplateUrlいることを前提としています。Game1CntlGame2Cntl

コントローラ自体もオンデマンドでロードする必要があると判断したresolve場合は、$routeProvider. これは、コントローラーがインスタンス化される前にコントローラーに値を注入することを目的としています。ただし、これを使用してコントローラー自体を遅延ロードすることができます。

$routeProvider.when('/Game1', {
    templateUrl: 'Game1.html',
    controller: Game1Cntl,
    controllerAs: 'game1',
    resolve: {
        dynamicallyLoadedController: functionThatReturnsAPromise
    }
  });

ここfunctionThatReturnsAPromiseに次のようなものがあります：

function getAController($q) {
    var deferred = $q.defer();

    $.ajax({
       url: '/where/ever/your/controller/script/is.js',
       dataType: "script",
       success: function(script, status, jqXHR) {
         // make your script available to angular
         // angular will find it on the global window object but that's not real tidy          
         deferred.resolve(script); // at this point angular can proceed with the route
       }
     });

    // TODO: you'd want to handle errors and reject the promise here
    // in a real implementation

    return deferred.promise;
}
getAController.$inject = ['$q']; // for when script is minified

ここでgetAController()は、jQuery を使用して、動的にロードされるスクリプトをダウンロードして実行します。また$q、promise を作成するために angular が注入されています。

コントローラーに値を注入するというオプションの意図に反して、resolveこのアプローチは、コントローラー (または潜在的に他のサービス、ディレクティブなど) を遅延ロードする非同期の機会を与える promise を返すことができるという事実を利用しているだけであることに注意してください。 .)。ここで約束を解決することは、この場合の実際のポイントではありません。 おそらく、将来この問題に取り組むためのよりエレガントな方法があるか、またはそうなるでしょう。

于 2013-08-03T07:22:03.593 に答える