I have tried several things to clear browser cache while routing between pages.like cache: false , index.html?x=1 ,target="_self" ,disableCache: true, in $routeProvider as well.but any of this didn't worked for me.finaly $window.location.reload(); worked.but i do not want reload the page every time when routing.is there any perfect solution for route cache in AngulerJs?
scenario
In my header.html have ng-if="currentPath ==='/store'".it's check current path and display some styles regarding to store in header.html
header.html
<div class="container" ng-if="currentPath ==='/store'">
<div class="col-xs-8 buttons" >
<a class="brand" href="#" target="_self"><img src="img/logo.png" /></a>
<a class="btns" href="#Store" target="_self">Store</a>
</div>
<ul class="col-xs-4 icons">
<li ><i class="fa"></i>{{user.email}}</li>
<li> <span ng-show="cart_size > 0" class="count">{{cart_size}}</span></li>
</ul>
<--some styles for store.......-->
</div>
<div class="container" ng-if="currentPath !=='/store'">
<div class="col-xs-8 buttons" >
<a class="brand" href="#" target="_self"><img src="img/logo.png" /></a>
<a class="btns" href="#Store" target="_self">Store</a>
</div>
</div>
current issue
when i go into store page i have to refresh browser to display store styles in header.
after that go into another page,store styles still display in header.then i have to refresh again.
how to solve this issue?
You may try
angular.element('html[manifest=saveappoffline.appcache]').attr('content', '');
where you want to disable cache.
The manifest attribute specifies the location of the document's cache manifest.
As per w3schools.com
HTML5 introduces application cache, which means that a web application
is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
Offline browsing - users can use the application when they're offline
Speed - cached resources load faster
Reduced server load - the browser will only download updated/changed resources from the server
The manifest attribute should be included on every page of your web
application that you want cached.
The manifest file is a simple text file that lists the resources the
browser should cache for offline access.
To learn more about how to create the manifest file, please read our
HTML5 Application Cache chapter.
Another solution that you can try is add following snippet on your angular apps header so that your page will never be cached.
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
Related
I am new to Angular JS. I am trying to include profile.html within profiletest.html by using ng-include.
Given below is the code of my profiletest.html
profiletest.html
<body>
<div ng-app="guestProfileApp">
<div ng-controller="guestProfileController">
<button ng-click="getProfile(401)">Show Profile</button>
<ng-include ng-if="showProfile" src="'profile.html'"></ng-include>
</div>
</div>
When I am making changes to the profile.html code, the changes are not getting updated in when I refreshed the profiletest.html in browser.
You can deactivate the browser cache - In Chrome Dev Tools on the bottom right click on the gear and tick the option.
Disable cache (while DevTools is open)
In Firefox there is the same option in Debugger -> Settings -> Advanced Section
(Not sure if it works in firefox. Alot of people say it doesn't work for them)
I am writing a fairly complex HTML5 website making extensive use of AngularJS. The Website is hosted in a Python application on Amazon's Elastic Beanstalk.
The file "projectname/app/views/views.py" looks like this:
from app import application
from flask import render_template
#application.route('/')
def index():
return render_template('main.html')
The "main.html" looks like this:
{% extends "layout.html" %}
{% block content %}
<script src="{{ url_for('static', filename='lib/google-maps/angular-google-maps.min.js') }}"></script>
<!-- here are more javascript libs being loaded, also css files -->
<div ng-app="myApp" ng-controller="applicationController">
<div ng-include="'/static/partials/home/menu.html'"/>
<div ng-include="'/static/partials/home/home.html'"/>
<div ng-include="'/static/partials/home/footer.html'"/>
</div>
{% endblock content %}
The "layout.html" looks like this:
<!DOCTYPE html>
<html manifest="/static/manifest.mf">
<head lang="en"
profile="http://www.w3.org/2005/10/profile">
<!-- favicon -->
<link rel="icon"
type="image/png"
href="{{ url_for('static', filename='img/favicon.png') }}"/>
<meta charset="UTF-8">
<title>Website title</title>
<link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ url_for('static', filename='css/colors.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ url_for('static', filename='css/animations.css') }}" rel="stylesheet" type="text/css"/>
<!-- more javascript libs loaded here ... -->
</head>
<body style="overflow-y: hidden">
{% block content %}
{% endblock content %}
</body>
</html>
In addition to these files I have dozens of html files that build up all parts of the website. These are included in the right places using ng-include.
What I experience is that whenever I deploy the website, all browsers seem to cache most of it and then only load parts of the new version which results in really really ugly behavior. For example, some javascript files are loaded in the new version, but html files are still old, so the views are really messy and lots of errors occur. When I reset the cache (for example in Chrome by pressing Shift-F5 under windows or by opening up the developer console and refreshing the website), everything is fine and the new version is loaded fully.
However, I cannot expect my customers to open up any development console whenever I redeploy a new version of the website.
So I read up some stuff about manifests, and as you can see I have a manifest.mf file referenced in the layout.html. Here is its content:
CACHE MANIFEST
# 2016-01-07:v1.0.4
# This is the default section for entries. Files listed under this header (or immediately after the CACHE MANIFEST) will be explicitly cached after they're downloaded for the first time.
CACHE:
/static/img/login-background.jpg
# Files listed in this section may come from the network if they aren't in the cache, otherwise the network isn't used, even if the user is online. You can white-list specific URLs here, or simply "*", which allows all URLs. Most sites need "*".
NETWORK:
*
# An optional section specifying fallback pages if a resource is inaccessible. The first URI is the resource, the second is the fallback used if the network request fails or errors. Both URIs must from the same origin as the manifest file. You can capture specific URLs but also URL prefixes. "images/large/" will capture failures from URLs such as "images/large/whatever/img.jpg".
FALLBACK:
On every deployment, I change the first line and update the release date and version number. Also I add large images or files to the CACHE section (currently only some background image).
The manifest is also properly loaded, as can be seen from the Chrome developer console when loading the page. It says:
Creating Application Cache with manifest https://my.website.net/static/manifest.mf
my.website.net/:1 Application Cache Checking event
my.website.net/:1 Application Cache Downloading event
my.website.net/:1 Application Cache Progress event (0 of 1) https://my.website.net/static/img/login-background.jpg
my.website.net/:1 Application Cache Progress event (1 of 1)
my.website.net/:1 Application Cache Cached event
So the cache file itself is working. However I still get half-updated pages whenever I deploy a new version. What can I do to fix this?
Any ideas are highly appreciated! Thanks a lot,
Christian
I am building a wordpress site with a page that is an angular app. It was working until recently (and I can't recall which change broke it), but now the app does not load when I arrive at the page via a link (angular is loaded and the code snippet below processed, but nothing is logged), but it does work if I then refresh the page.
I've backed out all the real code to leave:
angular.module("af2015App", [])
.controller("TestCtrl", function() {
console.log("test test");
});
And commented out everything in the HTML except
<div ng-app="af2015App" class="app">
<p ng-controller="TestCtrl">Use the ...!</p>
</div>
I'm at a loss as to how to debug these circumstances. I'm not loading pages via AJAX.
Thanks for your ideas everyone. I had another go at debugging and discovered that, even after turning off the script tag with angular, angular was still present. That gave me the idea to look at Batarang and, after deactivating that, all is working again. Perhaps this answer will help someone someday. Needless to say I don't know what the underlying problem was.
take a look at this plunker
working plunker
they only thing I can think of when looking at your code is that you are not closing your div tag
altough that is probably just an edit mistake
otherwise move your ng-app definition to your html tag
<html ng-app="af2015App">
<head>
//make sure your scripts are loaded correctly
<script src="path/to/angular.js"></script>
<script src="path/to/app.js"></script>
<script src="path/to/controller.js"></script>
</head>
<div class="app">
<p ng-controller="TestCtrl">Use the ...!</p>
</div>
</html>
I'm new in the development of server-side applications. I have a collection in mongodb which stores names of files that store in the root directory /uploads. I have to download them on client side using the angular. But using the ng-src or simple src out of ng-repeat I get a 404 error.
Is there any way to get the client-side access to the directory with the files?
<div class="row jumbotron" ng-repeat="item in items">
<div class="col-sm-1">
<img ng-src="../../../uploads/{{item.logo}}">
</div>
<div class="col-sm-8">
<h4>{{item.name}}</h4>
</div>
<div class="col-sm-2 pull-right">
<button type="button" class="btn btn-lg btn-info" ng-click="showModal($index)">Edit</button>
</div>
</div>
Also tried to provided file through ../ - 404 (Not Found)
<div>
<img src="../../../uploads/38809344bac1a3a77c5d1e0493763849.png">
</div>
The path you provided will go up three folders and then will look for the uploads folder, as each ../ means: Go up one level (relative path notation). If this is not the case, please update the question with a sample of your folder structure. Relative paths start from the current folder in which your HTML file resides on the server.
Another point to keep in mind: If you're using Linux, The privileges of the /uploads folder must allow the application to access it.
I have Hawtio web console for Karaf (or JBoss Fuse) homepage and I also have an AngularJS app as a plugin in the Hawtio. Is it possible to change the version of AngularJS library built-in (or packaged) in Hawtio? I need a more recent functionality (ng-repeat-start-end) of AngularJS which does not work when deployed as a Hawtio plugin.
hawtio is kinda stuck on 1.1.5 at the moment as we've a patch that enables the dashboard functionality. However you can easily implement the same functionality via ng-include and a template:
<script type="text/ng-template" id="myTemplate.html">
<div>
<header>{{item.foo}}</header>
<footer>{{item.bar}}</footer>
</div>
</script>
<div ng-repeat="item in items" ng-include="'myTemplate.html'"></div>
Note the ' in the ng-include directive config, otherwise you hit ng-include not working with script type="text/ng-template"