it-swarm.com.de

Angular JS: Lädt CSS- und JS-Dateien dynamisch

Ich bin gerade dabei, eine Web-App zu entwickeln. Ich verwende AngularJS, um alle Dateien dynamisch in die Benutzeroberfläche zu laden.
1. Ich habe und index.html, auf die alle Dateien beim Klicken oder Laden dynamisch geladen werden.

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

Nun sieht meine Anmeldeseite etwas wie die folgende Struktur aus

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

Jetzt ist mein Problem, obwohl ich in der Lage bin, die Datei accordion menu.html zu laden, ich nicht in der Lage bin, die Dateien css und js zu laden, von denen er abhängig ist. Ich habe in den meisten Stackoverflow-Diskussionen nachgesehen und viele andere .. aber keiner hat für mich funktioniert. 
Kann jemand helfen, einen Weg für das Laden der css- und js-Abhängigkeiten zu bestimmen Angular JS...?
.__ Jede Hilfe wird geschätzt. Danke im Voraus

14
Roopa

Schreiben Sie einfach einen Dienst, um CSS- und JS-Dateien zum <head> hinzuzufügen.

Hier ist ein Beispieldienst, der zum dynamischen Laden von CSS-Dateien verwendet wird. Sie können ihn leicht ändern, um JS-Dateien zu laden.

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

18
rppig

Derzeit verwende ich angle-css: https://github.com/door3/angular-css - Imho ist dies eine der derzeit besten und flexibelsten Lösungen.

7
Olga Gnatenko

Anstatt auf AngularJS zu gehen, habe ich versucht, die Dateien mit JQuery zu laden. Es hat für mich funktioniert . Sie können diesen Link als Referenz überprüfen

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

Ich habe Jquery benutzt, um die harte Arbeit so zu erledigen

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

Ich habe Promise verwendet, da dies sicherstellt, dass die css geladen wird, bevor sie die anglejs-Route/Seite anzeigt/lädt.

0