How to handle JavaScript being disabled in AngularJS

Question

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.

The "best" way largely depends on the purpose and audience of the site. — Pointy
– Pointy, Commented Mar 7, 2014 at 17:14
I've updated the question to be more appropriate for the answer I'm looking for. — BrightIntelDusk
– BrightIntelDusk, Commented Mar 7, 2014 at 17:17

Community · Accepted Answer · 2017-05-23 10:29:47Z

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.

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Mar 7, 2014 at 17:33

BrightIntelDusk

4,6962 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark Bolusmjak · Accepted Answer · 2014-03-07 17:16:36Z

13

<NOSCRIPT>
You need Javascript enabled to use this site.
</NOSCRIPT>

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

answered Mar 7, 2014 at 17:16

Mark Bolusmjak

24.6k10 gold badges77 silver badges133 bronze badges

7 Comments

Pointy Over a year ago

It's also possible to put a <meta> redirect tag inside a <noscript> block, which allows you to do some work on the server to prepare appropriate messaging if need be.

BrightIntelDusk Over a year ago

What about all the angular tags showing up after rendering. There's more information to the solution that I feel your not getting to.

George Stocker Over a year ago

@IntegrityFirst Um. It's AngularJS. It needs JS. There's no way to get around that.

BrightIntelDusk Over a year ago

I'm confident that there is.

Mark Bolusmjak Over a year ago

@IntegrityFirst, your landing page can redirect to your Angular page if javascript is enabled, else display the message.

|

Collectives™ on Stack Overflow

How to handle JavaScript being disabled in AngularJS

2 Answers 2

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related