Динамическая загрузка модулей AngularJS из шаблонов (представления)
Фон: Давайте предположим, что у вас есть 100 000 просмотров (частичных). Предположим также, что у вас есть сопутствующие контроллеры в области просмотра, а также потенциально сервисы и фильтры в области просмотра. Попробуйте представить агрегирующее приложение, в котором размещено 100 000 разрозненных небольших приложений.
Выпуск: Когда у вас есть «partials», для которых требуются сопровождающие контроллеры, типичное решение - сделать что-то вроде этого:
$routeProvider.when('/app1', {
templateUrl: 'partials/view1.html',
controller: 'controller1'
});
Контроллер обычно загружается из index.html через:
<script src="js/directives/Controller1.js"></script>
Проблема этого подхода в том, что он не масштабируется. Существуют решения для динамической загрузки контроллеров, но они по-прежнему требуют добавления точек соприкосновения в различных конфигурациях.
Идеальное решение: В идеале - опять же для очень маленьких приложений, чьи числа указаны в тысячах, контроллер может быть загружен динамически и из самой части. Это избавит от необходимости управлять несколькими файлами и несколькими точками касания конфигурации (не говоря уже о сетевых запросах), и держать каждый фрагмент очень хорошо сдержанным.
Это будет выглядеть примерно так:
В роутере:
$routeProvider.when('/apps/:appId', {
templateUrl: 'partials/app-frame.html',
controller: 'AppCtrl'
});
В состав html (app-frame) входит относительно несопоставимое «мини-приложение»:
<h1>Currently hosting {{appId}}</h1><hr>
<div class="ng-include: appUrl"></div>
Частично разрешено с appUrl, определить контроллера также разметка в одном:
<script>
myApp.controller('controller1', ['$scope', function ($scope) {
$scope.foo = "bar";
}]);
</script>
<div ng-controller="controller1">
{{foo}}
</div>
Для подобных случаев, когда имеется много частичных вариантов и отображение 1-1 для контроллера и представления, может иметь смысл объединить их для эффективности разработки и обслуживания. Это намного чище, чем использование нескольких файлов и дополнительных точек настройки конфигурации.
Проблема в том, что это не работает. Это может быть так же просто, как заставить скрипт загружаться до применения директивы ... но не знаете, как это сделать?
Вот некоторые похожие объяснения проблемы:
https://groups.google.com/forum/#!topic/angular/H4haaMePJU0
Загрузка частичной страницы с помощью Angular и компиляция контроллера
Игорь из команды AngularJS говорит:
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.
Но я не знаю, что он имеет в виду под "использовать jquery" ...JQuery уже загружен в приложение из index.html (и до angularjs), но, похоже, мне нужно сделать что-то конкретно внутри самого партиала.