I am working on angularjs 1.5 and i want to reload css stylesheet without hard refresh because currently it's creating caching so without hard refresh it's not possible to see changes most of changes are dynamic in css file that's why i need to reload is there any way in angularjs ?
If your browser cache is the problem you can try one of the following things:
If you are developing on chrome, you can open dev tools and under the network section, you can disable browser cache. Everytime you reload now will fetch all resources fresh.
You can fingerprint your CSS by appending a hash or a version number to your filename at the build step. Ex: http://example.com/path/to/style-v01.css
You can make the link tag which includes the css to use a randomized query parameter which ensures the cache does not kick in. Ex: http://example.com/path/to/style.css?v=1.0
Ideally, in a production environment, your files are fingerprinted to avoid this problem.
Related
I've recently added jquery and I need to use it on some pages in my app that don't use ExtJS as well as within ExtJS. So I used the option "includeInBundle": false and made sure to list it above app.js. What I noticed is that when I bundle the app the first time and try to access, I get errors (screenshots from console below). What I can see is that app.js is loading before jquery-3.6.0.js, even though I have jquery listed before in my app.json. If I reload the page, it then loads fine (not sure if it's because it's then cached and gets loaded faster). How can I ensure that libraries always load in the correct order?
I want to implement Live Reloading which will try to watch for changes in the front end page UI files and then automatically recompile the Sass and ES6 JS to raw CSS and browser compatible ES5 JS and also refresh the page.
This will allow us to see the changes we make instantly in the browser without having to kill the server and stand it up again.
Is there any configuration to enable this?
You should be able to get this functionality with Webpack Hot Module Replacement.
This is a seed project for React.
**I am developing a site ,in which front-end is made with Angularjs **
Site name is http://limokit.com/limolog but the problem is that , it take minimum 30 seconds to open the site page on browser. How to reduce this loading time?
we used ngRoute to change the states , but do not getting the result which we wanted to achieve . We also converted all html and js as minified one but it is also not effecting the loading issue for first time.
At first glance it looks like you're loading individual js and css file separately. This can slow down the loading of the page greatly especially on slower connections. The common optimization to do here is to group all js files and css files together and serve one single js and one single css file on production. I don't know what you're using to serve the JS/CSS files but I use compressor for Django.
Also, to further debug this problem, it helps if you look at the network requests that your page is doing on page load in the Chrome inspector. You can glean a lot of information by seeing where your bottlenecks are on page load.
In your site you're having 63 requests and around 3MB size (uncached).
As mentioned in the other answer package everything in bundles. E.g. vendor.bundle.js, bundle.js and bundle.css and also minify these bundles.
I would use webpack or gulp for bundling.
For debugging you can look in the browser console networking tab at the lower right in Firefox you can see a link to load time statistics and also get a info about caching.
The following screenshot shows statistics to your site (left with cache, right uncached).
.
Ditch all frameworks and libraries such as Angular and Jquery and use JSvanilla. Plain javascript is much faster to run(around 160x according to many resources i read..i also know that from my own experience).
Frameworks makes your site crawl.
Is there any way with AngularJS to force a page to refresh after it has been changed. What I mean by this is that I have multiple users actively working in the app but a change is required to the controller.js file. At this point the only way I'm aware of is for them to manually push refresh on the browser. Is there any code that I can use to make it "actively" watch that file for changes and reload when necessary without the users having to manually push refresh?
This isn't really an angular problem. You can do polling on the client side with setInterval, hitting the file on the server to trigger a refresh on the client.
If you're looking for something to speed up development, then you're probably looking for hot module loading. The solution depends on what version of angular and build tool you're using (e.g. grunt/webpack/npm).
Check out this article for angular 2, but you can find similar solutions for angular 1:
http://blog.mgechev.com/2015/10/26/angular2-hot-loader-hot-loading-tooling/
But if you just want to force a page refresh from the client side, you would just call: $window.location.reload()
I am having an issue where my grunt build file is building correctly, but the website I'm working on is not getting all of the css files. It is only getting the master.css file. I'm using nodejs, with kraken, on top of express. I can't tell if there is some configuration option I need to change, I don't really know where I would do that.
For anyone interested, the issue was with the changing structure of the project. Going from angular to a dustjs w/ backbone combo changes the project form a SPA structure to a multi-page structure. This makes a huge difference because now instead of sending everything at once we are sending pages as they are needed, this also means that when a user switches to a different view, the server will be building an html version of that view and sending it back as fully fleshed out html. When the server builds the page it has access to the file structure, which means that the build folder that was necessary for the angular project, is no longer necessary.