Внедрение ресурсов javascript из функции javascript

Question

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

Если я внедряю файлы таким образом, все работает хорошо:

// create version param
    var currVersion = '?v=' + new Date().getTime();

    // get head elemtn
    var head = document.getElementsByTagName("head")[0];

    /**
     * inject script into page
     */
    function appendScript(url) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;
        script.async = false;
        head.appendChild(script);
    }

    // css
    head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" type="text/css" href="vendors.min.css' + currVersion + '">');

    // javascript
    appendScript('vendors.min.js' + currVersion);

Теперь я пытаюсь внедрить ресурсы со значением версии, полученным службой, поэтому я пытаюсь что-то вроде этого:

// get head element
    var head = document.getElementsByTagName("head")[0];

    // request for version
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            importRes(JSON.parse(this.responseText).VersionNumber);
        }
    };
    xhttp.open("GET", "https://example.com/getVersion", true);
    xhttp.send();

    /**
     * inject script into page
     */
    function appendScript(url) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;
        script.async = false; 
        head.appendChild(script);
    }

    /**
     * import resources with version param
     */
    function importRes(version) {

        // create param string
        var currVersion = '?v=' + version;

        // css
        head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" type="text/css" href="vendors.min.css' + currVersion + '">');

        // javascript
        appendScript('vendors.min.js' + currVersion);
    }

В моем vendors.min.js я свернул некоторые библиотеки javascript (в которых angularjs). Внедрение сценария со вторым способом генерирует эту ошибку:

vendors.min.js?v=6:16 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=app&p1=ReferenceErr…vendors.min.js%3Fv%3D6%3A30%3A69)

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

У кого-нибудь есть идеи?

Answer 1

Вы можете взглянуть на этот проект, который предлагает базовый проект для использования AngularJS с RequireJS для загрузки по требованию необходимых js-файлов. https://github.com/tnajdek/angular-requirejs-seed

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

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

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