InfoHeap
Tech
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

AngularJS

  • Hello world
  • ng-init
  • ng-model
  • Controller to increment value
  • Controller - basic clock
  • Controller - ajax
  • date filter
  • include template (url)
  • include template (inline)
  • tabs using ng-switch
  • conditional style using ng-style
  • animation with ng-class
  • ng-if vs ng-hide/ng-show

AngularJS Directives

  • ng-bind
  • ng-bind-html
  • ng-bind-template
  • ng-blur
  • ng-change
  • ng-checked
  • ng-class
  • ng-class-even and ng-class-odd
  • ng-click
  • ng-cloak
  • ng-dblclick
  • ng-disabled
  • ng-focus
  • ng-hide
  • ng-href
  • ng-if
  • ng-list
 
  • Home
  • > Tutorials
  • > Javascript
  • > AngularJS

AngularJS ng-cloak examples

on Jul 25, 2016

AngularJS ng-cloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. It can be used in two ways

  1. Using ng-cloak attribute
    <div ng-cloak>{{ 'hello' }}</div>

  2. Using class ng-cloak
    <div class="ng-cloak">{{ 'hello' }}</div>

For the best result, the angular.js script must be loaded in the head section of the html document.

Example

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>

<div ng-app="myApp" ng-controller='MyCtrl'>
  <input ng-model="name" ng-init="name='John'"><br>
  <div ng-cloak>name: {{name}}</div>
</div>


<script>
  var module = angular.module('myApp', []);
  module.controller('MyCtrl', function($scope) {});
</script>
refresh done
try it online

Suggested posts:

  1. Javascript – how to view text inside DOM element
  2. node – how to find version of installed package
  3. AngularJS simple controller tutorial to increment a value
  4. Mac – how to always show scroll bar
  5. Docker quick start guide on Mac
  6. CSS – margin collapsing
  7. AngularJS ng-click examples
  8. How to include bootstrap javascript and css in wordpress post
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged AngularJS, Javascript, Tutorials
  • Browse content
  • Article Topics
  • Article archives
  • Contact Us
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | Company results | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries | InfoHeap Money

Copyright © 2025 InfoHeap.

Powered by WordPress