AngularJS - Injecting CSS on each page

Question

Before I start, I want to emphasize that I am new at both javascript and Angular.js

I am currently using tennisgent's angular-routing-styles and it works sometimes. I did everything correctly but for some reason occasionally there's a delay that causes CSS to not load when switching through the navigation, showing unformatted html for a split second.

AngularCSS by door3 simply doesn't work for me, I tried installing it three times and it just causes everything to fail.

I can't put all of this in a jsfiddle, so I've included a temporary tunnel to my local webserver: http://e5fe67b0.ngrok.io

Switch between music and about a few times and you'll see the lag happening occasionally.

Why is this happening?

why do you need stylesheets per route? is your CSS too big, even after minifying? Maybe it would be better if you include one concated+minified CSS file for you whole app! Does it work if you use just 1 css file? — Betty St
– Betty St, Commented Jun 24, 2015 at 20:23
As you can see by switching, the nav bar highlights what is selected + there are elements on each page that need to be dynamic to the individual page. — Sebastian Olsen
– Sebastian Olsen, Commented Jun 24, 2015 at 20:25
yes, but you don't need to achieve that with CSS files per routes! Maybe just add a class to body on specific routes. — Betty St
– Betty St, Commented Jun 24, 2015 at 20:29
the problem here is that the CSS loads after switching the route, when you already have the CSS loaded there will be no "flash of unstyled content " (FOUC) — Betty St
– Betty St, Commented Jun 24, 2015 at 20:31
"unspoken rules" are the cause of useless arguments, like tables vs. divs. Do what works for you. If inline CSS is satisfactory, use it. — Brent Washburne
– Brent Washburne, Commented Jun 24, 2015 at 20:36

Sebastian Olsen · Accepted Answer · 2015-06-24 20:44:57Z

1

So using a <style>css here</style> in each page solved it for me.

It seems that those scripts are outdated and no longer works correctly with angular.js so using inline or <style> should work fine.

answered Jun 24, 2015 at 20:44

Sebastian Olsen

10.9k9 gold badges54 silver badges96 bronze badges

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

Collectives™ on Stack Overflow

AngularJS - Injecting CSS on each page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related