динамическое добавление тегов сценариев в угловое приложение

Question

ZI'm создайте приложение, в котором на основе пользовательских настроек/конфигурации я загружу различные модули на страницу.

Для этого, когда страница загружается, я запускаю скрипт, который строит список тегов скриптов и добавляет все теги в тело страницы. Я также создаю список инжекторов зависимостей и включаю зависимости, когда приложение загружается.

Я задерживая приложения нагрузки, используя поставив

 
window.name = "NG_DEFER_BOOTSTRAP!"; 

, а затем после добавления тегов сценария, я бегу

 
angular.element(document).ready(function() { 
     setTimeout(function(){ 
      angular.resumeBootstrap(); 
     },1000); 
}); 

У меня есть две проблемы. Прежде всего, по какой-то причине, если я включаю angular.js в файл конфигурации, я получаю ошибки, ссылающиеся на угловые, которые не найдены.

Я вижу, что угловой загружается в браузер, но я предполагаю, что это проблема времени, так как углы занимают больше времени, чем многие другие файлы.

Я собирался просто поместить углы в обычный тег скрипта, но затем я обнаружил, что для одного из модулей, которые я загружаю, требуются jQuery и jQuery UI, которые должны быть загружены до углового, что означает, что больше файлов загружается как скрипты и, возможно, не нужны для этого пользователя.

Я посмотрел на использование require.js и передавая конфигурации Params в

 
requirejs.config.paths = //the custom built list from the users configuration file 

Но, от того, что я понимаю, что также означает, что я должен был бы обернуть все мои модули в

 
requirejs(['jquery', 'angular', 'otherModule'], 
function ($, angular, otherModule) { 
    // my module stuff here 
}); 

Любые другие предложения о том, как это сделать? Есть ли лучше AMD, чем require.js? Я бы опубликовал весь свой код здесь, но я не думаю, что это помогло бы, поскольку проблема исходит из браузера, загружающего файлы после того, как документ будет готов.

Answer 1

RequireJs - лучшая реализация AMD, насколько я знаю.

Если вы хотите, чтобы указать ваши модули, вам лучше обернуть MODULS в define вызовов:

define(['jquery', 'angular', 'otherModule'], 
function ($, angular, otherModule) { 
    // DO NOT FORGET TO RETURN YOUR MODULE! 
}); 

Кроме того, почему бы вам не начать applicaiton на domReady? Вы можете использовать this requirejs plugin.

Вот базовая конфигурация requirejs для Вашего случая:

requirejs.config({ 
    paths : { 
     jquery : 'libs/jquery', 
     jqueryUi : 'libs/jqueryui', 
     angular : 'libs/angular' 
    }, 
    shim : { 
     angular : {exports : 'angular', deps : ['jquery']}, 
     jqueryUI: {exports : '$', deps : ['jquery']} 
    }, 
    map : { 
     '*' : { 
     domReady : 'require-plugins/domReady' 
     } 
    } 
}); 


requirejs(['domReady!', 'angular'], function(document, angular) { 
    //Thank to domReady!, this callback executes on domReady events. And no need in jquery or angular:) 
});