Динамически добавлять скрипты в мое приложение в зависимости от условий - PullRequest
0 голосов
/ 07 февраля 2019

Я создал plunker для связи с моим вопросом.

У меня есть приложение с несколькими страницами, которое начинается на странице входа.Когда мое приложение загружается в первый раз, оно загружает index.html, который запускает настроенный мной скрипт под названием config.js, на который затем перенаправляется на login.html.Это просто управляет некоторыми настройками, которые я хочу использовать в своем приложении.

В config.js Я настроил window.localStorage.setItem("use_minified",true) и хочу использовать это в login.html, чтобы определить, использовать ли уменьшенные файлы или нетapplication.

Я рассмотрел пару вопросов, таких как этот:

Динамически добавить тег сценария с помощью src, который может включать document.write

Что я пытался (как вы увидите в моем плунжере), но я получаю ошибку:

Uncaught Ошибка: [$ injector: modulerr] Не удалось создать экземпляр модуля myAppdue to: Ошибка: [$ инжектор: номод] Модуль 'myApp' недоступен!Вы либо неправильно написали имя модуля, либо забыли загрузить его.При регистрации модуля убедитесь, что вы указали зависимости в качестве второго аргумента.

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

Мой ответ:

Я сохранил index.html то же самое, так что он вызывает config.js и перенаправляет на login.html.

Я добавил их в свой config.js файл:

function init_scripts() {
    var jsDirectory = "js";
    var jsExtension = ".js";

    if (JSON.parse(window.localStorage.config).use_minified) {
        jsDirectory = "js_min";
        jsExtension = ".min.js";
    }

    loadScripts([
        "../lib/ionic/js/ionic.bundle.js",
        "../cordova.js",
        "https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.js",
        "/lib/ionic-datepicker-fork-ionic1/dist/ionic-datepicker.bundle.min.js",
        "/" + jsDirectory + "/app" + jsExtension,
        "/" + jsDirectory + "/page1" + jsExtension,
        "/" + jsDirectory + "/page2" + jsExtension,
        "/" + jsDirectory + "/page3" + jsExtension

    ], null);
}

function loadScripts(array, callback) {
    var loader = function(src, handler) {
        var script = document.createElement("script");
        script.src = src;
        script.onload = script.onreadystatechange = function() {
            script.onreadystatechange = script.onload = null;
            handler();
        }
        var head = document.getElementsByTagName("head")[0];
        (head || document.body).appendChild(script);
    };

    (function run() {
        if (array.length != 0) {
            loader(array.shift(), run);
        } else {
            callback && callback();
        }
    })();
}

В <head> моего login.html я удалил все <script> теги и заменил их:

<head>
   <script src="/js/config.js"></script>
   <!-- Functions found in config.js -->
   <script>
      init_scripts();
      init_stylesheets();
   </script>
</head>

Кажется, все работает довольно хорошо.Я также сделал то же самое для таблиц стилей, как вы можете видеть, я вызываю функцию init_stylesheets();, которая использует ту же концепцию.

0 голосов
/ 07 февраля 2019

Вы должны использовать любой загрузчик зависимостей / модулей, например requirejs, чтобы сделать загрузку зависимостей более организованной в приложении.

Чтобы динамически загружать скрипт в DOM, вы можете использовать функцию, подобную этой -

var loadScript = function (url, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";

    if (script.readyState) {  //IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;

                console.log(url + ' loaded successfully.');

                if ($.isFunction(callback)) {
                    callback();
                }
            }
        };
    } else {  //Others
        script.onload = function () {
            console.log(url + ' loaded successfully.');

            if ($.isFunction(callback)) {
                callback();
            }
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

Эта функция должна находиться в любом скрипте, который загружается заранее (например, config.js).Вы можете избежать второго параметра, если вам не нужно.Это просто дает вам возможность что-то сделать, если вам нужно один раз после загрузки скрипта.

Вот демонстрационный вызов функции загрузки скрипта с использованием myApp -

var myApp = angular.module('myApp', ['ionic','ionic-datepicker','ui.router','toaster','ngAnimate']);

myApp.run(function(){
  config.loadScript('yourScriptPath', null);
})
.config(function($stateProvider, $urlRouterProvider) {

    //==========================================================================//
    // Build the pages up for the application with their respective controllers //
    //==========================================================================//
    $stateProvider
    .state('login', {
        cache               : false,
        url                 : '/',
        controller          : "LoginController",
        templateUrl         : 'login.html'
    })
    .state('page1', {
        cache               : false,
        url                 : '/page1',
        controller          : "page1controller",
        templateUrl         : 'page1.html'
    })
    .state('page2', {
        cache               : false,
        url                 : '/page2',
        controller          : "page2controller",
        templateUrl         : 'page2.html'
    })
    .state('page3', {
        cache               : false,
        url                 : '/page3',
        controller          : "page3controller",
        templateUrl         : 'page3.html'
    });

    $urlRouterProvider.otherwise('/');
});

Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...