Chapter 4: Hiding AngularJS from the user

HTML

<button id="angular-loader" onclick="loadAngular()">Load AngularJS</button>
<div>
   1 {{ youShouldntSeeThisBecauseItIsUndefined }}
</div>
<div ng-cloak>
   2 {{ youWontSeeThisBecauseItUsesNgCloak }}
</div>
<div ng-cloak ng-init="val='Angular was initialized!';">
  3  {{ val }}
</div>

CSS

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

JavaScript

function loadAngular() {
    if(typeof angular === 'undefined') {
        // add script tag to trigger browser to load angular.min.js
        var script = document.createElement('script');
        script.src = "https://code.angularjs.org/1.3.2/angular.min.js ";
        document.getElementsByTagName('body')[0].appendChild(script);
        
        // initialize the framework
        initializeAngular();
    }
}

function initializeAngular() {
    if(typeof angular !== 'undefined') {
        console.log('AngularJS has been loaded!');
        // initialize top-level application module
        angular.module('myApp', []);
        // manually bootstrap
        angular.element(document).ready(function() {
            angular.bootstrap(document, ['myApp']);
            document.getElementById('angular-loader').remove();
        });
    } else {
        // wait for angular.min.js to load
        setTimeout(initializeAngular, 100);
    }
}