AngularJS and IE9 page refresh issue - angularjs

My single page angularjs application seems to work fine in IE9+ until you edit an object and reload the page. If you modify a field (change Name from "You" to "Me") then press save the server gets the update and updates the database. If you then refresh the page the field has its original value (Name is "You"). Refreshing the page does not call the $routeProvider and does not go to the server.
None of this happens on Chrome, Firefox, Safari, or their mobile counterparts.

One of the biggest issues with IE is that it doesn't handle console.log unless the console is open and will break just about everything. Not sure if this is your problem, but always good to check.

My server side is an ASP.Net MVC app so I disabled caching.
Set the OutputCache attribute on the whole controller or certain actions
[OutputCache(Location = OutputCacheLocation.None)]
public class HomeController : Controller
{
//All actions in here won't be cached.
}
Used #KCD's answer from this question:
How do I add site-wide no-cache headers to an MVC 3 app

Related

Can't use Chrome/IE back button to return to Angular app

I have web app which contains a mix of new Angular pages using Html5Mode and legacy pages using classic ASP. We are in the process of converting the old pages, but in the meantime they continue to live side-by-side with the Angular app.
Links from the Angular app to ASP pages result in the back button not working in Chrome and IE. Clicking the back button simply rewrites the URL without navigating, leaving the user on the ASP page. I solved this problem in Firefox, by setting "cache-control: no-store no-cache", but Chrome and IE don't seem to respect these for the back button.
My external link is like this:
<a target="" ng-href="http://localhost:61887/A/B/C.asp" ng-bind="item.DisplayText" href="http://localhost:61887/A/B/C.asp">Classic Page</a>
Despite starting with "http://" the link is handling by angular routing (this itself seems odd). So it is handled by our otherwise route and our NonRoutedLocationCtrl:
commonControllers.controller('NonRoutedLocationCtrl', ["$location",
function ($location) {
console.log($location);
window.location = $location.url();
}
]);
Navigation to the ASP page is successful, but the back button doesn't work correctly. Any insight would be helpful.

Spring MVC AngularJS Page Refresh/Redirect

I am using angularjs with spring mvc in my application. It is a single page application where there is a login button and multiple tabs. Tabs are not visible unless the user logs in. After user logs in, the tabs will be visible (login button will not be visible) and user can navigate and use features under any tab. The URL of all these actions will be same (Ex: www.xyz.com/context/).
I have problem with session management here. If the session expires when the user is in any of these tabs, say tab no. 3, the page should be reset to initial state where login button is visible and tabs are not.
I have configured spring session management like below
<security:session-management invalid-session-url="/invalidSession">
<security:concurrency-control expired-url="/" />
</security:session-management>
On session expiry, I have spring mvc controller configured to handle it. Like the one below.
#RequestMapping(value="/invalidSession", method = RequestMethod.GET)
public ModelAndView invalidSession () {
ModelAndView model = new ModelAndView("redirect:/");
model.setStatus(HttpStatus.);
return model;
}
Though this method is called on session expiry, the redirect doesn't reset my page to its initial state where only login button is visible. Rather, it stays in the same state in tab no. 3 and all other tabs still visible. If I hit the browser refresh button, it works fine.
I have also tried using model.setStatus(HttpStatus.RESET_CONTENT); in the above controller method, it still doesn't work.
I went through the question in Spring security and angular javascript redirect to login page, but it is bit complicated for my requirement and my requirement is quite simple. I guess we should be able to handle it through session management of spring with appropriate redirect where it resets my page.
How can I achieve this?
Ok. I have taken an angular approach. I have used component ng-idle as outlined in Angular session timeout and management.
Also, I have removed spring session-management tag as ng-idle solves my requirement.

Ionic content shows up only after clicking on SideMenu

I have an ionic App which was working fine but now It is showing little weird behaviour, When I run the app it does not show the data at first but when I click on side menu once or twice then it loads and shows the data. I have an nodejs api from which the data comes to my app and the same api has been put in aws api gateway, I noticed this behaviour since I implemented aws sdk for binding data in my APP.
What can be the root cause for the same?
I can share the code but I am not sure where the issue is whether in controllers or views?
I solved it using Ionic Loader as the reponse was taking long time. My side menu was not getting initialized with the same time as other views hence views were not rendering without sidemenu being rendered, The idea is to show a loader on every response and hide it when it's a success, so it will render the views successfully.
Hope it helps.

AngularJS page works only after refreshing it

I have used AngularJS in a section of my site (for 2 pages, using routes). When I navigate to one of these pages from a non-Angular page, I just get an empty container in which nothing loads. If now I try to navigate to the other Angular-based page, I have the same problem - nothing loads. I get no Angular errors in the console, no nothing.
However, if I refresh the page, the content will load and then everything will work!
I have made a screen recording of this issue: http://screencast.com/t/y72wrr8iO
How can I fix this?
I had this issue also. I found out that it was caused by a chrome extension (AngularJS Batarang), so removing/disabling the extension helped.
If it works after refreshing it means that it is something with loading order in your site. Check if you have correct order of loading, like:
vendor lbirariers -> your libraries -> (...) -> your controller
also check your dependency injection headers in js files, cause you might skipped something

AngularJS returned 404 error if I typed the URL

I have an angularjs application hosted in my local IIS with route configured. For example '/services' will use servicesController and services.partial.html view.
It worked well if I clicked the link on the main page and the browser address changed to http://localhost/services. But if I refresh or type this URL directly I got 404 error.
Can anyone help me what I did wrong.
when you refresh or type you page, the entire page while be reloaded out of angular's control, in fact its the browser that is taking control. thus you localhost have to return a valid resource for /services. without html being returned, there is no way angular can control the behavior of the route.
basically what you should do is config you server and return the same page for /services as /
Use http://localhost/#/services instead of http://localhost/services and this would work fine as I see.

Resources