動態加載一個角度的應用程序中的JS文件

Question

我們目前正在使用Phonegap調查iPad的兒童應用程序的AngularJS。有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指定的內容將按需加載，這還是假設你的控制器，在這個例子中Game1Cntl和Game2Cntl，在用戶訪問菜單以更改應用程序中的路線之前已經加載。

如果您決定還需要根據需要自行加載控制器，則可以採用的一種方法是使用$routeProvider的resolve選項。這是爲了在實例化控制器之前將值注入控制器。但是，您可以使用它來延遲加載控制器本身。

$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來創造一個承諾。

注意違背resolve選項，這是注入在控制器的值這種方法只是利用了這一事實，我們可以返回一個承諾這給了我們一個異步的機會，懶負荷控制器的意願（或潛在其他服務，指令等）。我們在這裏解決諾言實際上並不是這種情況下的重點。也許現在或將來會有更優雅的方式來解決這個問題。

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