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.

Answer 1

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.