Question

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

Answer 1

我的第一直觉是建议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指定的内容将按需加载，但仍假设您的控制器{，1}}和Game1Cntl在此示例中已经在用户访问您的菜单之前加载改变申请中的路线。

如果您决定还需要按需加载控制器，您可以采用的一种方法是使用Game2Cntl的{{1}}选项。这是为了在实例化控制器之前将值注入控制器。但是，您可以使用它来延迟加载控制器本身。

resolve

此处$routeProvider可能类似于：

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

这里functionThatReturnsAPromise使用jQuery下载并执行动态加载的脚本。它也被注入了角度$q来创造一个承诺。

请注意，与在控制器中注入值的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选项的意图相反，这种方法只是利用了我们可以返回一个承诺的事实，该承诺为我们提供了延迟加载的异步机会控制器（或可能的其他服务，指令等）。在这种情况下，我们用这里解决的承诺实际上并非如此。或许将来或将会有一种更优雅的方式来解决这个问题。

Answer 2

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中。有关更多详细信息和现场演示，请参阅以下帖子：

基本演示： Directive for lazyloading data in AngularJS

现实生活中的例子（高级）： Lazy loading Angular views and controllers on page scroll

在角度应用程序中动态加载JS文件

2 个答案: