web-dev-qa-db-fra.com

Angular JS: Chargement dynamique de fichiers CSS et JS

Je suis en train de développer une application Web. J'utilise AngularJS pour charger tous les fichiers de manière dynamique dans l'interface utilisateur.
1. J'ai et index.html sur lequel tous les fichiers seront chargés dynamiquement au clic ou au chargement.

    //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

Maintenant, ma page de connexion ressemble un peu à la structure ci-dessous

    /*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

Maintenant, mon problème est que, bien que je puisse charger le fichier accordéon menu.html, je ne parviens pas à charger les fichiers css et js dont il dépend. J'ai examiné la plupart des discussions sur le stackoverflow et beaucoup d'autres .. mais aucune n'a fonctionné pour moi. 
Quelqu'un peut-il s'il vous plaît aider à déterminer un moyen de charger les dépendances css et js en utilisant JS angulaire...?
Toute aide est appréciée. Merci d'avance

angularjsangularjs-directiveangularjs-scopeangular-ui
14
Roopa

Il suffit d'écrire un service pour ajouter des fichiers CSS et JS au <head>

Voici un exemple de service utilisé pour charger dynamiquement des fichiers CSS. Vous pouvez le modifier facilement pour charger des fichiers JS.

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

18
rppig

Actuellement, j'utilise angular-css: https://github.com/door3/angular-css À propos, c'est l'une des solutions les meilleures et les plus flexibles du moment.

7
Olga Gnatenko

Au lieu d'aller par AngularJS, j'ai essayé de charger les fichiers avec JQuery. Cela a fonctionné pour moi . Vous pouvez vérifier ce lien pour référence

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

J'ai utilisé jQuery pour faire le travail difficile comme ça

/** 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);
    };

J'ai utilisé Promise parce que cela garantira de charger le fichier css avant d'afficher/de charger la route/page angularjs.

0
Abdeali Chandanwala