I am new to Angular js.
I have observed that new code blocks written in Angular js module file or controllers does not get executed sometimes and when the web site is refreshed surprisingly the code blocks get executed.
Is there any Angular js function to force the execution of code?
Is there a maximum limit in count of lines of code that can be executed?
It might be because of browser caching.
In each html template just add the following meta-tags at the top-
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
Or you can simply disable caching from Dev Tools.
Related
I learn Reactjs and read somewhere about this but cant find it now. how
to make the browser updated download the app files.
Again typically after a new release has been published?
Cache-control?
Like when I build a new version 1.0.1 and then next time 1.0.2 and then the browser should detect this and re download the changed files into browser cache.
Is there such thing?
UPDATE
here is my index.html with some Cache-control that dont work correctly
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=0" />
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
..........
That functionality is built right into the HTTP protocol, but it works based on timestamps, not on versions.
With the HTTP request for your app's script, the browser sends along a timestamp of the cached version.
If that version is newer than the version on the server (i. e. it is up to date), the server replies with HTTP 304 Not Modified, and an empty body.
If the browser's version is out-of-date, the server will instead reply with HTTP 200 OK and the actual script.
(Note that this is subject to browser and server configuration, but this is how it is supposed to work, and usually does.)
I am working on a web application I updated the code In server when coming to the browser it is loading old files only when I try with hard refresh multiple times it is loading new files
I tried with meta tags
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
window.location.reload();
But it is not working.
I am maintaining the version for script files and CSS files. for version management and minification I am using grunt.
For existing users who are already in my application (live users/users who are regular). The script is not updating to check the version how I can update the existing script in the browser
As per my knowledge browser is rendering script from browser cache but I don’t know when it gets the script from the server
The same issue with CSS also.
You should append a timestamp to css/js files.
Like:
<script type="text/javascript" src="/js/1.js?v=1234455"/>
Use this approach:
<script>document.write("<script type='text/javascript' src='//site.com
/js.js?v=" + Date.now() + "'><\/script>");</script>
This way src will be unique each page load so that new js will be loaded.
I have created an app using create-react-app but it always loads old index.html from client
tried with meta tags to avoid cache in index.html but does not load new html always
index.html
One way can be using the meta tags.<meta http-equiv='cache-control' content='no-cache'> <meta http-equiv='expires' content='0'> <meta http-equiv='pragma' content='no-cache'>
A very Rare condition. sometimes it may be because of your browser cache. there is an option in your Dom inspector which helps to disable caching.
press F12 to toggle dom inspector. select the network tab
Try the tick on.
Also make sure that you are editing and previewing the same index.html file.
I have several tests that write HTML code to a temp directory on a CentOS 7 box and then have Chromedriver load them up to do some basic tests on them. In this example I am writing the HTML code:
<html><body><form> <label for="text">Text</label>
<input type="text" id="text"></form></body>
However when I get the HTML content via getAttribute('innerHTML') I get this
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<title i18n-content="title">file:///tmp/formJbDsBv</title>
...
which is clearly not the code I wrote. The log file on the Selenium side is
09:45:03.980 INFO - Executing: [get: file:///tmp/formJbDsBv])
09:45:04.084 INFO - Done: [get: file:///tmp/formJbDsBv]
But, of course, the test works locally and on a virtual machine, but not on my test box, which runs using Xvfb.
Plus, the technique I use works on about a hundred other tests.
I don't know why this solves it, but adding .html to the end of the filename made it work. This is really weird because some of the tests that passed did not have .html at the end of their filename. Weird, but it's working now.
I am running a setup of AngularJS AJAX application, and using PhantomJS and the Angular-seo library in order to serve the crawlers with actual mark up instead of JS code.
Unfortunately I am getting an error that says:
The privacy settings for this attachment prevent you from posting it to this Timeline.
This seems to be an issue that concerns many users, bu has received no attention whatsoever at the developers community.
My of meta tags, which I must mention that are all filled with the current information from test that I've conducted:
<meta property="og:type" content="website">
<meta property="og:title" content="{{model.title}}" />
<meta property="og:description" content="{{layout.og.description()}}" />
<meta property="og:image" content="{{layout.og.image()}}" />
<meta property="og:url" content="{{layout.og.currentUrl()}}" />
What could be the problem
If you Inspect those meta tags, even while angular is running, the content attribute is left like that... unlike a ng-bind or something that will replace at runtime. To circumvent this, I created the following directive:
angular
.module('app')
.directive('ngContent', [
function() {
return {
link: function($scope, $el, $attrs) {
$scope.$watch($attrs.ngContent, function(value) {
$el.attr('content', value);
});
}
};
}
])
;
Then implemented in the following manner:
<meta property="og:description" ng-content="myDescriptionFunction()" />
This will create a clean content="Some description here." attribute in the meta tag as that content dynamically changes... (watch the element in chrome inspector as you browse) seems to work for me!
The solution is basically to use some kind of server-side user-agent detection to pick up whenever a social media crawler arrives.
http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app
Actually you can't have Angular (or any other front-end js) do that because the Facebook crawler Doesn't execute javascript. Therefore, these tags have to be created in the backend (using node.js or php for example)
See How to do Facebook Open Graph friendly meta tags with client-side template engines like AngularJS, Mustache, Handlebars