0

我们目前正在研究 AngularJS 用于使用 Phonegap 的 iPad 的儿童应用程序。有使用 CreateJS 构建的活动和小游戏。当用户在菜单中选择它们时，我们希望动态地包含这些游戏或活动。如何在 Angular 模板中加载游戏相关的 JS 文件？ng-include 在这里有帮助吗？

4

2 回答 2

2

我的第一直觉是为您想到的各种游戏建议ng-view和创建路线。$routeProvider这是改编自角度文档（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将按需加载，但这仍然假设您的控制器（Game1Cntl在Game2Cntl此示例中）在用户访问您的菜单以更改应用程序中的路线之前已经加载。

如果您决定还需要按需加载控制器，您可以采用的一种方法是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 下载并执行动态加载的脚本。它也被注入了 Angular$q来创建一个承诺。

请注意，与resolve在控制器中注入值的选项的意图相反，这种方法只是利用了这样一个事实，即我们可以返回一个承诺，这为我们提供了一个异步机会来延迟加载控制器（或潜在的其他服务、指令等） .)。我们在这里解决的承诺实际上并不是这种情况下的重点。 也许将来会有或将会有更优雅的方法来解决这个问题。

于 2013-08-03T07:22:03.593 回答
1 
var controllerProvider;

var app = angular.module('myApp', []);
app.config(function($controllerProvider) {
  controllerProvider = $controllerProvider; //cache this reference
});

function myCtrl($scope) { //this controller can be loaded by ajax
 //etc
}
//then register it with Angular like this
controllerProvider.register('myCtrl', myCtrl);

使用此逻辑，您可以轻松地将控制器和指令延迟加载到 Angular 中。有关更多详细信息和现场演示，请参阅以下帖子：

基本演示： AngularJS 中延迟加载数据的指令

现实生活示例（高级）： 在页面滚动时延迟加载 Angular 视图和控制器

于 2013-12-06T04:44:47.580 回答