Angular JS: Load CSS and JS files dynamically

Question

I am in the middle of developing a web app. I am using AngularJS for loading all the files dynamically into the UI.

I have an index.html file into which all the files will be loaded dynamically on-click or on-load.

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

Now my sign-in page looks somewhat like the below structure

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

Now my problem is, though I'm able to load the accordion menu.html file, I'm not able to load the css and js files it is dependent on. I have researched on stackoverflow but none worked for me.

Can anybody please help in determining a way for loading the css and js dependencies using AngularJS

Foo Bar User · Accepted Answer · 2014-01-26 23:06:03Z

19

Just write a service to add CSS and JS files to the <head>

Here is a example service which is used to dynamically load CSS files.You can modify it easily to load JS files.

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

edited Jan 26, 2014 at 23:06

Foo Bar User

2,5013 gold badges21 silver badges27 bronze badges

answered Jul 17, 2013 at 9:13

rppig

4683 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mulla.azzi Over a year ago

can this be also used to inject JS files?

Manish Prajapati Over a year ago

How we can add js files using it? e.g. controllers.

El Mac Over a year ago

If I do this, the view is displayed before the CSS is loaded... (and that service you linked is deprecated)

Olga Gnatenko · Accepted Answer · 2015-03-13 11:47:12Z

6

Currently I use angular-css: https://github.com/door3/angular-css Imho, it's one of the best and most flexible solutions at the moment.

answered Mar 13, 2015 at 11:47

Olga Gnatenko

7901 gold badge11 silver badges14 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:25:54Z

1

Instead of going by AngularJS way, i tried to load the files using JQuery. It worked for me. You can check this link for reference

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Jun 12, 2014 at 6:58

mulla.azzi

2,6764 gold badges21 silver badges27 bronze badges

3 Comments

Gonçalo Vieira Over a year ago

and here I thought I wouldn't see an answer that went the "why not use jQuery?" route...

domino_katrino Over a year ago

The OP was trying to load file using AngularJS. Adding library like JQuery just to load files is not a good solution. This can be done in plain javascript also as described here

Westy92 Over a year ago

AngularJS includes jqLite, so an extra dependency may not be necessary: docs.angularjs.org/api/ng/function/…

Abdeali Chandanwala · Accepted Answer · 2018-12-04 07:58:50Z

I used jquery to do the hardwork like this

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

I have used Promise because this will make sure to load the css before it shows/load the angularjs route/page.

Dale K · Accepted Answer · 2019-06-18 02:32:58Z

0

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

edited Jun 18, 2019 at 2:32

Dale K

28.1k15 gold badges59 silver badges85 bronze badges

answered Nov 8, 2013 at 12:27

bFunc

1,4751 gold badge13 silver badges22 bronze badges

1 Comment

Ehsan88 Over a year ago

You should not do DOM manipulation in controllers. That's one of the pitfalls when using angular

Collectives™ on Stack Overflow

Angular JS: Load CSS and JS files dynamically

5 Answers 5

3 Comments

Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related