Load and unload external stylesheets dynamically in AngularJS application - javascript

I have two routes/views in my AngularJS application that are using conflicting CSS. I have two separate external stylesheets that I want to use for these routes. For example foo.css for foo route and bar.css for bar route. That way I can resolve the conflict.
However, I will have to load bar.css and unload foo.css when navigating from foo to bar.
How do I do this? Is there a library/module that can help me to achieve this scenario?
I've looked into ocLazyLoad, but I'm not sure how to unload the loaded CSS.

AngularJS Way
In a comment below, the OP suggested the way that seems most appropriate to me in AngularJS - using the ng-disabled directive. You just have to make <html> your ng-app attribute element so that the directive gets properly executed.
<link rel="stylesheet" href="/path/to/style-1.css" ng-disabled="theme.name === 'theme1'">
<link rel="stylesheet" href="/path/to/style-2.css" ng-disabled="theme.name === 'theme2'">
This way both styles get loaded immediately (causing no flicker on change later). Different approach would be needed if some of the styles should not be loaded initially.
Original Answer
See this question. Then just find the appropriate <link> tags and enable/disable them at will. I don't think this has anything to do with AngularJS.

Related

Having issues with CSS and other scripts not loading after routing using nodeJs

I am trying to make grab data from a MongoDb database and then viewing, editing and deleting it.
The first one is working pretty fine but what I am having issues with is editing. What I have done is made a route on a button click that basically works like this:
'/viewList/edit/'+item._id
This is supposed to take me to a form that will let me edit those values. The problem is that the CSS, Bootstrap and things like that break and the page looses all of the features they provide and it looks like a generic html that doesn't have any of these included in it.
If I remove the "/edit/" bit of the routing out and just do '/viewList/'+item._id it works.
I tested this by making a dummy page that tells details for that specific item like it's name and stuff and the page doesn't break, in terms of CSS/Bootstrap.
I really can't find a solution for this, can someone point in the right direction?
Difficult to know without seeing what's in your <head> but the paths in your <link> tags are probably relative. This means they'll point to non-existent files when your URL path changes. Check that they start with / so your static file paths are always relative to the root URL rather than relative to the current page. i.e. if you have this:
<link rel="stylesheet" href="bootstrap/styles.css">
Change it to:
<link rel="stylesheet" href="/bootstrap/styles.css">

why angular js not loads instantly, it takes time to load

This is the demo is used to build my project:
https://material.angularjs.org/HEAD/demo/
I changed a lot of menus but the page heading and the data stayed the same. I face the same problem as in the demo. The browser does not render the page instantly but it takes some time in the beginning before the elements content is shown.
You can use ngCloak to prevent that. Put ng-cloak on your body tag and follow the documentation.
When this css rule is loaded by the browser, all html elements (including their children) that are tagged with the ngCloak directive are hidden. When Angular encounters this directive during the compilation of the template it deletes the ngCloak element attribute, making the compiled element visible.
For the best result, the angular.js script must be loaded in the head section of the html document; alternatively, the css rule above must be included in the external stylesheet of the application.
Your question isn't clear! But from what u r facing seems, your one/more service call(s) taking time to fetch data intially which might be making your application slow. Go to network in dev tools and check which service is taking lots of time!

Programmatically added Stylesheet Element not being honored by dom

In our web app, I'm trying to hit our server to determine if they have made any custom CSS tweaks to the layout of the web app. Upon getting a boolean flag of this, I'm returning the CSS from the server and injecting a new head link after the last one...
The problem is, this isn't updating the page's style or layout. If I go into the sources of the page elements and click on that CSS document in the dev console, I can force it to "notice" that this css is available by simply changing the value of a style reference.
This is the jquery I'm using to inject the CSS:
$("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='4DACTION/WEB_Mobile_CustomCSS' type='text/css' media='screen'>");
Any idea why it wouldn't force the page to use it until I've made a change to it in the debugger?
I used Bootstrap to create an example doing exactly what you described using your code in a setTimeout callback:
setTimeout(function () {
$("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css' type='text/css' media='screen'>");
}, 1000);
check it out: http://jsfiddle.net/v089p29a/ it switches from flat buttons to 3D ones.
I'm not sure why this is not working for you. Maybe your URL is not valid like adeneo suggested. Also be sure to put your code in the $(window).load() or $(document).ready() event handlers to ensure that the DOM is ready to be manipulated.

Loading CSS Style Dynamically

I have a style-sheet that is saved in this location:
/opt/lampp/htdocs/project/core/styles/Style.css
Now, what I need to do is load it using that full directory, because the files that are going to be using it are located here:
/opt/lampp/htdocs/project/client/
My goal is to create a completely dynamic site that updates correctly to numerous "Clients" based on their own personal information. So far I've got everything done, however I wanted to move the CSS to be loaded dynamically as-well so if I wanted to make any changes to the style-sheet they would be instantly noticed.. Here's where I'm running into a problem, I can't figure it out. I've followed the front page of google to a dozen of different methods using JavaScript, but none of them have worked and they are all from 2009-2010.. Perhaps someone would like to shed some light on my dark path?
this works for me:
document.write('<link rel="stylesheet" type="text/css" href="/opt/lampp/htdocs/project/core/styles/Style.css" media="screen" />');
I don't see any reason to use javascript unless a loaded page needs to refresh automatically when the style-sheet is changed.
If you just need it to reload automatically on the next page-load, you can use something like:
<link rel="stylesheet" type="text/css" href="/project/core/styles/Style.css?v=<?php echo time(); ?>">
Using an absolute path makes sure it will work for any client / file in any folder.
I have added the timestamp to the css file so that it will not be cached but you can also set up the server to disable caching for specific files.

Dynamically adding and removing javascript/css with Jquery (or other library)

I am trying to compare having a 1 page app with clientside routing to having a asp mvc app which just routes to html files, to see which is more appropriate for my current project. As I have no need for any Asp Mvc features its all javascript/html which communicates with a web service.
However one problem I can forsee with the one page app is that my site isnt really 1 page, so I would be having to have on main index.html which contained all shared resources. Then dynamically load in new pages based on the hashbang and add in any required scripts and css. This doesn't seem to hard as Jquery I believe provides a .load() method or something similar to get external resources... my problem though is getting rid of them once I am done...
Is there any way to do this, so you target ONLY certain script/link tags, can you give them Ids or something?
Any help on this would be great...
== EDIT ==
Added a simple example to show what I mean:
<!-- Script already in page -->
<script type="text/javascript" src="scripts/script1.js"></script>
<!-- Dynamically added script -->
<script type="text/javascript">
// some javascript
</script>
How can you tell which ones you should remove? If you could apply an id or uniqueness to each script then it may be ok, but thats what i am getting at with this question.
There are zero benefits to "removing resources." When a script has been loaded, removing the script tag from the page later has no purpose--it won't improve your browser performance at all, nor will it harm it to keep the files around.
Simply add your resources as needed and write your code such that it won't execute erroneously.
I'm not shre i understand why you would like to do that but link element (for css) and script (for js) are elements like any other and they can be deleted with remove().

Categories

Resources