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?
Related
Every time I search about this I get something related to react router and lazy loading. Isn't there a way to create an entirely separate page independent of index.js?
I created admin.js within my react project. If I go to http://localhost:3000/admin, it still loads index.js. I quite do not understand this bit of react if it is possible.
No, this is not possible without router. And here is why: your index.js has nothing to do with what is loaded in the browser.
When navigating to http://localhost:3000 your dev server actually serves a index.html to your browser. In it is a reference to a bundle.js (or however you name it) containing a bundled version of your .js files. So, http://localhost:3000/admin references to a admin.html which does of course not exist (unless you create it). But, doing this has several disadvantages over react-router. Because at build (or bundle) time index.js and admin.js will be two separate apps. Two separate bundle.js. Twice the amount of work needed to package it. Twice the amount of (maybe generated) .html files. Means no shared data at all. Twice the loading time in your browser. And many more.
I'd opt for react-router ;)
Edit: Of course it is not exactly twice in the points mentioned above. I am aware of that. But you get my point.
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.
I have built a angular webpack application and want to theme the application completely based on the REST API response (theme data - colors).
I am using a global less file which is used across the application pages.
I'm using
less.modifyVars({"variableName":"Value"}) ;
less.refresh();
in the controller and the call is working but the less variables are not changing and reflecting in pages.
I observer that its because the less files are already compiled to css when the controller is loaded and these less variables are not accessible dynamically.
Can anyone suggest any other approach or what i'm missing here? and how i can change the less variable before its compiles into css by the webpack. Or rather recompiles the less again to take the latest values form the api without reloading the page.
Please NOTE : im using npm to install all dependency and less is loaded from package json , and console.log(less) in the controller says less is undefined at client.
Thanks,
If you have a webpage that uses one module across several pages, does that module need to be loaded every time a new page is opened or is it just loaded in the initial page (assuming there is no ng-routing in place)?
As far as JavaScript is concerned, a page is like Las Vegas: whatever JavaScript code was loaded an ran on the previous page, stays on that page.
When moving from page A to page B, the JavaScript code will be run again; in particular, an Angular application will get bootstrapped again, which implies reloading your module.
It really boils down to how JavaScript runs, it's not Angular-specific.
Hope this helps.
I found interesting link on how to organize my files and load files using require.js http://backbonetutorials.com/organizing-backbone-using-modules/ , the only issue I have with that example is that they load everything in the beginning even asynchronously. I was wondering if it is possible load .js files only when they needed... For example if I click on Project List ( http://backbonetutorials.com/examples/modular-backbone/#/projects ), it checks on which url we are currently located, and load projects.js and list.js after that....
For small apps it would be ok, but for big apps with big classes it might take a while, before all classes will be loaded to the browser, for all routers.
I think creator of that example answered this question more accurately. Here is his answer: http://backbonetutorials.com/organizing-backbone-using-modules/#IDComment-CommentText210764496 , see the reply
First of all, you would really need a big application in order to need that. The files of a normal application, minified and gzipped, are not a significant load. And then you can use caching to load them only once in each browser.
If you really want to, of course you can do partial loading, in the same way you do it for the application in the example (in the router, the projects route will first ensure the project-related js files are loaded, and only then do the fetching/view initialization etc)