Dynamisches Laden von AngularJS-Modulen aus Vorlagen (Views)

Question

Nov 05, 2013, 01:08 AM

angularjs angular-template angular-routing

Dynamisches Laden von AngularJS-Modulen aus Vorlagen (Views)

Hintergrund: Nehmen wir als Argument an, Sie hätten 100.000 Aufrufe (Teilansichten). Nehmen wir auch an, Sie haben zugehörige Controller mit Sichtbereich und potenziell auch Dienste und Filter mit Sichtbereich. Stellen Sie sich eine aggregierte Anwendung vor, die 100.000 verschiedene kleine Anwendungen hostet.

Problem: Wenn Sie "Partials" haben, für die begleitende Controller erforderlich sind, ist die typische Lösung Folgendes:

$routeProvider.when('/app1', {
        templateUrl: 'partials/view1.html',
        controller: 'controller1'
    });

Der Controller wird normalerweise aus index.html geladen über:

<script src="js/directives/Controller1.js"></script>

Das Problem bei diesem Ansatz ist, dass er nicht skaliert. Es gibt Lösungen für das dynamische Laden von Controllern, für die jedoch noch Berührungspunkte in verschiedenen Konfigurationen erforderlich sind.

Ideale Lösung: Idealerweise - auch für sehr kleine Anwendungen, deren Nummern in den Tausendern liegen - könnte der Controller dynamisch und aus dem Partial selbst heraus geladen werden. Dies würde die Notwendigkeit verringern, mehrere Dateien und verschiedene Konfigurations-Kontaktpunkte zu verwalten (von Netzwerkanforderungen ganz zu schweigen) und jeden Teil sehr gut zusammenzuhalten.

Es würde ungefähr so aussehen:

Im Router:

$routeProvider.when('/apps/:appId', {
        templateUrl: 'partials/app-frame.html',
        controller: 'AppCtrl'
    });

In das enthaltene HTML (App-Frame) gehört die relativ unterschiedliche "Mini-App":

<h1>Currently hosting {{appId}}</h1><hr>
<div class="ng-include: appUrl"></div>

Definieren Sie den Controller, der teilweise mit appUrl aufgelöst wurdeund Markup in einem:

<script>
  myApp.controller('controller1', ['$scope', function ($scope) {
    $scope.foo = "bar";
  }]);
</script>


<div ng-controller="controller1">
     {{foo}}
</div>

In Fällen wie diesem, in denen es viele Teiltests und ein 1: 1-Mapping für Controller und Ansicht gibt, kann es sinnvoll sein, beide zu koppeln, um die Entwicklungseffizienz und die Wartung zu optimieren. Es ist viel sauberer als die Verwendung mehrerer Dateien und zusätzlicher Konfigurations-Touchpoints.

Das Problem ist, dass dies nicht funktioniert. Es könnte so einfach sein, das Skript vor dem Anwenden der Direktive zum Laden zu zwingen ... aber nicht sicher, wie das geht?

Hier einige ähnliche Erklärungen des Problems:

https://groups.google.com/forum/#!topic/angular/H4haaMePJU0

Teilweise Seite mit Angular laden und Controller kompilieren

Igor vom AngularJS-Team sagt:

I see.. we looked into supporting script tags in jqlite, but what needs to be done to get a cross-browser support involves a lot of black magic. For this reason we decided that for now we are just going to recommend that users use jquery along with angular in this particular case. It doesn't make sense for us to rewrite one third of jquery to get this working in jqlite.

Aber ich weiß nicht, was er mit "benutze jquery" meint ...JQuery ist bereits in die Anwendung geladen aus index.html (und vor anglejs), aber es klingt so, als müsste ich etwas spezielles innerhalb des Teils selbst tun.

Zu kommentieren