34

AngularJS is dependent upon JavaScript being enabled. This means that if someone visits an application or website built in AngularJS it will not render properly.

What are common conventions used to handle visitors with JavaScript disabled when using AngularJS?

Please explain why this is the case?

Included in the problem is the case of handling angular JS directives and {{data_bindings}}. So that the data does not show when the page cannot render the page.

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
BrightIntelDusk
  • 4,577
  • 2
  • 25
  • 34

2 Answers2

36

After considering other answers on this question and "How to detect if JavaScript is disabled?" as well as some further research on AngularJS.

First off you will want to hide all variables displayed through the databindings.

This can be done using ng-cloak which is appended to an HTML tag.

<div ng-cloak>
    <!-- page content here -->
    {{bound_data}}
</div>

It also includes a CSS tag to hide that element.

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

You will then want alternate content to be displayed for when a user has JavaScript blocked or disabled. This is done using the tag.

<noscript>
    You must have JavaScript enabled to use this app.
</noscript>

You have the choice to create an app with reduced features and functionality or require the visitor to have JavaScript enabled in order to use your app at all.

Community
  • 1
  • 1
BrightIntelDusk
  • 4,577
  • 2
  • 25
  • 34
13
<NOSCRIPT>
You need Javascript enabled to use this site.
</NOSCRIPT>

http://www.w3.org/TR/html401/interact/scripts.html#h-18.3.1

Mark Bolusmjak
  • 23,606
  • 10
  • 74
  • 129
  • 3
    It's also possible to put a `` redirect tag inside a ` – Pointy Mar 07 '14 at 17:17
  • What about all the angular tags showing up after rendering. There's more information to the solution that I feel your not getting to. – BrightIntelDusk Mar 07 '14 at 17:19
  • 1
    @IntegrityFirst Um. It's AngularJS. It needs JS. There's no way to get around that. – George Stocker Mar 07 '14 at 17:19
  • I'm confident that there is. – BrightIntelDusk Mar 07 '14 at 17:20
  • @IntegrityFirst Based on *what*? – George Stocker Mar 07 '14 at 17:20
  • @IntegrityFirst if there's markup on the page that needs to be "fixed" by JavaScript, that's when you'd use a redirect in the ` – Pointy Mar 07 '14 at 17:21
  • 2
    @IntegrityFirst, your landing page can redirect to your Angular page if javascript is enabled, else display the message. – Mark Bolusmjak Mar 07 '14 at 17:21