Одностраничное приложение - загрузка js файла динамически на основе частичного представления

Я только начал изучать Angular и после этого учебника здесь http://docs.angularjs.org/tutorial/step_00

Я загрузил пример семени из GitHub, и он отлично работает. У меня есть вопрос: если частичный вид требует ссылки на внешний файл js, нужно ли его добавлять в файл index.html в начале? Я хочу, чтобы приложение было как можно более быстрым и только хотело включить ссылки js, которые необходимы для настоящего представления. Можно ли динамически загружать js файлы на основе представления?

Ответы

Ответ 1

Я думаю, что эта функция не встроена в AngularJS.

Однако вы можете взглянуть на этот проект, который предлагает базовый проект для использования AngularJS с RequireJS для загрузки по требованию требуемых js файлов.

https://github.com/tnajdek/angular-requirejs-seed

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

Также посмотрите на это сообщение от Браянта Форда (который работает над AngularJS в Google) о создании огромных приложений:

http://briantford.com/blog/huuuuuge-angular-apps.html

Ответ 2

Это просто сработало для меня. Понял, что я разместил его для кого-либо другого, ищущего легчайшее решение.

У меня есть контроллер верхнего уровня на теге html страницы и дополнительный контроллер для каждого частичного представления.

В контроллере верхнего уровня я определил следующую функцию...

$scope.loadScript = function(url, type, charset) {
    if (type===undefined) type = 'text/javascript';
    if (url) {
        var script = document.querySelector("script[src*='"+url+"']");
        if (!script) {
            var heads = document.getElementsByTagName("head");
            if (heads && heads.length) {
                var head = heads[0];
                if (head) {
                    script = document.createElement('script');
                    script.setAttribute('src', url);
                    script.setAttribute('type', type);
                    if (charset) script.setAttribute('charset', charset);
                    head.appendChild(script);
                }
            }
        }
        return script;
    }
};

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

$scope.$parent.loadScript('lib/ace/ace.js', 'text/javascript', 'utf-8');

Там есть небольшая задержка, прежде чем объекты, содержащиеся во внешнем script, будут доступны, поэтому вам нужно будет проверить их существование, прежде чем пытаться их использовать.

Надеюсь, что кто-нибудь кого-нибудь спадет.

Ответ 3

Я просто попробовал https://oclazyload.readme.io/. Это работает из коробки.

bower install oclazyload --save

Загрузите его в свой модуль и введите требуемый модуль в контроллер:

var myModule = angular.module('myModule', ['oc.lazyLoad'])
   .controller('myController', ['$scope', '$ocLazyLoad', '$injector',

       function($scope, $ocLazyLoad, $injector) {
           $ocLazyLoad.load(
                   ['myExtraModule.js',
                       'orAnyOtherBowerLibraryCopiedToPublicFolder.js'
                   ])
               .then(function() {
                   // Inject the loaded module
                   var myExraModule = $injector.get('myExtraModule');
               });
       }
   ]);

Ответ 4

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

http://ify.io/lazy-loading-in-angularjs/

http://www.bennadel.com/blog/2554-Loading-AngularJS-Components-With-RequireJS-After-Application-Bootstrap.htm