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)
Related
I am using ui.router in my angular application with <div ui-view=""> </div>.
Everything works fine on Google Chrome but it is completely empty on Internet Explorer.
Below is a picture showing the problem and comparison between Internet Explorer and Chrome.
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'>
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 have a simple html and on that page i am trying to include some other html page for user detail. but some how the page is not being included.
On index page i have following code
<form>
<input type="Search" placeHolder="Enter Name" ng-model="user"/><br>
<input type="Button" value="Search" ng-click="Search()"/>
<div ng-include src="'userDetail.html'">
</div>
</form>
I have tried following.
<ng-include src="'userDetail.html'"></ng-include>
<div ng-include="'userDetail.html'"></div>
<div ng-include src="'userDetail.html'"></div>
The error code I am getting is
Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
Please see attached screenshot for further details.
The reason for the error is right in its description. You need to run your app in any of the listed protocols (for local development that's http or https 99,9% of the time). Instead you are running it as a file on the disk (notice the file:// in your URL).
You must use a local HTTP server (like Apache or IIS) or use a IDE with build-in server (I recommend Brackets for its great preview function) to serve your content to be able to properly test the application locally.
I'm debuggin a mobile application using Chrome devtools, I can inspect the device, network tab, console tab, etc are working fine, I can see the batarang tab AngularJS, when I click Enable the page is reload on the chrome mobile tab but the batarang tab don't show any kind of information.
Do you have any idea?
(source: vpsnotas.com)
It appears as though Batarang hasn't been updated to be compatible with the latest versions of AngularJS. Appears to be a duplicate of: batarang Chrome extension for AngularJS appears broken
Does the console show any errors or anything? That would be the first place I would look, as it will normally point you in the right direction of the issue.
I recently ran into an issue with loading Batarang on an angular app that I know was previous working. The console was throwing an $injector:modulerr error and the issue turned out to be with the ng-strict-di directive on the ng-app. After removing the ng-strict-di directive from the ng-app, the Batarang extension works fine.