it-swarm.com.ru

Angular JS: динамически загружать файлы CSS и JS

Я нахожусь в процессе разработки веб-приложения. Я использую AngularJS для загрузки всех файлов динамически в пользовательский интерфейс.
1. У меня есть и index.html, на который все файлы будут загружаться динамически при нажатии или при загрузке.

    //index.html
    <signin button> <signup button> // etc.,
    //on-clicking signin button a SignIn-page will load in the below div

    <div id="bodyview"></div>
    // end of index.html

Теперь моя страница входа выглядит примерно так:

    /*a div where my accordion menu will load when the 
     *below submit button is clicked*/

    <div id="menu"></div>

    //other sign-in-form stuff will follow on...

    //submit button at the end
    <submit button> //only on clicking the submit button the menu will be loaded

Теперь моя проблема в том, что, хотя я могу загрузить файл accordion menu.html, я не могу загрузить файлы CSS и JS, от которых он зависит. Я изучил большинство обсуждений в стеке и многие другие ... но ни один из них не помог мне.
Может кто-нибудь, пожалуйста, помогите определить способ загрузки зависимостей css и js, используя Угловой JS...?
Любая помощь приветствуется. заранее спасибо

14
Roopa

Просто напишите сервис для добавления файлов CSS и JS в <head>

Вот пример сервиса, который используется для динамической загрузки файлов CSS. Вы можете легко изменить его для загрузки файлов JS.

https://github.com/Yappli/angular-css-injector

18
rppig

В настоящее время я использую angular-css: https://github.com/door3/angular-css Imho, это одно из лучших и наиболее гибких решений на данный момент.

7
Olga Gnatenko

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

1
mulla.azzi
app.controller('MyCtrl', function($scope,$compile) {
 $("#my").append( $compile("<script src='my.js'>")($scope) );
});
0
bFunc

Я использовал JQuery, чтобы сделать тяжелую работу, как это

/** resolve will come inside your route .when() function **/
resolve: {
        theme: function ($route, $q) {
            changeCss($route, $q);
        }
    }

/** This will come just outside your route .when() function, make sure the following function shall be in scope of the route provider **/
    var changeCss = function ($route, $q) {
        var defer = $q.defer();
        // Change the CSS as per the param received
        if ($route.current.params.css != undefined) {
            if ($route.current.params.css === ‘dark’) {
                loadCSS(“assets / css / dark.css”);
                defer.resolve();
            }
            if ($route.current.params.css === ‘light’) {
                loadCSS(“assets / css / light.css”);
                defer.resolve();
            } else {
                defer.resolve();
            }
        }
        return defer.promise;
    }
    var loadCSS = function (href) {
        var cssLink = $(“ < link rel = ’stylesheet’ type = ’text / css’ href = ’”+href + “‘ > ”);
        $(“head”).append(cssLink);
    };

Я использовал Promise, потому что он обязательно загрузит CSS, прежде чем он покажет/загрузит маршрут/страницу angularjs.

0
Abdeali Chandanwala