Wie man einen Controller asynchron lädt und an das Winkelmodul anfügt

Question

Ich habe einen Controller, den ich asynchron abrufen möchte, der die angular-cookies-Bibliothek benötigt.

Daher verwende ich jQuery zum Abrufen und Ausführen der Angular-Cookies-Bibliothek, dann holen Sie und führen Sie die Datei mit dem Controller. Mein aktueller Code ist als unten:

$.getScript("http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-cookies.min.js", function() { 
    app.requires.push('ngCookies'); 
    $.getScript("js/mailListCtrl.php", function() { 
    console.log("Succesfully fetched controller mailListCtrl"); 
    }); 
}); 

Diese Arbeit gut, und beide der Skripte sind in globalem Bereich laufen, aber der Controller mailListCtrl nie an mein Modul angebracht. Dies ist, wie mailListCtrl.js wie folgt aussieht:

console.log("mailListCtrl.js is loaded"); // This is executed 

app.controller('mailListCtrl', ['$http', '$timeout', '$cookies', '$scope', function ($http, $timeout, $cookies, $scope) { 

    console.log("mailListCtrl is loaded, and code is executing"); // This is never executed 

    // Lots of code... 

}]); 

Also mein Problem ist, dass ich nicht in der Lage den Controller zu meinem Winkelmodul nach dem ersten Laden der Seite zu befestigen. Ich wäre sehr dankbar, wenn jemand eine Lösung dafür hätte.

Answer 1

Die Lösung war eigentlich sehr einfach. Da dies vor langer Zeit ist weiß ich nicht mehr, wo ich diese bekam aus, aber das Hinzufügen dieses Code app.config ermöglicht es, Controller nach dem ersten Bootstrapping des Winkelmoduls zu befestigen:

app.controller = function(name, constructor) { 
    $controllerProvider.register(name, constructor); 
    return(this); 
}; 

NB: Denken Sie daran zu injizieren $controllerProvider als Abhängigkeit für app.config

Answer 2

Es klingt wie Sie müssen Ihre App manuell Bootstrap.

$.getScript("http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-cookies.min.js", function() { 
    app.requires.push('ngCookies'); 
    $.getScript("js/mailListCtrl.php", function() { 
    console.log("Succesfully fetched controller mailListCtrl"); 

    var myAppDiv = angular.element("#divThatIsApp"); //in quotes should be the ID of the element where you have ngApp declared 
    angular.bootstrap(myAppDiv, ["app"]); // in quotes should be your app name 
    }); 
}); 

und entfernen Sie die ng-app von Ihrem Element. Wenn Sie eine bestimmte Ansicht neu kompilieren müssen, müssen Sie mit der injector geigen. Technisch gesehen musst du deine App so gestalten, dass du sie nicht neu kompilieren musst.

Hier ist eine good article about bootstrapping angular apps.