Dynamiczne ładowanie modułów AngularJS z poziomu szablonów (widoków)
Tło: Załóżmy, ze względu na argument, że masz 100 000 wyświetleń (częściowych). Przypuśćmy również, że towarzyszą Ci kontrolery o zasięgu widoku, a także usługi i filtry potencjalnie o zasięgu widoku. Spróbuj wyobrazić sobie aplikację agregującą, która obsługuje 100 000 różnych małych aplikacji.
Kwestia: Gdy masz „częściowe”, które wymagają towarzyszących kontrolerów, typowym rozwiązaniem jest zrobienie czegoś takiego:
$routeProvider.when('/app1', {
templateUrl: 'partials/view1.html',
controller: 'controller1'
});
Kontroler jest zwykle ładowany z index.html przez:
<script src="js/directives/Controller1.js"></script>
Problem z tym podejściem polega na tym, że nie skaluje się. Istnieją tam rozwiązania do dynamicznego ładowania kontrolerów, ale nadal wymagają dodawania punktów dotykowych w różnych konfiguracjach.
Idealne rozwiązanie: Idealnie - znowu dla bardzo małych aplikacji, których liczby są w tysiącach, kontroler może być ładowany dynamicznie iz samego części. Zmniejszyłoby to potrzebę zarządzania kilkoma plikami i kilkoma punktami dotykowymi konfiguracji (nie wspominając o żądaniach sieciowych) i bardzo dobrze ograniczyło każdą część.
Wyglądałoby to mniej więcej tak:
W routerze:
$routeProvider.when('/apps/:appId', {
templateUrl: 'partials/app-frame.html',
controller: 'AppCtrl'
});
Zawierając html (ramkę aplikacji) zawiera stosunkowo odmienną „mini aplikację”:
<h1>Currently hosting {{appId}}</h1><hr>
<div class="ng-include: appUrl"></div>
W częściowym rozwiązaniu za pomocą appUrl zdefiniuj kontroleri narzut w jednym:
<script>
myApp.controller('controller1', ['$scope', function ($scope) {
$scope.foo = "bar";
}]);
</script>
<div ng-controller="controller1">
{{foo}}
</div>
W przypadkach takich jak ten, w których występuje wiele fragmentów i mapowanie 1-1 dla kontrolera i widoku, sensowne może być połączenie obu w celu zwiększenia wydajności i utrzymania. Jest znacznie czystszy niż użycie kilku plików i dodatkowych punktów dotykowych konfiguracji.
Problem polega na tym, że to nie działa. Może to być tak proste, jak wymuszenie załadowania skryptu przed zastosowaniem dyrektywy ... ale nie wiesz, jak to zrobić?
Oto kilka podobnych wyjaśnień tego problemu:
https://groups.google.com/forum/#!topic/angular/H4haaMePJU0
Ładowanie częściowej strony za pomocą kątowego i kompilującego kontrolera
Igor z zespołu AngularJS mówi:
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.
Ale nie wiem, co on ma na myśli, mówiąc „użyj jquery” ...JQuery jest już załadowany do aplikacji z index.html (i przed angularjs), ale brzmi to tak, jakbym musiał zrobić coś konkretnie w samej części.