0

Assume that a user has JavaScript or cookies turned off in the mobile/desktop browser. Now, when a user comes to the site, the user should be re-directed to a specific page (e.g. some error page). How do I handle this in the front-end using AngularJS?

honk
  • 9,137
  • 11
  • 75
  • 83
Sunny
  • 1
  • If you simply need to give a message, the "noscript" tag works well: http://stackoverflow.com/a/9391219/476048 Detecting cookie support can be done in javascript, but @BenHarold 's answer is all that's left for auto redirect when javascript is not enabled. – Berin Loritsch Jan 12 '16 at 21:03

2 Answers2

0

You can use a meta tag in your HTML, but JavaScript will not work. AngularJS is JavaScript, so it's out of the picture.

The meta tag:

<meta http-equiv="refresh" content="0; url=http://example.com/">

The 0 is the delay in seconds before the redirect. Of course you'll want to replace http://example.com with the actual redirect URL.

More info on meta refresh.

Ben Harold
  • 6,242
  • 6
  • 47
  • 71
  • Thanks a lot for the answer. I have one more question. What if I need to check this across the application. Let's say I have this tag in index.html which stops me from loading the initial page. Later I will turn on the javascript and login to the application. What if I turn off javascript after I login. I should get the same error page and should not be able to navigate further. Can you please help me with this scenario – – Sunny Jan 13 '16 at 19:00
0

If you want to redirect browsers with no javascript support you would add this line of code:

<noscript><meta http-equiv="refresh" content="0; url=no-javascript.html"></noscript>

NOTE: change the value of 'url=' to be the correct absolute or relative URL you want.

The <noscript> tag can also inform the user that JavaScript is required for the website's full functionality.

In order to detect cookies, you'll have to use code from this question and answer: https://stackoverflow.com/a/19719108/476048 (copied for convenience)

var app = angular.module('plunker', ['ngCookies']);

app.controller('MainCtrl', function($scope, $cookieStore) {
  $scope.name = 'World';  
  $scope.areCookiesEnabled = false;
  $cookieStore.put("TestCookie", "TestCookieText");
  $scope.cookieValue = $cookieStore.get("TestCookie");

  console.log($scope.cookieValue);
  if ($scope.cookieValue) {
    $cookieStore.remove("TestCookie");
    $scope.areCookiesEnabled = true;
  }
});

And then in the HTML:

<div class="warning_message" data-ng-show="!areCookiesEnabled">
    <script>window.location.replace("no-cookies.html");</script>
</div>

Once the JavaScript check passes, we can be free to use AngularJS to test cookie support. By definition, if there is no javascript cookies can only be attempted to be set in the server with HTTP headers. The relocation command works on all browsers without any special libraries (see https://stackoverflow.com/a/506004/476048).

Community
  • 1
  • 1
Berin Loritsch
  • 11,400
  • 4
  • 30
  • 57
  • Thanks a lot for the answer. I have one more question. What if I need to check this across the application. Let's say I have this tag in index.html which stops me from loading the initial page. Later I will turn on the javascript and login to the application. What if I turn off javascript after I login. I should get the same error page and should not be able to navigate further. Can you please help me with this scenario – Sunny Jan 13 '16 at 18:59
  • @Sunny, If you are using an app framework like ASP.Net MVC, you can apply a template or style to all the pages in your application. You would put this logic in your template. Other than angularjs, I'm not sure what the rest of your project is using to generate pages. – Berin Loritsch Jan 13 '16 at 19:54