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

score 19 · Accepted Answer · edited Jan 26 '14 at 23:06

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 '14 at 23:06

Foo Bar User

2,401
3
20
26

answered Jul 17 '13 at 09:13

rppig

468
3
12

2

can this be also used to inject JS files? – mulla.azzi Jun 11 '14 at 10:10
How we can add js files using it? e.g. controllers. – Manish Prajapati Dec 29 '16 at 21:03
If I do this, the view is displayed before the CSS is loaded... (and that service you linked is deprecated) – El Mac May 03 '18 at 08:47

score 6 · Answer 2 · answered Mar 13 '15 at 11:47

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 '15 at 11:47

Olga Gnatenko

790
1
11
14

score 1 · Answer 3 · edited May 23 '17 at 12:25

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 '17 at 12:25

Community

1
1

answered Jun 12 '14 at 06:58

mulla.azzi

2,676
4
18
25

1

and here I thought I wouldn't see an answer that went the "why not use jQuery?" route... – Gonçalo Vieira Aug 19 '15 at 11:16
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](http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript) – domino_katrino Nov 30 '15 at 05:16
2

AngularJS includes jqLite, so an extra dependency may not be necessary: https://docs.angularjs.org/api/ng/function/angular.element#angularjs-s-jqlite – Westy92 Mar 20 '18 at 20:25

score 0 · Answer 4 · edited Jun 18 '19 at 02:32

0

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

edited Jun 18 '19 at 02:32

Dale K

25,246
15
42
71

answered Nov 08 '13 at 12:27

bFunc

1,370
1
12
22

You should not do DOM manipulation in controllers. That's one of the pitfalls when using angular – Ehsan88 Oct 06 '16 at 17:47

score 0 · Answer 5 · answered Dec 04 '18 at 07:58

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.

Angular JS: Load CSS and JS files dynamically

5 Answers5

Linked